25.07.2008
Wer floatet, muss auch clearen! - Teil II
In Teil I hatten wir dargelegt, weshalb der Firefox bei einem fehlenden clear den Hintergrund einer Seite nicht vollständig bis zum unteren Rand darstellt.
In diesem Teil II wollen wir ergründen, weshalb sich der Firefox über vordefinierte Abstände hinwegsetzt.
Der Firefox ignoriert "margin-top"
Für dieses Beispiel verwenden wir eine Seite mit zentrierter Horizontal-Navi und einem ebenfalls zentrierten Content. Nichts besonderes also. Der Content soll einen Abstand zur Navi von 30 px haben, was wie folgt zum Ausdruck kommt:
#content {
width: 656px;
margin: 30px auto;
padding: 15px 30px;
border: 10px solid #8B4500;
background-color: #FFF5E6;
}
Der Rahmen wurde extra so breit gewählt, um den später auftretenden Effekt zu verdeutlichen.
Für die Navi verwenden wir eine Liste. Damit sich die einzelnen Links nebeneinander anordnen sind die einzelnen Listeneinträge links gefloatet und wie folgt formatiert:
#cssmenu li {
list-style-type: none;
float: left;
}
Der komplette CSS- und HTML-Code ist auf der Demoseite dargestellt.
Wärend unsere Seite im Internetexplorer wieder ganz ordentlich aussieht (wenngleich die Darstellung nach Webstandard falsch ist), verlagert der Firefox den Contentbereich ganz nach oben und schiebt ihn so zusagen unter die Navi.
Darstellung im Internetexplorerer:
Darstellung im Firefox:
Es fehlt der Abstand zwischen Navi und Content; der Content schiebt sich unter die Navi.
Dabei sind dem #content doch extra 30px margin-top zugewiesen. Weshalb verweigert nun der Firefox diesen Abstand zwischen Navi und Content und schiebt zudem den Content noch nach oben? Ebenfalls verblüffend: Im Gegensatz zum Internet Explorer hält der Firefox zum oberen Bildschirmrand gerade die 30px Abstand, die er zur Navi halten sollte.
Nun, unsere einzelnen Listeneinträge für die Navigation wurden mit einem float: left; versehen, damit sie sich nebeneinander anordnen.
Damit sind sie wie bereits in Teil I erläutert aus dem Fluss der HTML-Elemente genommen. Unsere Navi existiert für den nachfolgenden Content nicht und wird von diesem nicht berücksichtigt. Folglich verhält er sich so, als wäre er das erste Element dieser Seite und setzt sich ganz an den Anfang.
Das Zauberwort heißt nun wieder clearen!
Indem wir vor den Content einen clearenden Div setzen, erkennt der Content die gefloateten Listeneinträge und kann somit die 30px Abstand halten, so wie per CSS definiert.
Ergänzen wir also den HTML-Code mit
</ul>
<div style="clear: both;"></div>
<div id="content">
Damit sieht unsere Seite auch im Firefox ganz palletti aus. Erneut war ein fehlendes Clearing die Ursache allen Übels.
Somit merken wir uns für alle weiteren Problemfälle einmal mehr: Wer floatet, muss auch clearen!