Tim Tepaße: Grafiken in Tabellen

Beitrag lesen

Aus einem mir unerfindlichen Grund ist bei meiner Version eine Lücke zwischen dem .gif und dem unteren Zellenrand, beim Original is das nicht der Fall.

Hilfe zu diesem Forum; Häufig gestellte Fachfragen: Woher kommen die Lücken zwischen meinen Bildern in der Tabelle?

Besonders der zweite verlinkte Text dort ist für Dich interessant, weil er den Unterschied zwischen standards mode und almost standard mode erklärt (Mehr zu den unterschiedlichen Rendering-Modi findest Du in SELFHTML).

Der einzige Unterscheid zwischen den Quelltexten liegt in der formatierung der selbigen. Meiner ist übersichtlicher.

Das Original wird vermutlich im almost standard mode gerendert. Dir fällt dort sicherlich auf, dass dort keinerlei Zeilenumbrüche oder sonstiger Whitespace zwischen den Element-Tags stattfindet. In Deinem Versuch dagegen befindet sich Whitespace (Zeilenumbrüche und die Leerzeichen/Tabs der sauberen Einrückung) zwischen den Elementen. Dieser Whitespace wird zwar vom Browser zu einem Leerzeichen zusammengefasst, aber letztendlich ist dann immer noch ein Leerzeichen-Textknoten in der Arbeitsspeicherrepräsentation Deines Dokumentes. Und da Text, wenn auch nicht sichtbarer, da ist, wird Dein Bild nach den Regeln des almost standards mode auf die Text-Basislinie gesetzt und dadurch kommt der Leerraum unter den Bildern, der für die Unterlängen des Textes vorgesehen ist.

Du kannst jetzt einfach sämtlichen Whitespace zwischen den Element-Tags entfernen. Oder aber Du stellst Bilder mittels CSS auf Block-Elemente um. Letzteres dürfte auch praktisch sein, wenn Du irgendwann mal auf den richtigen standard mode wechseln dürftest.

Nebenbei wäre es geschickter, wenn Du sehr viel mehr mit CSS machen würdest. Praktisch alle layout-bestimmenden Attribute in Deinem Beispiel und die überflüssige div-Elemente können durch geeignete CSS-Regeln ersetzt werden.