Bild gleich hoch wie 3 Zeilen Text

[tobig]

Hallo!
Ich habe folgendes Problem: Ich habe eine Tabelle, in welcher in einer Zeile ein kurzer Text steht (via PHP generiert), und ein Bild ist oben links eingefügt. Ich möchte gern, dass das Bild gleich hoch ist wie 3 Zeilen Text, es also unter dem Bild nicht eine 1/2 - 99% einer Zeile leer sind. Hier ein generierter Code:

<table border=1 width=400>
<tr id="spoiler675251" style="display: table-row;">
 <td style="text-align:justify" colspan="2">
  <img height="58" src="http://www.hindumarriage.net/photo/gents.jpg" style="float:left; margin-right: 0.3em;">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 </td>
</tr>
</table>

Firefox rendert es "richtig", also mit den gewünschten Abstand zur nächsten(4.) Zeile, Chrome nahezu OK, aber IE, Safari, Opera und der Android-Browser leider nicht (es ist fast eine ganze Zeile unter dem Bild frei, bevor es weitergeht, anstelle von ca. 3em).
Danke im Vorraus für eure Hilfe!
lg tobias

 

[threadi]

Die Tabelle macht aus semantischer und gestalterischer Sicht hier keinerlei Sinn. Der Text ist zudem ein Absatz.

Folgender Code reicht völlig:

<img height="58" src="http://www.hindumarriage.net/photo/gents.jpg" style="float:left; margin-right: 0.3em;">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Durch den Absatz kannst Du den Text auch gezielt per CSS gestalten. In diesem Fall wird vermutlich noch die Angabe line-height notwendig sein, damit der Text in allen Browsern die selbe Höhe einnimmt.

 

[Marv]

Der Abstand kommt wohl von der line-height des Textes. Diese kannst du aber auch nicht einfach verkleinern, weil dann unter dem Bild eine vierte Zeile umbricht, und das auch nicht gewünscht ist die Zeilenhöhe zu ändern.

Es würde wahrscheinlich wie folgend gehen:

-Setzte deinen Text in ein span oder p Element, und gebe diesem span / p Element die Style-Angaben position:relative; und top:-1px;

Somit wäre der Text ein wenig nach oben verschoben, ohne dass die Abstände mit dem Bild kollidieren (Da durch relative Positionierung aus dem normalen Fluss genommen).Ich weiß natürlich nicht, ob das mit allen Browsern klappt. Wohl nicht die schönste Lösung, tut aber in etwa das was du wolltest. Mir fällt auch im Moment nichts anderes ein, außer, dass zwischen Bild und Text eigentlich immer etwas Platz gelassen wird.

 

[tobig]

Vielen Dank! Mit Line-Height und span habe ich das Problem lösen können.
Zur Tabelle: Das ist nur ein kleiner Ausschnitt aus dem Code, es gibt natürlich noch weitere TableCells!
lg