CSS div verspringt in IE6

[Verwijderd]

http://www.cafededoofpot.com/final/

Het gata dus om deze site. In IE6 komt de #contentright onderaan de staan ipv netjes naast de #contentleft. Weet niet waar het mee te maken heeft, vast iets met de paddings of margins of misschien wel met de breedte van de headers, maar ben na een uur zoeken er nog niet achter gekomen.

Vorige keer had ik hetzelfde probleem met drie kolommen, de oplossing van toen werkt helaas niet op deze!

Iemand misshien een idee?

Alvast bedankt!

Rudolf Bos

[Verwijderd]

Ik zit hier op school zonder mijn fijne webdeveloper plugin van FF dus ik ga een beetje gissen.

De div in kwestie is floating, je hebt margins en paddings bovenop je breedte gegeven. De totale breedte van je div = margin + padding + border + breedte. Ik ga ervan uit dat dit allemaal pixel perfect is en goed is uitgerekend.

Nu is het zo dat IE6 het box-model verkeerd implementeerd en alle margins dubbel telt! probeer eens display: inline aan de div toe te kennen? Iedere andere browser negeerd dit behalve IE6 die dan wel in een keer de margins 1x implementeerd.

hoop dat het helpt, anders zul je meer moeten vertellen.

[ Voor 8% gewijzigd door Verwijderd op 12-06-2007 14:36 ]

[Verwijderd]

als je de rechter div rechts float kan je mooi zien dat het idd niet past, er is overlap tussen de divs, dus je zult de afmetingen moeten aanpassen

overigens heb je in zowel links als rechts een border staan, die links kan je weglaten, scheelt weer een pixel rij

[Verwijderd]

Idd, die ene border kan weg, thx j.ostie!

Maar dan nog, IE6 rekent over de breedte 30 px meer dan IE7 of FF2 doen. Ik heb nu dit gedaan:

#contentleft {
float: left;
width: 157px;
padding-right: 15px; (was 45px)
}

Nu komen beide kolommen netjes naast elkaar maar is er een duidelijk verschil te zien in marges in beide browsers. IE6 neemt om één of andere reden zomaar 30px meer margin. Maar ik zou niet weten waar.

[Michali]

Volgens mij komt dat door de padding-left op content-right. In Mozilla heeft dat geen effect, omdat content-right helemaal onder content-left loopt. In IE6 zet hij hem er standaard tegenaan, waardoor die padding wel effect op de content heeft. Ik weet niet zeker of het hier aan ligt, maar ik verwacht het wel. Overigens is het inderdaad goed om notie van de double margin bug te nemen, als je nog niet weet wat het is. Het kan je in de toekomst wat tijd besparen. Volgens mij komt hij hier niet voor, niet in dit probleem althans.

[Verwijderd]

Bedankt voor de reacties mensen maar ben er uit! Er was een probleem met de overflow in IE6. De code is nu zo:

#container {
margin: 0 auto;
width: 760px;
overflow: hidden;
}

#contentleft {
float: left;
width: 157px;
padding-right: 45px;
overflow: hidden;
}

#contentright {
float: left;
width: 527px;
border-left: 1px solid #333;
padding-left: 30px;
margin-bottom: -39px;
overflow: hidden;
}

Alle drie de elementen moesten dus 'overflow: hidden' hebben.

Bedankt voor jullie inbreng!