Velen zullen er wel al mee geworsteld hebben, het probleem dat Internet Explorer meer marge geeft dan FireFox of Opera.
Dit is te wijten aan een bug in IE, de Double Margin Bug, en er bestaan verschillende oplossingen voor.

De eerste is een hack, wat eigenlijk zou moeten worden vermeden, de tweede oplossing is verleden tijd, daar Opera 8 de “Be Nice To Opera” regel niet meer ondersteund, dus moest er een laatste defenitieve oplossing komen.

Hoe je het probleem kan omzeilen.

Op het forum werd eens ooit een oplossing gezocht voor het dubbele marge probleem van Internet Explorer, dit is toen opgelost met de box-model-hack. Zoals de naam reeds zegt “hack”, en er wordt juist aangeraden zo weinig mogelijk (zelfs geen) hacks te gebruiken, dus moest er een andere oplossing voor komen.

De volgende mogelijke oplossing zou de Be Nice To Opera regel toe te voegen zijn die raar maar waar ook van toepassing is op Mozilla (FireFox), maar die na de komst van Opera 8 niet meer van toepassing is, dus moest er een nieuwe oplossing komen, en die is er.

Het probleem

Wat is die double margin bug eigenlijk?

Het probleem kan optreden als je een div met float: left binnenin een andere div plaats en daarbij de float: left-div met margin-left een spatie van de linker kant wilt meegeven.

De code

Onderstaandstaand voorbeeld kan je via css zo verwezenlijken:

<div class="container">
<div class="floatdiv"> </div>
</div>

.container {
width: 100%;
border: 2px solid;
}
.floatdiv {
float: left;
width: 115px;
height: 125px;
margin: 10px 0 10px 100px;
}

Een grafisch voorbeeld

Double margin bug correct

Maar nu komt het

Zoals bovenstaande afbeelding ziet het eruit met Opera en Mozilla (FireFox), maar als je de het met IE zou bekijken zal je dit zien:

IE double margin

De oplossing

De oplossing zit erin om display: inline toe te voegen, andere (betere) browser zullen deze regel niet toepassen omdat bij een float: left of float: right het element automatisch een block-element wordt (tenzij eigenschap display: none), om het even welk element.
Bij IE gebeurd dat ook, maar deze voegt 100 px toe aan het element en 100px aan hetzelfde element nog eens omdat het nu van element-eigeschap is verandert, dit verklaard de dubbele waarde, door nu display: inline wordt dit opgeheven.

Correcte code

.floatdiv {
float: left;
width: 115px;
height: 125px;
margin: 10px 0 10px 100px;
display: inline;
}