Sunday, May 13, 2007

CSS fix for IE6 Double Margin Bug

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 Source: goarticles.com

1 comment:

Outsourcing website designers bangalore said...

Just want to say your article is astounding. The clarity in your post is simply spectacular and i can assume you are an expert on this field. Well with your permission allow me to grab your rss feed to keep up to date with incoming post. Thanks a million and please keep up the fabulous work.offshore web designer | outsource portal