Welcher Browser hat Recht?

von **csscook** » 20.06.2011, 09:23

Ich bin über ein recht einfaches CSS-Problem gestolpert, das mich an meinem Verständnis von CSS stark zweifeln ließ, bis ich dann auf die naheliegende Idee kam, es in allen gängigen Browsern zu testen. Hier das Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<style>
#a{width:240px;background-color: green;}
#al{width:50%;background-color:#ccc;float:left;}
#ar{width:100px;float:left;background-color:#eee}
</style>
<body>
<div id="a">
<div id="al">irgendein Text im linken Bereich
</div>
<div id="ar">irgendein anderer Text, der im rechten Bereich platziert wird. Wenn die Bereiche gefloatet werden, schrumpft offenbar der a-container auf die Höhe 0
</div>
</div>
</body>
</html>
Ich hatte erwartet, dass der linke und der rechte Bereich auf einen grünen Hintergrund liegen, jedoch war der FF dazu nicht zu bewegen - der a-div hatte die Höhe 0 -, nur wenn ich das Floaten abschaltete hatte der a-Container wieder die erforderliche Höhe. Alternativ dazu konnte man den Hintergrund wieder hervorkitzeln, wenn man a die Eigenschaft overflow:hidden gab, was ich nun gar nicht mehr verstand.
Dies wollte ich eigentlich so als Problem ins Forum stellen, dann stellte ich fest, dass der IE und der Opera sich tatsächlich so verhalten, wie ich es erwartete, während Chrome und Safari in gleicher Weise wie der FF zicken.
Was ist nun eigentlich standardkonform und warum kann man mit overflow:hidden das erwartete Verhalten erzwingen?
Freue mich auf Eure Analysen und Aufklärung
csscook

von **sejuma** » 20.06.2011, 11:13

Zunächst brauchst du für den IE einen anderen Doctype, damit dieser das CSS-boxmodell korrekt darstellen kann.
Verwende deshalb diesen:

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

Dann müssen die CSS-Style-Angaben innerhalb des head-Bereichs und nicht im body stehen (noch besser: verwende eine ausgelagerte CSS-Datei).

Schließlich musst du vor dem Schließen von #a noch clearen, z.B. so (wobei du für die Style-angaben besser eine Klasse verwenden solltest):

Code: Alles auswählen: <div style="clear: both;"></div>

Siehe http://www.ohne-css.gehts-gar.net/0042.php

von **csscook** » 20.06.2011, 15:09

Danke für den Hinweis. Das fehlende clear ist das eigentliche Problem, hier lag mein Missverständnis in Sachen float.

Welcher Browser hat Recht?

Welcher Browser hat Recht?

Re: Welcher Browser hat Recht?

Re: Welcher Browser hat Recht?

Ähnliche Beiträge zu "Welcher Browser hat Recht?"

Wer ist online?