Gary Owen

CSS fix for IE6 Double Margin Bug

Here’s a handy tip for anyone who, like me, has lost sleep over the bugs found in Internet Explorer.

When most web developers have nightmares, they usually consist of some scenario or other involving Internet Explorer.  Even with the release of IE7, Microsoft still hasn’t produced a standards compliant browser, but hey, it’s a step in the right direction and for that we are truly grateful Mr Gates.

One of the more common bugs found in Internet Explorer is the dreaded ‘double-margin’, which IE6 (and earlier) would apply to a floated element. The problem will only occur when the margin and float are in the same direction. That is, a left margin is applied to a left floated element or a right margin is applied to a right floated element.

If for example a 10px left margin is applied to a left floated element, IE6 will double it to . . . yes you’ve guessed it, 20px.

Luckily, there is a simple solution to this problem (well it’s simple when you know how to do it). To ensure that IE6 displays the correct margin value just add  - display: inline;  to the CSS style of the floated element. Doing so will not change anything other than fix the IE6 bug because floated elements are always block level elements, and changing the display property to inline won’t change that.

Even though this won’t adversely affect other browsers it would be good practice to keep any IE specific fixes in a separate style sheet or put it in an IE only style using the handy * html hack which would appear like so:

*html #sidebar { display: inline; }

Article Tags: Floated Element

Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR