Wieso verändert die Doctype URL die Ausgabe???

[Sven Rautenberg]

Moin!

Schreibt man ein Dokument mit 3 farbigen divs, egal ob mit oder OHNE Inhalt, dann werden die schön untereinender angezeigt.

Genau. DIV ist ein Block-Element, das man in Höhe und Breite definieren kann. Deshalb siehst du drei Blöcke.

Und da Blockelemente untereinander "gestapelt" werden, sind sie eben untereinander zu sehen.

Kommt jetzt bei den Style-ANgaben ein "display:inline" dazu, sieht man sie schön nebeneinender.

Die Tatsache, dass durch eine Änderung deinerseits in _einem_ Browser das erwünschte Ergebnis erzielt wird, bedeutet nicht, dass diese Änderung gemäß dem Standard korrekt ist. Dass ein inline-Element keine Höhe und Breite besitzen kann, hat MudGuard ja schon dargelegt. Dass der IE6 es in seinem "Ich stelle alles so falsch dar, wie meine Vorgängerversionen" falsch macht (und du es als richtig betrachtest), ist ein Problem.

Alle Browser, die den CSS-Standard besser umsetzen, werden dir diesen Darstellungsgefallen nicht tun. Und der IE6 im Standard-Modus auch nicht. Benutze also den Standardmodus und bastel dir eine bessere Lösung, die mit diesem Modus funktioniert.

Das kanns ja nicht sein. Dinge wie div und display sind ja ganz ordinäre Standards. Wieso kommts da zu solchen Konflikten???

Du wendest CSS falsch an - bzw. du wendest es an und erwartest die falsche Reaktion. Der IE6 tut dir den Gefallen, im falschen Modus wie gewünscht zu reagieren - du erreichst das Richtige mit den falschen Mitteln. Alle standardkonformen Browser werden dank deiner falschen Mittel aber das falsche anzeigen.

Gehen wir mal zurück auf deine Eingangsbemerkung, man solle statt Tabellen jetzt lieber DIVs und CSS benutzen.

Diese Forderung ist in dieser Form falsch wiedergegeben. Mittlerweile sind auch die CSS-Puristen schlauer geworden (naja, jedenfalls die pragmatischen).

Die Aussage müßte lauten: Statt Tabellen zur Formatierung zu verwenden, sollte stattdessen CSS eingesetzt werden.

Dass dazu DIVs verwendet werden _müssen_ - davon hätte man besser nie was gesagt. CSS formatiert auch Tabellen ganz wunderbar, und deine drei farbigen Flächen würde ich im Zweifel auch nicht mit DIVs machen, sondern ggf. ganz anders lösen.

Beispielsweise mit einem einzigen DIV:

<div style="height:50px; width:50px; background-color:green; border-left:50px solid red; border-right:50px solid blue;">

Das wendet den Trick an, einen sehr dicken Rahmen links und rechts an ein ganz normales DIV zu pappen.

Funktioniert in allen Browsern, und im IE6 nur dann, wenn der Standard-Modus aktiv ist (also mit URL im DOCTYPE).

Denn der IE hat einen sehr dummen Rechenfehler eingebaut, welcher die Breite (und Höhe) eines Elements falsch berechnet. Näheres dazu findest du im Archiv.

Da ich deinen Designentwurf nicht kenne, kann ich natürlich nur allgemeine Tricks angeben. Ich persönlich zögere keine Sekunde, zur Erreichung eines grafischen Zwecks auch Hintergrundbilder einzusetzen. Das mag für einfarbige Flächen vielleicht Overkill sein, und die Ladezeiten sowie die Anzeigedauer in die Höhe treiben - aber ständig wiederkehrende Elemente werden einmal auf der Startseite geladen und stehen dann im Cache zur Verfügung.

Und alle meine Seiten, die ich so für kommerzielle Kunden gebaut habe, laden die Startseite sehr schnell, weil ich üblicherweise auf riesige Grafiken, aber auch auf riesige Tabellen verzichten kann. 30 KB, allerhöchstens 40 KB (eine gerade fertiggestellte Seite benötigt 20036 Byte für die Startseite in 19 Dateien - also nochmal rund 19 KB zusätzlich für die Anforderung via HTTP, die aber auf allen Folgeseiten aus dem Cache bedient werden) - mehr hat eine Startseite (und auch jede Unterseite) nicht. Wenn ich mir dagegen einige "tolle" Startseiten von diversen Portalen ansehe: Danke! 200 KB sind gar nichts, zusammengesammelt von vielen einzelnen Werbeservern (was auch immer ewig dauert), und trotz DSL sitzt man lange Zeit dumm vor dem Bildschirm.

- Sven Rautenberg