[CSS]IE6 drukt content weg bij het clearen van afbeelding

[TeeDee]

Voor een nieuw projectje waarbij helaas ook nog IE6 ondersteund moet worden loop ik tegen een irritant probleem aan.

Het beste/snelste kan je denk ik mijn testcase bekijken.

Voor de IE6-loze mensen een verduidelijkend screenshotje:


Het probleem wordt veroorzaakt door de

HTML:

<div style="clear:both;"></div>

boven de .item-footer. Helaas is deze nodig doordat afbeeldingen een float:left moeten hebben. Als ik de clear:both niet erbij zet, dan krijg je dit soort zaken:


Het probleem komt niet terug in Opera 9, FireFox 2, IE7 en Safari. IE5.x wordt niet meer gebruikt voor dit project dus die hoeft gelukkig niet getest te worden.

Door #content absoluut te positioneren krijg ik in eerste instantie wel een aardig resultaat, alleen wordt de width van een item-container niet goed geset. Bij 'te weinig' content, zoals het eerste item, wordt de width net zo groot als de content. Dus, proberen om dat aan de praat te krijgen om #content een n% width te geven. Ook dat gaf niet het gewenste effect.

Mijn box-of-tricks is nu aardig leeg, temeer omdat ik niet weet welke bug in IE6 dit zou kunnen zijn.

[marty]

heb ff snel gekeken en volgens mij wordt die text naar beneden gedrukt door de content van je menu.
maar volgens mij sluit je alles netjes af, dus dat zou niet mogen gebeuren. erg typisch.
als je de content er naast float (maar ik vind de oplossing met de margin-left stukken beter) dan is het waarschijnlijk opgelost.
heb dus geen echte oplossing voor je, maar wellicht kun je er wat mee. als ik later wat tijd over heb en je heb het probleem nog steeds kijk ik er nog wel een keer naar.

[TeeDee]

Je begrijpt het goed. In het 1e screenshotje komt het niet helemaal goed over, maar "Geplaats op" in het eerste item wordt door de content in de linkerkant naar beneden gedrukt.

Ik zal toch nog eens kijken naar float:left/right op #content.
Hmm, dat gaf wel erg rare resultaten.

[ Voor 9% gewijzigd door TeeDee op 12-07-2007 16:04 ]

[Fuzzillogic]

Als ik met de dev-toolbar een blok uit het menu weghaal, dan schuift de content idd terug naar boven. Dus het heeft wel daarmee te maken.

Een oplossing, behalve IE lekker negeren, heb ik vooralsnog niet...

[Boelie-Boelie]

Bug is op PIE te vinden: The IE Escaping Floats Bug

Verder heb je die

HTML:

<div style="clear:both"></div>

niet nodig, floats kun je ook zonder een extra div clearen (bijv. overflow:hidden} en die h6-heading lijkt me ook niet gepast (tenzij je in het origineel ook h3, h4 en h5 als bovenliggende niveaus van die h6 gebruikt).

[TeeDee]

Boelie-Boelie schreef op vrijdag 13 juli 2007 @ 03:18:
Bug is op PIE te vinden: The IE Escaping Floats Bug

Die zal ik eens even bekijken... thanks!

Edit
Hoppa! Boelie-Boelie, helemaal top! Het was inderdaad die bug. Helemaal vergeten om op PIE te kijken/zoeken.

Verder heb je die

HTML:

<div style="clear:both"></div>

niet nodig, floats kun je ook zonder een extra div clearen (bijv. overflow:hidden}

Dat weet ik, maar voor een testcase lijkt het me handig als je je probeersels ook laat zien.

en die h6-heading lijkt me ook niet gepast (tenzij je in het origineel ook h3, h4 en h5 als bovenliggende niveaus van die h6 gebruikt).

Ja.

[ Voor 8% gewijzigd door TeeDee op 13-07-2007 09:16 ]