Use Bodhi Linux—It's awesome!

hasLayout.net

Share |

Double Margin Bug

Affected Versions

This bug affects: IE6

Symptoms

Left and right margins are doubled on floated elements.

Date of the Tutorial

Fri Jul 17 03:38:48 2009

Description

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.

Demo

123456789012345678901234567890
test
HTML Code:
<div id="container">
    123456789012345678901234567890 <br>
    <div id="inner">
        test
    </div>
</div>
CSS Code:
#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.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Fri Jul 17 03:43:27 2009

Fixed Versions

all of the affected

Description

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:

123456789012345678901234567890
test
HTML Code:
<div id="container">
    123456789012345678901234567890 <br>
    <div id="inner">
        test
    </div>
</div>
CSS Code:
#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.

Comments

Create new comment

Currently there are no posted comments.

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book:

Support Wikipedia