Fixing the 3 Pixel Padding Bug in IE

 

There are lots of fixes and hacks out there to stop the famous IE three pixel padding bug; what happens is when you have a floated div IE adds extra padding to the div next to it. It's very annoying when you're trying to get a layout spot on.

I've tried many fixes ranging from setting the float div to display: inline; (which didn't work) and trying to browser sniff to serving a different style sheet to IE browser (which I resent doing).

I found this trick that worked perfectly however. If you use a child selector you can serve a style that IE will use and another all the others will use. Let say you have divs, left and right, and the right div should have a 500px left margin; your CSS might look like this:

    div#right {

        margin-left: 497px;
        width: 475px;

    }

    div#container > div#right {

        margin-left: 500px;

    }

Here the width is set at 3 pixels less then overriden to the correct value via the child selector. It all renders correctly though as IE ignores the child selector.

No comments.