[IE6/7] CSS float boxes clear op volgende "regel"

[Flowmo]

Ik heb een probleem met IE6/7. De situatie is als volgt:

• Ik heb een lijst met divs welke allemaal float:left hebben
• Elk 4n+1 item krijgt serverside een extra class met clear:left toegewezen zodat er om de 4 items een nieuwe "regel" ontstaat
• In Firefox, Chrome, Safari, IE8 etc werkt dit prima, behalve in IE6 en 7
• In IE6 en 7 gaan de divs met float:left naar de clear:left niet op dezelfde hoogte verder, maar doen alsof er nergens een clear:left heeft gestaan. In feite floaten ze dus verder na het 4n item.

Zie ook deze jsfiddle: http://jsfiddle.net/uTQmb/3/.

Iemand een idee hoe ik de divs naar de cleared div op hetzelfde "niveau" kan laten floaten zonder extra markup? Ik weet dat een clear div ertussen werkt, maar vroeg me af of het ook puur met CSS kan.

[ Voor 7% gewijzigd door Flowmo op 24-08-2011 11:49 ]

[RobIII]

Zet er eens een wrapper omheen welke een breedte heeft van 4 items? Een screenshot van wat er precies gebeurt is wellicht ook handig, ik heb hier geen IE6/7 bij de hand.

Misschien dat je hier iets aan hebt.

[ Voor 22% gewijzigd door RobIII op 24-08-2011 11:59 ]

[Flowmo]

Heb er nu een wrapper omheen gezet:
http://jsfiddle.net/uTQmb/27/

Hierbij float er nog een item van na de clear box tegen de "high" box aan in IE6/7.

IE8/9 met compat mode op IE7 laat het probleem ook zien

Goed:


Fout:

[ Voor 28% gewijzigd door Flowmo op 24-08-2011 12:07 ]

[Luuk1983]

Volgens mij is de beste oplossing om er een extra div tussen de plaatsen met alleen de div clear, dat werkt altijd:

HTML:

<div class="box"></div>
<div class="box"></div>
<div class="box high"></div>
<div class="box"></div>
<div class="clear"></div>
<div class="box"></div>
<div class="box green"></div>
<div class="box green"></div>
<div class="box green"></div>
<div class="box green"></div>
<div class="box green"></div>

IE7 vern**kt het clearen van floats blijkbaar als de div zelf gefloat is. Ik heb niks anders kunnen vinden wat werkt ben ik bang...

[Flowmo]

Dat dat zou werken weet ik ja, maar mijn vraag was of het puur met CSS zou kunnen. Ik heb zo'n vermoeden van niet zodat we alsnog dan aanpassingen aan de gegenereerde markup moeten gaan doorvoeren...

[q-enf0rcer.1]

Misschien dat een andere display value werkt? http://www3.w3schools.com/cssref/pr_class_display.asp

[Luuk1983]

Ik heb een hoop dingen geprobeerd, maar ik zie echt geen mogelijkheid. Overal komt op internet naar voren hoe idioot het floating systeem van IE7 is. Ik ben dus helaas bang dat je je gegenereerde markup moet aanpassen

Waarom supporten jullie overigens ook nog IE6? Ik vind IE7 als dubieus om nog te supporten, maar IE6 is helemaal antiek.

Edit: je zou misschien nog met een javascript achter elementen met een 'clear' class een div kunnen invoegen met een clear:both. Maar dat zou ik alleen doen als het aanpassen van het renderen van de content erg moeilijk te doen is en dan ook alleen voor IE6/IE7.

[ Voor 27% gewijzigd door Luuk1983 op 24-08-2011 12:40 ]

[OkkE]

Wat het niet zo dat IE6/7 alleen float: both; goed doet? Ik denk dat je inderdaad moet doen wat RobIII zegt.

http://jsfiddle.net/okke/uTQmb/65/

[Luuk1983]

OkkE schreef op woensdag 24 augustus 2011 @ 12:42:
Wat het niet zo dat IE6/7 alleen float: both; goed doet? Ik denk dat je inderdaad moet doen wat RobIII zegt.

