Diagnosis
- Affected browsers:
- All versions of Internet Explorer below version 7.
- Visual appearance:
- Left and right margins are doubled on floated elements.
- Triggers:
- Float on element with margins.
CSS float property is used a lot by web developers. Not only it allows the content to flow around the floated element, but also provides means of positioning in many instances, in which case it is often useful to specify some kind of a margin. IE developers for some reason thought that it would be a good idea to double that margin, therefore this bug is called a "Double Margin Bug". An example of this bug is presented in the following demo.
<div id="container">
123456789012345678901234567890 <br>
<div id="inner">
test
</div>
</div>#container
{
overflow: hidden; /* contain float - irrelevant to the bug */
}
#inner
{
float: left;
margin-left: 2em;
}In this demo we have used both float and margin-left on #inner which is exactly what we need to trigger Double Margin bug.
Depending on your font #inner's left edge will be around numbers 4 or 5 in all the sane browsers and IE version 7. In IE versions below 7 ( tested in IE 5, 5.5 and 6 ) left edge will be around number 9 or 0 which indicates that our margin was doubled.
Same would happen if you'd set right margin on a floated element. It doesn't matter if you use margin-left or a shorthand, margin to set the margin.
All of the affected.
The fix is very simple and clean. All you need to add is display: inline to the element that is affected by Double Margin bug. Here is our original demo with the fix applied to it:
<div id="container">
123456789012345678901234567890 <br>
<div id="inner">
test
</div>
</div>#container
{
overflow: hidden; /* contain float - irrelevant to the bug */
}
#inner
{
float: left;
margin-left: 2em;
display: inline;
}Not much different from the original demo, however the bug does not appear anymore. Adding display: inline fixes the bug and safe to use in your main style sheet since it is ignored on floated elements by all standards compliant browsers. If you still feel dirty using it like this, feel free to apply it with conditional comments.
Use what is right for you: "Browse Happy - Online. Worry Free. Switch today!"
Don't use it unless you understand it. Please take some time to read these articles: