The double-margin bug occurs in Internet Explorer when a floated element, such as a div, is given a margin on the side where it is floated.

For example, assume that your MediaWiki skin contains the following HTML:

<div id="div-one">
<div id="div-two">
Div two.
</div>
</div>

The highlighted CSS causes some problem in Internet Explorer:

#div-one {
background: #222;
height: 75px;
}
#div-two {
background: #9C0;
height: 50px;
float: left;
margin-left: 10px
width: 300px;
}

Although the colors are just there to show where the two divs are positioned, the float and margin cause problems. In Opera, Firefox, and Safari, this is displayed perfectly:

In Internet Explorer 6, the margin alongside the left of the smaller (green) box is doubled:

Luckily, the fix for this bug is simple. Just add display: inline to the inner div:

#div-two {
background: #9C0;
height: 50px;
display: inline;
float: left;
margin-left: 10px
width: 300px;
}

The inner container is now displayed as follows in Opera, Firefox, and Safari: