display:table -- IE8 bug?

[Marcus E]

Hallo,

ich möchte das Layout einer Web-Site von Stütztabellen befreien, mit geschachtelten Containern (display:table // display:table-row // ...) klappt das in Safari (Chromium) und Firefox einwandfrei, nur IE8 stellt das Ganze nicht vernünftig dar. Habe ich einen Fehler im CSS eingebaut oder ist der IE8 bzgl. display:table immer noch buggy?

Zum Verleich: altes Layout mit Stütztabelle (Seitenkopf: Logo, Textmeldung, Foto) und die neue, tabellenfreie Version -- das Stylesheet gibt's jeweils unter /style.css

Vorab schonmal Danke und Guten Rutsch!

• Marcus

[Ralfo]

Moin,

ich möchte das Layout einer Web-Site von Stütztabellen befreien, mit geschachtelten Containern (display:table // display:table-row // ...) klappt das in Safari (Chromium) und Firefox einwandfrei,

mal ganz grundsätzlich: Welchen Sinn soll es denn haben, den Tabellenkram aus HTML raus- und in CSS reinzustecken? Damit hast du nicht nur Layouttabellen, sondern diese auch noch in einer technischer unnötig komplizierten Ausführung. Das ist ein bisschen, als wenn du deinen Eselskarren durch einen VW-Bully ersetzt und den Esel in den Motorraum steckst.

Grüße,
Ralfo

[Der Martin]

Hallo,

Das ist ein bisschen, als wenn du deinen Eselskarren durch einen VW-Bully ersetzt und den Esel in den Motorraum steckst.

ja, dabei sitzt der meistens am Steuer. ;-)
Ansonsten: Full ACK.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Das ist ein bisschen, als wenn du deinen Eselskarren durch einen VW-Bully ersetzt und den Esel in den Motorraum steckst.

ja, dabei sitzt der meistens am Steuer. ;-)

Hehe, das mag bei Opel so sein, aber nicht bei VW, schon gar nicht bei Bullis.

Qapla'

[O'Brien]

Hi.

Das ist ein bisschen, als wenn du deinen Eselskarren durch einen VW-Bully ersetzt und den Esel in den Motorraum steckst.

ja, dabei sitzt der meistens am Steuer. ;-)

Hehe, das mag bei Opel so sein, aber nicht bei VW, schon gar nicht bei Bullis.

Nein, denn da sind's Mulis.

Schönen Sonntag noch!
O'Brien

[Marcus E]

mal ganz grundsätzlich: Welchen Sinn soll es denn haben, den Tabellenkram aus HTML raus- und in CSS reinzustecken?

Trennung von Inhalt und Layout. Bei den drei Elementen handelt es sich nicht um tabellarische Daten, sie sollen lediglich auf geegneten Ausgabemedien nebeneinander dargestellt werden ... aber z. B. auf der Textkonsole (lynx) oder bei browserseitig abgeschaltetem CSS untereinander.

Damit hast du nicht nur Layouttabellen, sondern diese auch noch in einer technischer unnötig komplizierten Ausführung.

Für andere Vorschläge, wie ich im Normalfall (graphischer Browser, ausreichend grosser Bildschirm) die drei Elemente so nebeneinander plazieren kann, dass das erste linksbündig bei 2% und das dritte rechtsbündig bei 92% des viewports sitzen, bin ich offen.

Ich hatte schon 'float' probiert, daran gefällt mir aber nicht, dass die DIVs bei browserseitigem Hineinzoomen übereinandergelegt werden, daher kam ich zu der tabellenartigen Lösung -- die allerdings (in meiner aktuellen Implementierung) von einem gewissen Browser absolut murksig dargestellt wird.

• Marcus

[Ralfo]

Für andere Vorschläge, wie ich im Normalfall (graphischer Browser, ausreichend grosser Bildschirm) die drei Elemente so nebeneinander plazieren kann, dass das erste linksbündig bei 2% und das dritte rechtsbündig bei 92% des viewports sitzen, bin ich offen.

Ich habe reingeschaut und hätte liebend gerne ein wenig rumprobiert, aber Firebug zeigt mir nur gefühlte zweitausend divs an - liegt wohl daran, dass deine Seite ganz schlimmen Schuppenbefall hat. Vielleicht hilft Web & Shoulders.

Ich hatte schon 'float' probiert, daran gefällt mir aber nicht, dass die DIVs bei browserseitigem Hineinzoomen übereinandergelegt werden,

Dass was übereinanderpurzelt, ist mir bei float noch nicht untergekommen, nur bei position.

