Dienstag, 27. Januar 2009

Das nervt – CSS Probleme mit border-collapse:collapse

Da haben wir Jahrelang die CSS Formatierungen für Tabellen versucht ordentlich zu machen, und jetzt kommt der RC1 vom Internet Explorer 8, und es gibt neue Probleme.

Beispiel:

<style type="text/css">
td
{
background-color:#D2D2D2;
border-left:15px solid black;
height:60px;width:60px;
} td.test
{
border-left:15px solid blue;
} </style> <table cellpadding="0" cellspacing="0"
border="0" style="border:15px solid green;"> <tr> <td class="test">Test</td> <td>Test</td> <td class="test">Test</td> <td class="test">Test</td> <td class="test">Test</td> <td>Test</td> <td>Test</td> </tr> </table>

Öffnet man diese Testseite im Internet Explorer 6 oder 7 als auch im Firefox, dann erhält man folgende Tabelle:

ohne border-collapse

Das Problem ist der blaue Rahmen der linken Zelle. Um das zu beheben reicht es aus der Tabelle ein weiteres CSS zu verpassen: border-collapse:collapse.

Je nach dem wie man das border-collapse in den Web Browsern implementiert, wird entweder ein grüner oder blauer Balken angezeigt. Interessant ist, dass der Firefox hier sogar die Farbe in den Ecken abschrägt, das finde ich interessant.

Internet Explorer:

IE 7 mit border-collapse

Firefox:

Firefox mit border-collapse

Wenn ich diese Version in dem RC1 des Internet Explorer 8 anschaue, dann finde ich weiße Linien an einigen Rahmen:

IE8 RC1 mit border-collapse

Hier mal in einer vergrößerten Ansicht:

border-collapse Lupe

Das ist erst einmal falsch, und sieht dann auch bei größeren Tabellen richtig dumm aus, gerade dann, wenn man Spalten als Abstandshalter verwendet, diese also leer sind, aber nun einen weißen Rahmen haben. Warum ist das noch keinem aufgefallen, oder ist das mit dem border-collapse:collapse falsch verstanden?

Und weiter: je nach Zoomeinstellung des Internet Explorer 8 werden dann weitere weiße Linien gezeichnet, z.B. bei 150% sieht das dann so aus:

IE8 RC1 mit 150% Zoom und border-collapse

Nur was mache ich jetzt mit meinen Webseiten? Auf eine korrekte Final warten? Mir bleibt wohl nichts anderes übrig…

Update: hier ist mein Feedback auf Microsoft Connect, bitte mit abstimmen.

Kommentare:

  1. Hallo,

    ich habe genau das gleiche Problem wenn ich entweder im Quirksmode oder IE7 Standardmode rendere - es funktioniert nur im IE8 Standardmode bei mir!

    im IE7 und IE8 Beta 1 & 2 hat alles noch bestens funktioniert.

    AntwortenLöschen
  2. Es ist noch schlimmer: ich habe ein table komplett ohne borders ("0px hidden" für table,tbody,tr und td), aber mit "border-collapse: collapse". Auf der rechten und linken Seite wird ein schwarzer Rahmen gerendert!

    AntwortenLöschen