Double margin in IE6

When an element is floated and also has a margin set IE6 likes to double that margin. This happens when the element is floated left and has a left margin or floated right and has a right margin. Luckily this is one of the easier Internet Explorer bugs to fix; you can even do it without any hacks.

Simply set the misbehaving element to display:inline; and it will start behaving as expected.

What about when you need a different mode of diplay, for example display:none;? In this case you’ll have to use a hack like so:


margin-left:20px;
_margin-left:10px;


The _ is so that only IE6 picks it up. In this example all browsers set the element’s left margin to 20px while IE sets it to 10px and then doubles it (20px).