CSS fix for IE6 Double Margin Bug


by Gary Owen - Date: 2007-05-11 - Word Count: 253 Share This!

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; }

Source: Free Articles from ArticlesFactory.com


Related Tags: css, for, margin, fix, double, bug, ie6

Gary Owen is the Technical Director at Red e Creations, a Gold Coast Web Design company based in Queensland, Australia. Your Article Search Directory : Find in Articles

© The article above is copyrighted by it's author. You're allowed to distribute this work according to the Creative Commons Attribution-NoDerivs license.
 

Recent articles in this category:



Most viewed articles in this category: