Fixing the IE Double Margin Bug

As is typical of Internet Explorer the simplest of styleseet commands is not handled properly and IE displays your content in a way different from that which you intend and which you actually get in other browsers.

The double margin bug occurs when you float an element in your page and also give that element a margin. Internet Explorer will for reasons of its own, double the size of the margin which is applied on the side of that element corresponding to the direction in which the element is floated. What this means is that if you have float:left then the width of the left margin is doubled. If you have float:right then the width of the right margin is doubled. All other browsers don't double the margin width and so we end up with a different appearance in IE to what we get in other browsers.

Fortunately there is a simple fix for this. All we need to do is to add display:inline to the element and IE will no longer double the width of the margin. This property has no effect on any other browser and so enables us to correct this bug in IE without requiring any hacks or tests for specific browsers.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow