float und clear

MartinH

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

Belly

Das ist lustig.
Der Konqueror (auch der aktuelle 3.2er) handhabt es wie der Firebird.

Der Grund für das komische Verhalten ist wohl das clear:left; bei den Kästen.
Wie das allerdings richtig gehört, kann dir wohl nur ein spezialisierteres Publikum sagen ...

Eine wirklich gute Seite für solche Probleme ist http://www.strohhalm.org
Die Leute dort sind überaus fit.

Egal, ob es nun ein Firefox-Bug ist oder nicht - man kann in jedem Fall zwei Bugreports machen
Ich werde mich auch nochmal umhören wegen den Problem. Mal sehen...

MMx2000

Hallo Martin,

IMHO verhält sich Fx hier vollkommen korrekt. so wie ich die CSS-Spec verstehe (hier mit "CSS2 Programmer's Reference" by E.A.Meyer), darf ein "float"-Element nicht oberhalb der oberen Kante eines vorher definierten "float" Elements liegen.
Und "clear:left" bedeutet, dass das Element unterhalb aller vorherigen "float:left"-Elemente liegen muss.
Deshalb liegt der 2. Kasten ja unterhalb des ersten Kastens.
Sehrwohl dürfen aber "inline"-Elemente auch weiter oben liegen, weshalb der Text oben anfängt.
Das das Bild dann erst dort unten ist, liegt an der ersten Regel. Denn der 2. Kasten ist ja vorher definiert, also darf es nicht höher liegen als der obere Rand des 2. Kastens.
Wenn Du also das Bild im 2. Fall oben haben willst wie im ersten Fall, muss es im Quelltext vor dem 2. Kasten stehen.

Falls Du Fragen dazu hast, frag ruhig.

Viele Grüße . . . Martin

MartinH

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

Belly

Hallo MartinH,

das Problem wird auch gerade im Opera-Forum diskutiert:
http://my.opera.com/forums/showthread.php?threadid=44906

Allerdings ist die Diskussion dort bisher eher wortkarg.
Ich hab mir die CSS-Spezifikation für diesen Teil auch mal angeschaut, und so ganz eindeutig ist sie nicht.
Mal schauen, was andere Leute dazu sagen. Ein interessantes Problem ist es auf jeden Fall.

Edit:
Gerade wurde ich von einem netten Menschen darauf hingewiesen, dass es die deutsche Übersetzung auf http://edition-w3c.de/TR/1998/REC-CS…tml#heading-9.5 gibt

MartinH

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

bugcatcher

Sieht eigendlich ganz gut aus. Ich denke mit dem "Element" meinen die nicht nur im Quelltext vorrangestellte Objekte, sondern auch Vererbung/Verschaltelung. Die hast Du ja auch schön gelöst. Aber du hast noch ein <p>-Problem. ; )

Du hast in einen <p>-Absatz ein weiteres "Verschaltelungs/Absatz"-Element genutzt (Ich weiss, hört sich doof an, ist aber schwer zu betiteln). Innerhalb eines <p>-Tags ist kein weiterer <p>-Absatz erlaubt. Auch <div> ist quasi ein Absatz-element, da es am Ende einen Zeilenumbruch verursacht.

Den <div class="links">-Bereich kannst Du also nicht im <p>-Absatz lassen. Schliesse den Absatz vor dem <div>-Bereich und öffne einen Neuen darunter.

Der Validator wird Dir zeigen, was ich meine.[/url]

MartinH

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

bugcatcher

Die Bilder-Elemente sich in Deinem "text"-Bereich, würden sich also höchstens an Elementen innerhalb des "text"-Bereiches orientieren. Das "kasten"-Element ist aber ausserhalb des "text"-Bereiches.

Man beachte die Verschachtelung (haut mich, falls ich was übersehen habe).

MartinH

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.

bugcatcher

Es würde Verschachtelungen unsinnig und überflüssig machen, wenn der Inhalt immernoch an die äusseren Objekte gebunden wäre, meinst Du nicht? Ausserdem ist es mit den Formulierungen immer so eine Sache. Wenn das so einfach wäre, wäre unser Rechts- oder Steuer-system so bescheuert? Alles Auslegungssache. ; )

Wobei Opera und Mozilla annähernt identische Ergebnisse liefern. Und die geben sich beide viel Mühe was w3c-Standards angeht (auch wenn Mozilla besser ist ; ). Und da gerade die Gecko-Entwickler eng mit den Leuten von w3c zusammenarbeiten, gehe ich schon davon aus, dass die Darstellung von Mozilla nahe dem ist, was sich die Leute vom w3c dabei vorgestellt haben.
; )