nicht angemeldet
Mozilla: border-collapse bug?
0 0 0 
Auge
0 
Gunnar Bittersmann
Mozilla: border-collapse bug?
Hallihallo,
ich bin letzte Woche auf ein interessantes, aber ärgerliches Verhalten von FF2+FF3 gestoßen:
Im doctype "Strict" und "Transitional" führt die Eigenschaft "border-collapse: collapse" bei einer Tabelle dazu, dass die Außenränder nicht im Bereich der Tabelle gezeichnet werden, sondern außerhalb. Durch einiges googlen konnte ich herausfinden, dass dieses Verhalten anscheinend schon seit mindestens 2005 bekannt ist (ob es nun tatsächlich ein Bug ist oder nicht weiß ich nicht), jedoch wohl nie gefixed wurde (auch im neuen FF3 nicht).
Ich habe mir jetzt nicht die exakte CSS-Spezifikation für diesen Fall durchgelesen, aber mal unabhängig davon ob es ein Bug ist oder nicht: Kennt jemand eine Möglichkeit, dieses Verhalten zu umgehen ohne auf border-collapse:collapse zu verzichten oder in einen anderen doctype zu schalten?
Gruß,
Kc
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#tata {
border: 1px solid #ff0000;
width:500px;
height:400px;
}
#toto {
border-collapse:collapse;
}
#toto td {
border: 6px solid #00ff00;
}
</style>
</head>
<body>
<div id="tata">
<table id="toto">
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
</table>
</div>
</body>
</html>
-
Hallo,
ich bin letzte Woche auf ein interessantes, aber ärgerliches Verhalten von FF2+FF3 gestoßen:
Im doctype "Strict" und "Transitional" führt die Eigenschaft "border-collapse: collapse" bei einer Tabelle dazu, dass die Außenränder nicht im Bereich der Tabelle gezeichnet werden, sondern außerhalb.
Ich habe mir jetzt nicht die exakte CSS-Spezifikation für diesen Fall durchgelesen,
soweit ich das der Spezifikation entnehme, arbeitet Firefox völlig spezifikationskonform.
aber mal unabhängig davon ob es ein Bug ist oder nicht: Kennt jemand eine Möglichkeit, dieses Verhalten zu umgehen ohne auf border-collapse:collapse zu verzichten oder in einen anderen doctype zu schalten?
Wo ist das Problem, wenn Tabelle und Zellen gleiche Borderbreite aufweisen?
Freundliche Grüße
Vinzenz
-
Ich hab mal einen Screenshot des Beispiel-Szenarios oben mit angefügt.
der rote Rahmen (1px breit) umgibt das Elternelement der Tabelle, der grüne Rahmen (4px breit) gehört zur Tabelle selbst. Wie man sieht, befindet sich die Hälfte des grünen Rahmens (2px) außerhalb des Elternelements. Blöderweise wird hier bei ungraden Zahlen auch noch aufgerundet, so dass ein 1px breiter Rahmen komplett außerhalb des Elternelements liegt.
Hat das Elternelement nun z.B. noch die Eigenschaft "overflow:hidden", dann sieht es so aus, als ob die Tabelle garkeinen Rahmen hat.
Wie gesagt, ich habe nicht nachgeschaut, ob dieses Verhalten korrekt ist oder nicht, allerdings zeichnen IE+Opera die Tabelle immer komplett im Elternelement. Mozilla und K-Meleon zeichnen die Hälfte des Rahmens außerhalb.
Entfernt man den doctype oder die "border-collapse" eigenschaft, so wird die komplette Tabelle im Elternelement gezeichnet.
-
Hallo
Ich hab mal einen Screenshot des Beispiel-Szenarios oben mit angefügt.
der rote Rahmen (1px breit) umgibt das Elternelement der Tabelle, der grüne Rahmen (4px breit) gehört zur Tabelle selbst. Wie man sieht, befindet sich die Hälfte des grünen Rahmens (2px) außerhalb des Elternelements. Blöderweise wird hier bei ungraden Zahlen auch noch aufgerundet, so dass ein 1px breiter Rahmen komplett außerhalb des Elternelements liegt.Wenn ich nicht irre, liegt das am CSS-Boxmodell. Selbiges besagt, dass sowohl
borderals auch ein eventuellesmargin*außerhalb* des betreffenden Elements liegt. Das gilt grundsätzlich auch fürpadding, welches aber meines Wissens nach bei Tabellen keine Auswirkungen hat. Somit ist die eigentliche Grenze des Elements am inneren Rand des Borders der Tabelle zu finden, womit der Border außerhalb des Elternelements liegt, wenn kein Abstand zwischen Elternelement und Kindelement geschaffen wird.Wie gesagt, ich habe nicht nachgeschaut, ob dieses Verhalten korrekt ist oder nicht, allerdings zeichnen IE+Opera die Tabelle immer komplett im Elternelement. Mozilla und K-Meleon zeichnen die Hälfte des Rahmens außerhalb.
Der IE folgt in Sachen Box Model nicht der CSS-Spezifikation (dort liegt nur
marginaußerhalb des Elements) und Opera scheint dieser Ansicht zu folgen.Entfernt man den doctype oder die "border-collapse" eigenschaft, so wird die komplette Tabelle im Elternelement gezeichnet.
Lösungswort betreffend fehlenden Doctypes: Quirks Mode.
Tschö, Auge
-
-
-
@@Kc:
Durch einiges googlen konnte ich herausfinden, dass dieses Verhalten anscheinend schon seit mindestens 2005 bekannt ist
Soso, damit verbringste Zeit, aber in die CSS-Spezifikation kucken ist nicht drin?
(ob es nun tatsächlich ein Bug ist oder nicht weiß ich nicht)
Sieht nicht nach Bug aus, sondern nach „works as designed“.
Ich habe mir jetzt nicht die exakte CSS-Spezifikation für diesen Fall durchgelesen
Warum nicht? In [CSS2 §17.6.2] wärste fündig geworden. Hättest auch gar nicht viel lesen müssen, nur Bilder ankucken.
Kennt jemand eine Möglichkeit, dieses Verhalten zu umgehen
Relative Positionierung der Tabelle mit Verschiebung um halbe Rahmenbreite nach rechts und unten?
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
@@Gunnar Bittersmann:
Kennt jemand eine Möglichkeit, dieses Verhalten zu umgehen
Relative Positionierung der Tabelle mit Verschiebung um halbe Rahmenbreite nach rechts und unten?
Grmpf, erst denken, dann schreiben. ↗[ZITAT907]
Einfach halbe Rahmenbreite als Abstand tut’s auch:
#toto { border-collapse: collapse; margin: 3px; }Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau) -
Yerf!
Warum nicht? In [CSS2 §17.6.2] wärste fündig geworden. Hättest auch gar nicht viel lesen müssen, nur Bilder ankucken.
Ok, die Tabellenabmessung beinhaltet nur den halben Rahmen, aber wo steht da jetzt, dass die Hälfte des Tabellenrahmen, die außerhalb liegen, auch aus dem umgebenden Element herausragt? Das passiert doch bei keinem anderen Element? Collapsing Border oder was? (ich hoffe ja das dies ein FF-Bug ist... die w3c-Specs sind auch ohne das schon komisch genug)
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Hi,
Warum nicht? In [CSS2 §17.6.2] wärste fündig geworden. Hättest auch gar nicht viel lesen müssen, nur Bilder ankucken.
Ok, die Tabellenabmessung beinhaltet nur den halben Rahmen, aber wo steht da jetzt, dass die Hälfte des Tabellenrahmen, die außerhalb liegen, auch aus dem umgebenden Element herausragt?
In der englischen Version wird's m.E. noch deutlicher:
"Any borders that spill into the margin are taken into account when determining if the table overflows some ancestor"MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Yerf!
"Any borders that spill into the margin are taken into account when determining if the table overflows some ancestor"
Die collapsing Borders zählen also nicht als Rahmen sondern liegen im Bereich vom Margin. Naja, muss man wohl so hinnehmen...
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
-
-
-