[css] float probleempje

[megamuch]

Onder firefox rendert onderstaande test pagina prima. Onder IE6 krijg ik het op geen enkele manier voor elkaar om event-date (het oranje vak met daarin de datum) net zo te renderen als onder Firefox.

Test locatie:

http://www.bcn-nightlife.com/a.html

Ik heb al zitten spelen met negative margins op event-date, floats op andere elementen, het toevoegen van vaste heights en widths maar eerlijk gezegd is het meer prutsen en hopen dat het werkt ipv een goeie oplossing kunnen bedenken. Ik heb simpelweg geen idee waarom IE het renderd op deze manier. Te weinig kennis van IE (en css probably ).

Iemand die mij een duwtje in de rug kan geven?

[Blaise]

Kan je de float niet "faken" door .event-date absolute te positioneren en de elementen die dan erachter verdwijnen een margin-left te geven?

Ik zou voortaan proberen zulke ingewikkelde floats te vermijden en bij het ontwerp al rekening te houden met wat er cross-browser technisch mogelijk is.

[ Voor 35% gewijzigd door Blaise op 16-11-2006 19:09 ]

[megamuch]

Blaise schreef op donderdag 16 november 2006 @ 19:05:
Kan je de float niet "faken" door .event-date absolute te positioneren en de elementen die dan erachter verdwijnen een margin-left te geven?

Ik zou voortaan proberen zulke ingewikkelde floats te vermijden en bij het ontwerp al rekening te houden met wat er cross-browser technisch mogelijk is.

Volgens mij is het technisch niet zo moeilijk aangezien opera en firefox het beide gewoon renderen zoals het moet.


Met Position:absolute krijg ik event-date op de juiste plaats, maar kan ik article content geen margin-left geven omdat article-content oa ook de grijze borders heeft, waardoor het hele vak meeschuift. Een extra div toevoegen levert het volgende resultaat op, wat ook niet is wat ik zoek.

http://www.bcn-nightlife.com/b.html
_{in dit voorbeeld heb ik de H1 nog geen margin-left gegeven}

[megamuch]

* Kickje *

Na weer een middag prutsen en googlen en testen nog steeds geen werkend resultaat voor IE 6
Absolute, relative, margin, padding, float left/right, veranderen van volgorde in de divs, allemaal to no avail.

Iemand anders nog heldere ideeën ? * megamuch gaat het design maar aanpassen

[Borizz]

Het heeft te maken met de width die je zet op .article-content, daar gaat het fout. IE plaatst het element onder het element met de datum erin, doordat de breedte groter is dan de ruimte die nog over is. Als je de breedte weghaalt, krijg je echter te maken met een ander probleem, namelijk dat de .article-content geen 100% breed is (terwijl het een toch een block level element is), maar dat hij de ruimte vult die over is.

Kortom, ik denk dat je het op een andere manier op moet lossen, en ik denk dat je dan toch moet denken aan het absoluut positioneren van het datum element.