Zoffix CSS - IE Hacks

IE Double Margin Bug

Affected browsers: Internet Explorer below 7 on Windows

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

1234567890

Demo

In this demo, when veiwed in IE version below 7, it is clearly seen that "margin-left: 2em;" is doubled to 4em.

The fix for this bug is quite simple. Just add display: inline; to the floated element and things magically work as expected. Since all sane browsers ignore "display: inline" on a floated element this fix does not even need to be put in the IE Conditional Comments.

Fixed demo

1234567890

Demo

We have added "display: inline;" to the previous demo and, as you can see, the double margin issue is gone.

That is all! Happy fixing =).

This page was written by Zoffix Znet. It may be copied, modified, and distributed freely as long as it attributes the original author and maintains the original license. See the license for details. This work is copyright © 2006 Zoffix Znet and is licensed under a Creative Commons Attribution Share-Alike License.