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
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.
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’.
November 7th, 2010 at 4:02 pm
display: inline-block works for my search box. Thank you.
December 28th, 2010 at 2:06 am
You saved me. It works for me. Thanks.
May 4th, 2011 at 9:25 pm
I wish something as simple as this worked but it just doesn’t I’m afraid.
May 5th, 2011 at 7:17 am
Webbrewers,
Have you tried both solutions listed above? Can you describe your issue in a little more detail?