Bilder in Zellen

[Christof]

Hallo *.*,

wenn ich ein Bild in einer Tabellen-Zelle hab und keine style-Attribute angeben sind. Sollte doch die Zelle so groß werden, wie das Bild. Bei mir bleibt aber sowohl links, als auch unter dem Bild ein minimaler Rand von vielleicht 1-2px. Das ganze tritt in beiden getesteten Browsern auf (FF2.0 und IE6.0)

Wie kann ich das unterbinden?

Beispiel:

<table style="border-collapse:collapse; border-style:none; border-color:black; width=1024px;">
  <tr style="line-height: 0;">
    <td id="1">
      <img src="/fotos/logo_header.png" style="border:none;width:1024px;" alt="logo" />
    </td>
    <td id="2" style="background-image:url(/fotos/logo_continuous.png); background-repeat:repeat-x;">
 &nbsp;
    </td>
  </tr>
  <tr>
    <td id="3">
      &nbsp;
    </td>
    <td id="4">
 &nbsp;
    </td>
  </tr>
</table>

Erläuterung:
Zwischen td 1 und td 2 sieht man den schwarzen hintergrund von td 1 durch, obwohl das bild drüberliegen sollte. Genauso zwischen td 1 und td 3

[Hans]

Die Abstände auf 0 setzen.

<img src="/fotos/logo_header.png" style="border:none;width:1024px;padding:0" alt="logo" />

[Gernot Back]

Hallo Christof,

es handelt sich um das Unterlängen-Problem. Da Bilder Inline-Elemente sind, wird, wenn Whitespaces, also Leerzeichen oder Umbrüche im Quellcode sind, der Platz, den die Unterlänge (das Schwänzchen eines g,j,p,q) unterhalb der Grundlinie (Unterkante des Bildes) benötigt, im IE reserviert. Lass deine Bilder in den Tabellenzellen mit display:block anzeigen oder nimm die Umbrüche und/oder Leerzeichen zwischen den <td>- und </td>-Tags und dem IMG-Element aus dem Quellcode raus.

Gruß Gernot