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.