[css]meerdere tegenovergestelde floats in Mozilla

[mpegernie]

Ik ben bezig met wat templates en kom het volgende probleem tegen.
Zodra ik meerdere tegenovergestelde floats gebruik krijg ik problemen in Mozilla/FF en Opera. Moz cleared the linker floats tot de een-na-laatste rightfloat: testcase
IE geeft alles weer zoals de bedoeling is, Opera neemt een middenweg tussen moz's en IE's gedrag.

IE 6, zoals de bedoeling is:

Firefox, Mozilla 1.7.1 zelfde effect:

Opera:


Hier wordt het probleem ook aangekaard, maar als Opera bug zijnde:
Multiple opposing floats Op het screenshotje is idd een vergelijkbaar gedrag in Opera te zien, voeg ik hier echter ook hier een extra rightfloat toe dan gaat ook Mozilla de mist in: test2
(IE geeft overigens bij deze laatste test helemaal een zooitje, maar de test css is ook niet echt schoon)

het probleem met de leftfloats doet zich dus pas voor wanneer er meer dan 1 rightfloat aanwezig is. Kijk ik nu een bepaald float gedrag over het hoofd of is het een bug? En vooral, hoe zou ik het kunnen oplossen

Ik kan in dit geval natuurlijk de linker div's niet laten floaten, maar voor de templates waar ik aan werk heb ik beide floats nodig.

[ Voor 5% gewijzigd door mpegernie op 31-07-2004 19:25 ]

[Verwijderd]

Here are the precise rules that govern the behavior of floats:

1. The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
3. The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements.
4. A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
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.
7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
8. A floating box must be placed as high as possible.
9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

Bron: w3.org

Mozilla en Opera doe het kennelijk volgens de recommendation. Of die recommendation dan voldoet kun je aanvechten. Ik persoonlijk vind het een tekortkoming in CSS2, maar bovengenoemde browsers doen het volgens de regels. Had je ook zelf kunnen opzoeken trouwens.

[ Voor 7% gewijzigd door Verwijderd op 31-07-2004 19:26 ]

[mpegernie]

de float mag dus niet hoger vallen dan eerdere blokken, maar dat zegt toch niet dat hij niet boven de vorige uit mag komen, zoals Mozilla doet? En Operas gedrag is me helemaal onverklaarbaar.


edit: o wacht, dus doordat ik rechts de divs onder elkaar zet, mogen de float links niet hoger komen dan deze, en blijft hij dus op dezelfde hoogte hangen als de laatste rightfloat.

Lijkt mij niet helemaal logisch, door deze w3c vereiste kunnen right en left floats elkaar dus in de weg gaan zitten...

edit2: Cheatah, ja ik snap em nou, maar ik keek eroverheen dat deze regel geldt voor alle floats in een document, en niet per alignment.

[ Voor 61% gewijzigd door mpegernie op 31-07-2004 19:37 ]

[Verwijderd]

mpegernie schreef op 31 juli 2004 @ 19:28:
de float mag dus niet hoger vallen dan eerdere blokken, maar dat zegt toch niet dat hij niet boven de vorige uit mag komen?

Begrijp je zelf wel wat je hier zegt? Wat is er moeilijk aan die regel? Een float mag nooit hoger beginnen dan eerdere floatende elementen. Punt! Dat betekent dat je (links) floatende div's nooit hoger mogen komen te staan dan welk eerder genoemde (rechts) floatende element dan ook.
Opera doet het inderdaad helemaal raar. IE doet het fout volgens de recommendation, Mozilla lijkt het goed te doen.

[mpegernie]

Maargoed, om ff op constructieve wijze verder te gaan, ik kan het dus oplossen door de rightfloats te vervangen door één rightfloatende container met daarin de "oude" rightfloats. Alleen slaat dat semantisch nergens op.

Een andere optie is de linkerfloats in een container te stoppen en daar een display:table op te gooien. Vraag me niet waarom, maar mozilla laat deze w3c regel dan ook achterwege. Dit werkte voor mij aangezien de leftfloats in deze testcase eik listitems zijn (in een list container ziten dus) in de templates waar ik aan werk.

bedankt voor de moeite

[ Voor 42% gewijzigd door mpegernie op 31-07-2004 21:06 ]