nicht angemeldet
Hallo,
Vier Preisfragen - bitte beantwortet die Fragen rein intuitiv und aus dem Stegreif, also probiert es nicht aus und lest nicht im Standard nach. Was fändet ihr logisch, welches Verhalten würdet ihr erwarten?
Die Auflösung folgt unten, bitte beantwortet euch im Kopf erst diese Fragen:
Beispielcode:
table {border-spacing:0; border-collapse:collapse; border:10px solid red;}
td {width:100px; height:100px; border:10px solid red; padding:0; background-color:gray;}
<table><tr><td> </td></tr></table>
Frage 1: Welche (äußere absolute) Höhe und Breite hat die rot umrandete Box der Tabelle? (Nicht gemäß dem internen CSS-Boxmodell, rein danach, wie groß die gefärbten Flächen bei der Ausgabe sind.)
Frage 2: Welche Höhe und Breite hat die graue Box (der Zelle)?
Für die folgenden Fragen wird der Code erweitert: Um das table-Element wird ein div-Element gelegt. Vor und nach dem table-Element wird jeweils ein p-Element mit einem Blindtext eingefügt. Das Markup sähe so aus:
<div>
<p>bla</p>
<table><tr><td> </td></tr></table>
<p>bla</p>
</div>
Das Stylesheet wird folgendermaßen ergänzt:
table {margin:0 0 0 5px; ...}
div {background-color:green; [padding:0;]}
p {margin:5px 0; background-color:yellow;}
Frage 3: Wie hoch ist der Abstand zwischen dem Gelb der p-Elemente und dem Rot des Tabellenrahmens? Anders gefragt, wie hoch ist jeweils der Bereich zwischen den gelben Boxen und der rot umrandeten Box, in dem das Grün des div-Hintergrunds durchscheint?
Frage 4: Wo weit ist die rot umrandete Box (horizontal) von der linken Kante der grünen Container-Box entfernt? Anders gefragt, wie breit ist der Bereich links neben der rot umrandeten Box, in dem das Grün des div-Hintergrunds durchscheint.
Die Auflösung folgt, bitte denkt über die obigen Fragen nach und scrollt dann herunter.
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Auflösung:
Frage 1:
Meine und wahrscheinlich die verbreitete Erwartung:
Breite: 10 Pixel linker Rahmen + 100 Pixel Zellenbreite + 10 Pixel rechter Rahmen = 120 Pixel.
Höhe: 10 Pixel Rahmen oben + 100 Pixel Zellenhöhe + 10 Pixel Rahmen unten = 120 Pixel.
Mozillas Verhalten (Firebird 0.6.1):
120 Pixel breit, 110 Pixel hoch.
Frage 2:
Erwartung:
100 Pixel breit, 100 Pixel hoch.
Mozillas Verhalten:
100 Pixel breit, 90 Pixel hoch.
Frage 3:
Erwartung:
Zwischen den p-Elementen und der Tabelle sind jeweils oben und unten 5 Pixel Abstand. In diesem Bereich ist der grüne Hintergrund zu sehen.
Mozillas Verhalten:
Dort ist kein Abstand, der Bereich ist 0 Pixel hoch. Die Boxen der p-Elemente grenzen direkt an die rot umrandete Box der Tabelle.
Frage 4:
Erwartung:
Zwischen der linken Kante des div-Containers und der rot umrandeten Box der Tabelle sind 5 Pixel Abstand. In diesem Bereich ist der grüne Hintergrund zu sehen.
Mozillas Verhalten:
Dort ist kein Abstand, der Bereich ist 0 Pixel breit, die rot umrandete Box der Tabelle grenzt direkt an die Kante des Elternelements.
Die Hausaufgabe ist nun, a) die Logik und b) den Sinn im Verhalten Mozillas zu suchen bzw. zu finden. »Weil es der Standard so vorschreibt«, reicht nicht als Begründung, allerdings wären die entsprechenden Passagen des Standards eventuell hilfreich, um die Logik nachzuvollziehen. Opera 7.2 tut es Gecko bezüglich Frage 1 und 2 übrigens gleich.
Noch einmal vereinfacht und abstrahiert:
table {border-spacing:0; border-collapse:collapse; border:10px solid red;}
td {width:100px; height:100px; border:10px solid red; padding:0; background-color:gray;}
div {background-color:green;}
p {margin:0; background-color:yellow;}
Warum macht Mozilla die Darstellung kaputt? (Ich weiß, er nimmt die Ecken der internen Breite und Höhe der Tabelle als Eckpunkte der Box, und diese Ecken liegen jeweils in der Mitte der Rahmen, daher die Überlappung der Rahmen zur Hälfte - aber welchen Sinn hat das?)
<img src="http://home.t-online.de/home/dj5nu/fanhost/css-tableborder-gecko.png" border="0" alt="">
Durch was begründet sich diese Darstellung? Steht im Standard tatsächlich ein solcher Quark?
Logisch wäre meiner Meinung nach bzw. ich würde wünsche mir und erwarte folgende Darstellung:
<img src="http://home.t-online.de/home/dj5nu/fanhost/css-tableborder-msie.png" border="0" alt="">
MSIE 6 macht das auch wie erwartet. Ganz unabhängig davon, welche Variante CSS-konform ist, welche Umsetzung würdet ihr erwarten, euch wünschen, welche zieht ihr vor? Ich persönlich brauche da nicht lange überlegen.
Ich rede übrigens immer vom sogenannten standardkonformen Rendermodus, in Testfalle wurde ein XHTML 1.0 Strict-Dokument verwendet.
Grüße,
Mathias