Setze das Menü per float nach links, die zwei Elemente der rechten Spalte laufen normal und bekommen einen linken Außenabstand (margin-left) in der Breite des Menüs. Die Maßeinheit em ist hier recht hilfreich.
Das wäre die übliche Vorgehensweise, für dieses Standardlayout (Kopfzeile, darunter zwei Spalten, Menü links, Inhalt rechts) müssten sich eigentlich eine ganze Menge Vorlagen finden.

daher kam ich zu der tabellenartigen Lösung -- die allerdings (in meiner aktuellen Implementierung) von einem gewissen Browser absolut murksig dargestellt wird.

Die CSS-Werte für Tabellen haben IMHO ihre Existenzberechtigung lediglich darin, die besonderen Eigenarten der HTML-Tabellenelemente CSS-seitig in der Theorie abzubilden.

[Novi]

Hallo,

mal ganz grundsätzlich: Welchen Sinn soll es denn haben, den Tabellenkram aus HTML raus- und in CSS reinzustecken?

display:table ist halt gerade dafür da, um Elemente wie durch eine Tabelle formatiert aussehen zu lassen. Aber sie werden nur so angezeigt und nicht als Tabelle ausgezeichnet. Im Gegensatz dazu ist das Table-Element für tabellarische Inhalte gedacht, die man theoretisch mit Css nicht wie eine Tabelle aussehen lassen muss.

Es spricht ja prinzipiell nichts gegen ein "Tabellenlayout", wenn man gleich hohe Spalten haben will. Nur das Table-Element darf dafür nicht verwendet werden.

Viele Grüße Novi

[[gelöst] Marcus E]

Es spricht ja prinzipiell nichts gegen ein "Tabellenlayout", wenn man gleich hohe Spalten haben will. Nur das Table-Element darf dafür nicht verwendet werden.

Es gibt nunmal auch andere Ausgabeformen als den grafischen Browser für Leute mit voller Sehkraft ...

Anyway, mein Ausgangsproblem ist mittlerweile gelöst, ich habe den * html Hack für CSS gefunden, der auch beim 8.x IE funktioniert. Damit wird die CSS-"Tabelle" im IE zwar nicht genau so dargestellt wie sie sein sollte (und regelkonforme Browser dies auch rendern), aber immerhin ungefähr ...

Ich lege ja sowieso keinen Wert auf pixelgenaues Layout, bin mit dem Ergebnis also einverstanden. Und die absolute Positionierung des eigentlichen Inhalts werde ich auch noch beseitigen. :-)

• Marcus

[molily]

Es gibt nunmal auch andere Ausgabeformen als den grafischen Browser für Leute mit voller Sehkraft ...

Das ist ein Märchen und daher ein sehr schlechtes Argument. Screenreader kommen hervorragend mit Tabellenlayout aus.

Anyway, mein Ausgangsproblem ist mittlerweile gelöst, ich habe den * html Hack für CSS gefunden, der auch beim 8.x IE funktioniert.

Besser du beseitigst die Grundursache. Du verwendest einen DOCTYPE, der den Quirks-Modus auslöst. Damit verhält sich der IE 8 nicht standardkonform. Dass dir im Quirks-Modus unglaublich viele IE-Fehler begegnen, ist kein Wunder. Steige auf einen vollständigen DOCTYPE um, dann nutzt der IE überhaupt seine aktuellen Fähigkeiten.

Hacks wie * html funktionieren im standardkonformen Modus dann auch nicht mehr. Sie sollten aber auch nicht mehr nötig sein, IE 8 hat eine gute Implementierung von display:table und Co.

Mathias

[Marcus E]

Es gibt nunmal auch andere Ausgabeformen als den grafischen Browser für Leute mit voller Sehkraft ...

Das ist ein Märchen

Nein, lynx existiert. ;-P

Besser du beseitigst die Grundursache. Du verwendest einen DOCTYPE, der den Quirks-Modus auslöst. Damit verhält sich der IE 8 nicht standardkonform. Dass dir im Quirks-Modus unglaublich viele IE-Fehler begegnen, ist kein Wunder. Steige auf einen vollständigen DOCTYPE um, dann nutzt der IE überhaupt seine aktuellen Fähigkeiten.

Hacks wie * html funktionieren im standardkonformen Modus dann auch nicht mehr. Sie sollten aber auch nicht mehr nötig sein, IE 8 hat eine gute Implementierung von display:table und Co.

Ich habe jetzt mal auf den Testseiten

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

gesetzt ... sollte wohl der richtige sein(?). Jedenfalls klappt's nun auch mit dem IE8 wie gewünscht. :-)

*Vielen Dank* für diesen Hinweis, darauf wäre ich selber nie gekommen!

• Marcus

[Gunnar Bittersmann]

@@[gelöst] Marcus E:

nuqneH

* html Hack für CSS […], der auch beim 8.x IE funktioniert.

Wie bitte??

Schickst du Browser in den Quirksmodus?

Qapla'