HTML td ist höher als gewünscht

[jokerchen]

Hallo,

das kommt davon, wenn man nichts mehr mit Tabellen macht. Jetzt will ich es mal machen und staune nur noch, was das Ding macht, ohne es zu sollen.

Man nehme etwas XHTML 1.1 Strict:

<table cellspacing="0" cellpadding="0">
	<tr>
		<td><img src="/src/01_01.png" alt="" /></td>
		(und so weiter)
	</tr>
	<tr>
		<td><img src="/src/02_01.png" alt="" /></td>
		(und so weiter)
	</tr>
</table>

Mische es mit etwas CSS:

body, table, tr, td	{margin: 0; padding: 0; border: 0;}
table			{border-spacing: 0;}
img			{border: 0;}

Das Ganze ist eine Tabelle mit 5 Spalten und 5 Zeilen und in fast allen Zellen ist eine Grafik mit Text darin.

Leider ist jeder td um 4 Pixel zu hoch. Also 4 Pixel höher als die Grafiken, die darin sein sollen.

Da alle relevanten Tabellenteile in jeder Hinsicht "genullt" sind, kann ich nicht erkennen, warum im Firefox, Opera und Internet Explorer immer alles +4px ausgegeben wird.

Bei Google fand ich auch nichts Passendes.

Woher ich weiß, dass der td Schuld ist? Hab einen Rahmen um img und td gemacht. Bei td waren die 4 unerwünschten Pixel da, bei img nicht.

 

[Sombatezib]

Und wenn du den Text weg lässt? Kann ja eventuell die Zeilenhöhe sein, die das verursacht. Nur mal so ins Blaue geraten.

Edit: oh, ich sehe gerade, dass der Text bereits in der Grafik stecken würde, also kann das nicht die Ursache sein. Ich habe nichts gesagt...

 

[NullPointer]

Inspiziere die Seite doch mal mit Firebug o.ä. - der kann dir ganz genau sagen, welche Styles an einem bestimmten Element gelten und welche Maße daraus berechnet werden.

 

[jokerchen]

Und wenn du den Text weg lässt? Kann ja eventuell die Zeilenhöhe sein, die das verursacht. Nur mal so ins Blaue geraten.

Edit: oh, ich sehe gerade, dass der Text bereits in der Grafik stecken würde, also kann das nicht die Ursache sein. Ich habe nichts gesagt...

Ja, sonderbar.

Hab z.B. auch versucht mit height im CSS-Sheet eine Höhe festzulegen. Hat aber auch nichts genutzt.

Abgesehen davon ist height bei strict 1.1 so wie so pipi.

Ergänzung (17. Oktober 2012)

Inspiziere die Seite doch mal mit Firebug o.ä.

Mensch Danke für den Hinweis. Meinen Firebug hab ich ja total vergessen.

Gibt aber leider nur präzise wieder, was per CSS definiert wurde. Nichts unerwünscht vererbtes oder so.

Steht auch noch nicht viel drin außer der Tabelle, in dem Ding.

An Firefox 16.0.1 kann es auch nicht liegen, die anderen Browser geben das Gleiche aus.

Ergänzung (17. Oktober 2012)

Vielleicht nutzt Jemanden die Info, dass ich den "Fehler" mit einer Klasse, in der dann "margin-bottom: -4px;" bei den img-Tags steht, korrigieren kann.

 

[kokson]

img ist ein inline element, da kommt dir line-height in die Quere.
Versuch mal img {display:block;}.

edit:
ok Falschaussage sorry, in strict doctypes sind img inline, und haben standard vertical-align: baseline,
du solltest auch mit img {vertical-align: bottom;} zum gewünschten Ergebnis kommen.

 

[jokerchen]

Hab ich wirklich strict 1.1 geschrieben? Sorry, meinte 1.0.

Aber trotzdem sind die unerwünschten Abstände mit {display:block;} wie weggeblasen. Also eigentlich Volltreffer.

Habs auch durch die W3C Validatoren gejagt und es gab nichts zu meckern.

Vielen fetten Dank dafür.

 

[T. Smith]

Hier nochmal die Theorie dazu: http://carsten-protsch.de/zwischennetz/doctype/luecken.html

 

[jokerchen]

Habs zwar noch nicht ganz durch, liest sich aber gut.

Danke.