nicht angemeldet
Hallo zusammen,
bei der Verwendung von in ihrer Höhe festgelegten Tabellenzellen ist mir aufgefallen, dass Mozilla die Höhenangaben falsch anzuwenden scheint.
Zunächst ein einfaches Beispiel mit HTML-Formatierungen:
<table border="0" cellspacing="0" cellpadding="10">
<tr>
<td height="60" width="400" style="background-color:#ddd;">
<div style="height:20px; background-color:#ccc;"></div>
</td>
</table>
Die Höhe der content edge der Zelle sollte mindestens 60 Pixel hoch und 400 Pixel breit sein, zusammen mit dem cellpadding ergibt sich folglich eine Gesamthöhe von 80 Pixel und eine Gesamtbreite von 410 Pixel. Innerhalb dieser Zelle sollte mittig eine 20 Pixel hohe andersfarbige Fläche liegen. Von der padding edge der Zelle aus gesehen besteht die Zelle folglich vertikal von oben nach unten aus:
- 10 Pixel oberen paddings,
- 20 Pixel Leerraum,
- 20 Pixel des div-Elements,
- 20 Pixel Leerraum und
- 10 Pixel unteren paddings.
Soweit ist es meines Wissens determinierbar und sollte auch in den neueren Browsern keine Probleme bereiten, sofern sie das W3C-Boxmodell beachten. Eingebettet in ein Dokument, welches jeweils den (eigentlich speziell den realen, nicht »almost«) standardkonformen Modus auslöst, sieht der linke Anfang der Tabelle aber im Mozilla unterschiedlich aus (auch im quirks mode übrigens):
<img src="http://home.t-online.de/home/dj5nu/fanhost/css-tableborder.png" border="0" alt="">
Mozilla (getestet mit 1.2b und 1.3a) bezieht die Innenrändern in die Gesamthöhe der Zelle mit ein, wie man es vom MSIE Boxmodell-Bug gewöhnt ist. Er macht folglich im standardkonformen Modus genau den Fehler, welchen MSIE 5.x generell macht, MSIE 6 und Opera 7 im quirks mode, in welchem sie den MSIE 5.x-Bug emulieren. Der naheliegendste Workaround wäre folglich, auf einen DOCTYPE zu verzichten beziehungsweise einen unvollständigen anzugeben (HTML), womit man sich aber weitere Probleme einhandelt. Außerdem zeigt sich Opera 6.05 sowieso unbeeindruckt von auf MSIE-Bugs ausgerichtete Webseiten und wendet stoisch seine Standards an.
Mozilla vergrößert die Zelle durchaus, aber erst bei height>40, Opera und MSIE aber schon logischerweise bei height>20. Diese 20 is natürlich die Summe der oberen und unteren padding-Innenabstände.
Übertragen auf CSS-Formatierungen ist das Problem ebenso existent. Weitere Testfälle: http://home.t-online.de/home/dj5nu/fanhost/css-tablepadding.html.
In der ersten Tabelle sind zunächst 20 Pixel padding oben und unten angegeben. In der einzigen Zelle der Tabelle befindet sich ein leeres div-Element, welchem die Höhe 20 Pixel zugewiesen wird. Da alleine der Inhalt der Zelle die Höhe der content edge bestimmt, ist die Zelle ohne Innenabstände folglich 20 Pixel hoch, die Tabelle insgesamt demnach 60 Pixel.
Unter der Tabelle wird der offsetHeight-Eigenschaftswert der Zelle ausgegeben, welcher in allen Browsern 60 (Pixel) ergibt, was darauf hinweist, dass offsetHeight mindestens die Höhe der padding edge oder einer darüberliegenden zurückgibt, sprich die paddings sind in der Höhe inbegriffen, wodurch offsetHeight auch der Tabellengesamthöhe entsprechen sollte (falls ich jetzt nichts verwechsele), wenn border aller Zellen und der Tabelle deaktiviert sind und border-spacing ebenfalls auf Null steht beziehungsweise sowieso border-collapse:collapse angegeben ist.
Der Zelle in der zweiten Tabelle wird eine explizite (content edge-)Höhe von 40 Pixel zugewiesen, weshalb hier der anfangs angesprochene Freiraum auftreten sollte, wodurch die Tabelle insgesamt 20+40+20=20+(10+20+10)+20=80 Pixel hoch sein sollte. Im Mozilla ist sie aber faktisch nur 60 Pixel hoch.
Die dritte Tabelle unterscheidet sich von der zweiten nur in der festgelegten Breite, dies ist ein Workaround zur Umgehung eines Opera 7-Bugs. Denn je nach Fenstergröße wird die zweite Tabelle mit width:100%; ebenfalls nur 60 Pixel hoch angezeigt, wenn dann das Fenster horizontal verkleinert wird und das Dokument neu geladen wird, wird sie plötzlich 80 Pixel hoch angezeigt. Ich glaube bei 999 zu 1000 Pixel eine Grenze ausgemacht zu haben, dies kann aber an meiner 1024er-Bildschirmbreite liegen. Opera 6.05 zeigt sich davon unbeeindruckt. (Meiner Erinnerung nach ist mir im Zusammenhang mit Opera 7.x schon einmal ein solches Problem begegnet, vielleicht irre ich mich.)
Die vierte und fünfte Tabelle stellt jeweils die von mir anfangs beabsichtigte Anwendung des Zelleninnenabstands dar, das heißt mein Ursprungsproblem, bei welchem ich über Mozillas Verhalten gestolpert bin. Im Beispiel ist es eine 400 Pixel breite und 70 Pixel hohe Zelle - bei der konkreten Anwendung ist diese Zelle natürlich in eine Layouttabelle mit mehreren Zeilen und Spalten untergebracht, das Problem ließ sich aber auf eine Zelle eingrenzen. Darin soll ein Text beziehungsweise zunächst ein leeres Element mit einer festen Höhe, um eine line box zu emulieren, zehn Pixel vom oberen Rand entfernt positioniert sein, sodass padding-top nahe liegt.
In den anderen Browsern ist die vierte Tabelle wie gewünscht 70 Pixel hoch, nur im Mozilla 60 Pixel, da er die width stur auf die padding edge anwendet...
Ich wette viel darauf, dass ich irgendetwas Triviales übersehen habe, da ich außer dem bekannten MSIE 5.x-Bug keine Komplikationen erwartet hatte und der standards-compliant mode laut Mozilla auch angewendet wird.
Hat jemand eine Idee, wie man Mozilla zum Mitmachen bewegen kann? Sicherlich fallen mir zahlreiche Alternativmöglichkeiten ein, wie beispielsweise die fünfte Tabelle, bei welcher ohne padding gearbeitet wird. Dennoch interessiert es mich, wie ich es ohne ein zusätzliches Element lösen kann.
Grüße,
Mathias