http://jsfiddle.net/okke/uTQmb/65/

Nee helaas niet Geloof me, ik heb een hoop dingen geprobeerd! Zo is het vaak zo dat je IE7 problemen oplost door bijvoorbeeld expliciet breedtes en hoogtes op te geven en expliect position:relative te gebruiken. Maar ook dat werkt allemaal niet.

[OkkE]

Luuk1983 schreef op woensdag 24 augustus 2011 @ 12:47:
[...]

Nee helaas niet Geloof me, ik heb een hoop dingen geprobeerd! Zo is het vaak zo dat je IE7 problemen oplost door bijvoorbeeld expliciet breedtes en hoogtes op te geven en expliect position:relative te gebruiken. Maar ook dat werkt allemaal niet.

Ik ken de ergernissen als front-end developer.

Volgens mij snapt IE6/7 de clear:left en clear:right niet, dus moet je wel met een extra element per rij werken. Of je moet speciaal voor IE6/7 met conditional comments of javascript aan de gang willen.

Ik snap de drang van "zo min mogelijk extra markup", die heb ik zelf ook. Maar in dit soort gevallen, als je perse zo'n antieke browser moet ondersteunen, is het vaak beter wel wat extra markup te gebruiken. Hacks en heel veel uitzonderingen gebruiken levert een veel moeilijker te onderhouden website op.

[R4gnax]

Oplossing is simpel: geen floated elementen gebruiken. Gebruik inline-block elementen en elimineer tussenliggende white-space door line-height en letter-spacing te gebruiken.

http://jsfiddle.net/6jzz3/1/

[leo-nard]

R4gnax schreef op woensdag 24 augustus 2011 @ 12:59:
Oplossing is simpel: geen floated elementen gebruiken. Gebruik inline-block elementen en elimineer tussenliggende white-space door line-height en letter-spacing te gebruiken.

http://jsfiddle.net/6jzz3/1/

Juist! Goed om er bij te vermelden dat IE6 en IE7 het display type 'inline-block' niet ondersteunen, maar display: inline + zoom: 1 (triggered hasLayout) het zelfde resultaat oplevert.

[Flowmo]

R4gnax schreef op woensdag 24 augustus 2011 @ 12:59:
Oplossing is simpel: geen floated elementen gebruiken. Gebruik inline-block elementen en elimineer tussenliggende white-space door line-height en letter-spacing te gebruiken.

http://jsfiddle.net/6jzz3/1/

Thx! Dit zou idd een valide oplossing kunnen zijn, zelf nog niet aan gedacht. Zal het straks proberen of het werkt.

Op de vraag waarom we nog IE6 ondersteunen is omdat het voor de klant een specifieke eis was bij dit project. Normaal ondersteunen we ook alleen vanaf IE7+. En IE7 heeft wat dat betreft nog voldoende marktaandeel om het te ondersteunen. IE6 is gelukkig al een aflopend verhaal.

[Luuk1983]

R4gnax schreef op woensdag 24 augustus 2011 @ 12:59:
Oplossing is simpel: geen floated elementen gebruiken. Gebruik inline-block elementen en elimineer tussenliggende white-space door line-height en letter-spacing te gebruiken.

http://jsfiddle.net/6jzz3/1/

Maar dan moet je nog steeds een container toevoegen met een vaste breedte, dus dat betekent automatisch dat alsnog de gerenderde content aangepast moet worden. En als je de gerenderde content toch gaat aanpassen, dan zou ik gaan voor een container met een bepaalde breedte en floating elementen.

[Flowmo]

Luuk1983 schreef op woensdag 24 augustus 2011 @ 13:47:
[...]

Maar dan moet je nog steeds een container toevoegen met een vaste breedte, dus dat betekent automatisch dat alsnog de gerenderde content aangepast moet worden. En als je de gerenderde content toch gaat aanpassen, dan zou ik gaan voor een container met een bepaalde breedte en floating elementen.

Er zit al een container omheen met een vaste breedte, dus dat is het punt niet. Punt is wel dat floating elementen dus niet werken.