I thought I should share with you a little bug fix within Internet Explorer 6 that certainly would have had some of you pulling your hair out before now. I am of course talking about a situation where you have a floating element within IE6 that magically gains extra padding or margin without setting it.

The problem occurs when you float an element such as a div within your page with padding or margin. IE6 sees it and decides it has a passion for a fatty (no pun intended) and waves its magical MS wand. The MS spell makes the element expand with “double” the padding you wanted on it.

So what can we do to fix the issue? Well…. This is going to be a long long long exercise so I would seriously consider eating a kebab whilst doing the fix!! Got your kebab? Ok lets go..

add the following to the css of the element you are having an issue with.

display: inline;

That’s it…You are done. You still have the kebab right? not eaten any yet? Send it to me through my comments box.. Go ahead i don’t bite

P.S: If you really need your element to be a block element rather than inline you can do the following hack within your stylesheet.

this example is if you have 20px margin on the element.

margin-left: 20px;  /* Other Browsers */
margin-right: 20px; /* Other Browsers */
_margin-left: 10px; /* IE6 */
_margin-right: 10px; /* IE6 */

The underscore is only seen by IE6 and will basically give it beer goggles.

Tags: Bug, CSS, Fix, IE6, IE7, Internet Explorer 6, XHTML

This entry was posted on Wednesday, February 11th, 2009 at 8:34 am and is filed under Design, CSS & Xhtml. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.