float und clear

Hallo zusammen,

beim Versuch, meine Homepage von Tabellendesign auf Divs und CSS umzustellen, bin ich auf folgendes Problem gestoßen. Ich bitte weniger um Ratschläge, wie ich es umgehen kann als vielmehr um Meinungen, ob sich der Fb hier völlig richtig verhält oder es ein Bug ist.
[Blockierte Grafik: http://www.hallofreun.de/temp/test1.jpg]
Seite test1 hat einen Kasten links (lila) mit den Eigenschaften float:left und clear:left. Drumherum fließt ein Text, in den wieder ein Kasten (Bild und Beschriftung) mit float:right eingebettet ist.
[Blockierte Grafik: http://www.hallofreun.de/temp/test2.jpg]
Bei test2 ist ein weiterer linker Kasten dazugekommen. Das Bild wird von IE und Opera7 weiterhin an der alten Stelle angezeigt. Fb (und Fx) verschiebt es aber nach unten neben den neuen Kasten. Dabei ignoriert er sogar die Abstandsangabe margin-top:5px und lässt die Schrift ins Bild hineinragen.

Wenn Fb/Fx der Meinung ist, nach einem mit clear nach links positioniertem Element sei das float aufgehoben, müsste er doch auch die Schrift erst unten beginnen lassen und nicht nur das Bild.

Validierung von html und css war übrigens ok. CSS-Datei: http://www.hallofreun.de/temp/test/css/test.css

Martin

Hallo Martin,

entschuldige, dass ich mich erst jetzt melde, bin auf Dienstreise.

Die Definitionen, wie sich CSS verhalten soll, habe ich auf Deutsch nicht finden können, und auf Englisch ist mir das Thema zu anstrengend. Deshalb wusste ich nicht, dass float-Elemente nicht über einem vorhergegangenen float-Element beginnen dürfen. Am anderen Rand und in einer anderen div kam das etwas überraschend.

Aber wie ich schon befürchtet hatte: Das merkwürdigste Verhalten ist meist doch regelkonform.

Schönen Dank,
Martin

Hallo,

Jetzt bekomme ich das gewünschte Aussehen von test2 auch im Firebird:
[Blockierte Grafik: http://www.hallofreun.de/temp/test3.jpg]
Aber in Übereinstimmung mit den Regeln scheint mir das nicht zu sein:

5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
6. The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

5. Die äußere obere Kante einer Floating-Box darf nicht höher als die äußere obere Kante einer Block- oder Floating-Box liegen, die von einem früheren Element im Quelldokument erzeugt wurde.
6. Die äußere obere Kante der Floating-Box eines Elements darf nicht höher liegen als die obere Kante einer Zeilen-Box, die eine Box enthält, die von einem früheren Element im Quelldokument erzeugt wurde.

Die Bilder sind in Floating-Boxen eingebettet, deren obere Kanten über der oberen Kante des lila Kastens liegen. Dieser steht im Quelldokument viel früher, ist ein Block und eine Box in einer Zeilen-Box (oder?). Also steht das Verhalten des Fb/Fx im Widerspruch zu den Regeln 5 und 6.
Ich nehme an, der lila Kasten hat auf die Positionierung der Floating-Boxen keinen Einfluss, weil er in eine div eingebettet ist. Aber aus den Regeln kann ich nicht lesen, dass diese Einbettung den Einfluss aufheben soll.
Allerdings verstehe ich auch nicht, warum in Regel 6 ein "Element" (rot hervorgehoben) erwähnt wird.

Es liegt wohl nicht nur an der fremden Sprache sondern auch an den Formulierungen, wenn ich die Spezifikation von CSS nicht verstehe.

Martin

Hallo bugcatcher,

das war nur ein Flüchtigkeitsfehler. Das linke Bild habe ich mal hier mal da eingefügt, um die Reaktion zu testen. Beim rechten Bild war ich sorgfältiger.

Aber meinst du nicht auch, dass nach den Buchstaben des Gesetzes die Bilder erst auf gleicher Höhe mit dem lila Kasten erscheinen dürften?

Martin

Ich erinnere an das erste Posting dieses Threads. Da hat der Kasten neben dem Text-Bereich das Bild tiefer gehängt. Aber da war er als float ja noch irgendwie beteiligt. Mir fehlt nur in den Regeln 5 und 6 ein Hinweis, wann so ein Kasten durch Einkapselung seinen Einfluss verliert.