CSS IE double padding bug

If you are floating elements and attempting to apply a padding to their container, you may notice that Internet Explorer is doubling your padding. So:

This is what you want:

This is what’s happening:

The solution:

PositionIsEverything.net deserves the credit

To solve it, simply apply a display:inline to your floated element:

display:inline;

UPDATE: If this is not possible, applying a zoom will also correct this IE Bug:

zoom:1

Tags:

This entry was posted on Monday, May 28th, 2007 at 8:14 pmand is filed under CSS, General. 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.

2 Responses to “CSS IE double padding bug”

  • Wouter van Vliet Says:
    February 10th, 2009 at 9:08 am

    Thanks for the tip!

    However, displaying inline wasn’t an option for me in this case. Instead, display: inline-block on the container works for me though.

  • alex Says:
    July 12th, 2009 at 6:53 pm

    That’s not a padding problem. That’s a margin problem. However, IE also has a double padding problem that is triggered when adding padding to elements that have the clear property set to something besides ‘none’.

Leave a Reply