John Kavanagh : Indie Web Developer

The double-margin bug in IE6 is one of those inexplicable behaviours of the aged browser that nobody quite understands: the developers claimed to be following the W3C’s CSS standards with IE6’s rendering, but sometimes this can almost be forgiven: the rules and guidelines are written down in such a verbose and brain-shattering verse that it’s very easy to see where people would perceive different outcomes when reading the same thing.

However, the double-margin bug is a totally different animal, and one I’ve become so used to working around that it’s become totally second nature. It was only on a recent trip to eBay.co.uk from my test environment (everybody needs to take five minutes away from coding to check their auctions!) that I noticed that their new interface had been so elaborately coded and quickly released that their developers had fallen for the oldest trick in the book.

Fortunately this bug is very easy to spot and just as easy to correct.

The IE6 Double-Margins Bug:
Where you float an element to either side, if you include margin on the same side as the float, the margin will double up.

1
2
3
4
5
6
7
8
9
10
11

#left{
    width: 200px;
    float: right;
    margin: 0 10px;
}
 
#right{
    width: 720px;
    float: right;
    margin: 0px 10px;
}

In the example code above, you would expect to see two elements floating side by side with 10px of margin on their outer sides and a combined 20px between them, which would be perfect in a 960px wide layout were it not for IE6. In IE6 you will see two elements, both with 20px of margin on their outer side and as a result, pushed too close together in the middle: the latter div will sit beneath the other rather than side by side (which is what I’ve captured in the screen shot above from eBay’s UK homepage).

Fortunately, there is an incredibly simple fix to this: display: inline. Although in theory floats and inline display should be used exclusively of one another (floats are, after all, the better option), in the case of IE6 adding this property to your CSS removes the double margining bug and puts your divs right back where they should be:

1
2
3
4
5
6
7
8
9
10
11
12
13

#left{
    width: 200px;
    float: right;
    margin: 0 10px;
    display: inline;
}
 
#right{
    width: 720px;
    float: right;
    margin: 0px 10px;
    display: inline;
}

I’ve come across this so many times that I generally add the inline display property as standard (although of course what you should really do is add padding to the inside of the div and wrap the contents in another to get the same positioning). Now if only eBay’s developers would learn the same…

click here to see if eBay’s home page is fixed yet