nicht angemeldet
Problem bei innerem "clear" (Firefox)
Guten Abend allerseits!
Folgendes Problem beschäftigt mich: Ich habe 2 floatende divs, die zusammen ein 2-spaltiges Layout ergeben. Soweit alles klar. Nun möchte ich im rechten div ein Formular einfügen, welches ebenfalls floatende Elemente enthält (also Labels und Inputs). Diese inneren floats werden mit Hilfe von Zeilenumbrüchen (<br style="clear: left"> ...natürlich durch externen Style) aufgehoben.
Jetzt macht der Firefox folgendes: Sofort nach dem ersten Break springen alle weiteren Elemente in der rechten Box soweit nach unten, bis sie an der unteren Kante des sich in der linken Box befindlichen Textes stehen. Hebt jetzt das innere br mit seiner clear Eigenschaft den float der äußeren Boxen auf oder wie? Kapier ich nicht. Der IE muckt zwar sonst an jeder Ecke, in diesem Fall zeigt er aber keine derartigen Probleme.
Was kann ich tun, um diesen Fehler zu beheben?
LG, Marco
-
Moin!
Jetzt macht der Firefox folgendes: Sofort nach dem ersten Break springen alle weiteren Elemente in der rechten Box soweit nach unten, bis sie an der unteren Kante des sich in der linken Box befindlichen Textes stehen. Hebt jetzt das innere br mit seiner clear Eigenschaft den float der äußeren Boxen auf oder wie? Kapier ich nicht. Der IE muckt zwar sonst an jeder Ecke, in diesem Fall zeigt er aber keine derartigen Probleme.
Das Verhalten des Firefox ist absolut standardkonform. clear bedeutet, dass das geclearte Element sich vertikal unterhalb JEGLICHEN Floats ansiedelt.
Was kann ich tun, um diesen Fehler zu beheben?
Eine andere Methode des floatens anwenden. Der IE verhält sich falsch beim clearen, auf den Firefox (und alle anderen standardkonformen Browser) solltest du also viel eher achten, denn auch der IE wird sich in künftigen Versionen immer mehr an den Standard halten.
Eine typische Lösung wäre "FNE" - float nearly everything. Hängt aber von deinem Layout ab, wie das konkret umzusetzen ist.
Generell die Faustregel: Layouts immer erst im Firefox und ähnlich standardkonformen Browsern wie Opera, Safari, Konqueror testen, und dem IE (ggf. nur dessen Version 6) dann spezifische Browserbugfixes einflößen (z.B. durch ein per Conditional Comment eingebundenes Stylesheet).
- Sven Rautenberg
--
"Love your nation - respect the others." -
Guten Abend Marco!
Folgendes Problem beschäftigt mich: Ich habe 2 floatende divs, die zusammen ein 2-spaltiges Layout ergeben.
Warum floaten denn beide?
Was kann ich tun, ...?
Ich empfehle folgende Artikel/ Beispiele:
1. http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout
2. http://yaml.de/Das sollte dir genügend Infos und Beispiele liefern, um eine Lösung für dein Problem zu finden. Besonders interessant ist der "Block Formatting Context" in dem Artikel von Mathias aka molily.
Gruß Gunther
-
Vielen Dank! Wieder was dazu gelernt!
Zitat:
"Wie kann man es erreichen, dass das clear nur die innere Mehrspaltigkeit auflöst, nicht die äußere?Der kommende CSS-Standard Version 2.1 definiert, dass clear nicht immer global wirkt, sondern nur auf alle float-Boxen im gegenwärtigen Block Formatting Context.
Es gibt verschiedene CSS-Eigenschaften und Eigenschaftswerte, die dazu führen, dass ein Element als eigener Block Formatting Context angesehen wird. Darunter float selbst und overflow mit einem anderen Wert als visible. Genau wie bei der overflow-Methode bekommt nun der div-Container der clear-Methode overflow:hidden. Er wird dadurch zum eigenen Block Formatting Context und clear wirkt darin »lokal«."
Einen schönen Abend noch!
-