CSS Double padding IE7 Fix
Nothing is more annoying than finishing a web design, having it dispay just the way you like it in your standards compliant browser (*cough* get Firefox) only to remember to check it in IE and find it a garbled mess. Today I came across a rather annoying CSS bug in IE7. IE7 doubles the top padding on my link bar.
CSS Code
#quicklinks {
clear: left;
color: #fff;
font-size: 0.8em;
padding: 16px 0 0 30px;
}
Here’s what it looks like:
And the fix…
Just add display: inline-block in your div. That’s it… I know, it’s ridiculous.
*UPDATE* If you want a more detailed explanation of the issue, go to: Position is Everything
doglover, 
Reini and 28 others are discussing.
Andrew 11:50 am on April 8, 2007 Permalink
Thanks for this – had been puzzling (& annoying) me too. I set the footer div (beneath content & sidebar divs) to inline-block, which was fine in IE and Fx, but Opera then shrunk the footer width to fit and Safari ignored my clear: both. Neither of which was good. So sticking this in a conditional comment may be safer.
Mick Byrne 6:11 pm on April 25, 2007 Permalink
Great fix, thanks.
Jörg Butzer 9:28 am on May 10, 2007 Permalink
Thanks – made my day.
Jared 3:11 pm on November 21, 2007 Permalink
This fixed my problem. Thanks for the input!
Vicky 5:27 am on February 22, 2008 Permalink
You’re a genius! Thank you for documenting this.
PatrickB 6:51 pm on February 26, 2008 Permalink
Thanks for the helpful tip!
Erick S. 12:49 pm on March 20, 2008 Permalink
Doesn’t seem to work…In IE6 and IE7 it doesn’t look the way I want to. So in the stylesheet I used the underscore hack, like follows:
padding-top:122px;
_padding-top:128px;
Now it looks oke in IE6 and Firefox, IE7 shows ‘less’ padding.
So hopefully I added the:
display: inline-block
like mentioned here…But nothing seems to change?!
Also when I remove the underscore hack…
Juani 11:31 am on March 25, 2008 Permalink
Thanks for this! This fix also works with a rare double margin bug in IE7 and also in IE6!
IE7 CSS Bug: Adding ‘padding-top’ Value Twice at chriskarcher.net 7:09 am on April 2, 2008 Permalink
[...] Specify the <div> as “display: inline-block” (credit) [...]
Pushtoon 7:36 am on April 22, 2008 Permalink
this fix is not working for me
I tried to add it in the css file and the html as well in the div tag, but no go.
Does it work for layers which are nested within another layer which is centralised on the page.
Ian 3:56 pm on May 19, 2008 Permalink
Thanks, worked for me. I can’t believe we now have to support two incredibly buggy browsers, and soon to be three!
Julia 1:55 am on May 30, 2008 Permalink
You are a star, thanks so much for this!!
barry 4:17 pm on May 31, 2008 Permalink
Thanks, for that one. Bizarre though. Inernet Explorer really is a mystery…
hotshot309 12:52 am on June 7, 2008 Permalink
Bravo…thanks for the (nonsensical but functional) fix, which I will be using. Maybe IE8 will see this repaired (fingers crossed).
iHATEsushi 6:26 am on June 10, 2008 Permalink
I’ve got a double padding issue.
I am building a CSS template with classes outside of tables.
It displays fine in Firefox, but breaks in Explorer 7.
I am using a spacer to separate the three banners because when I used padding the changes were so drastic in Explorer.
So now using the spacers, it displays fine in Firefox, however even with the padding removed, it is bumping the 2nd banner below 20px instead of 10px.
Any suggestions.
cappelmans 5:30 am on September 27, 2008 Permalink
Problem solved! Thanks alot!
Mykal 10:55 pm on October 30, 2008 Permalink
This doesn’t work for me for some reason.
Lee 2:56 pm on January 21, 2009 Permalink
Thanks for posting!
denise 3:39 pm on February 3, 2009 Permalink
Thanks for this tip. Worked a treat!
Dmitry Pljonkin 3:42 pm on March 31, 2009 Permalink
Thanks fot tip, it was really helpful!
BTW. Dudes! Don’t forget about conditional comments :)
Sometimes applying this fix directly could mess your layout in modern browsers (for example when your “clearer” is not floated).
some guy 3:19 pm on August 3, 2009 Permalink
+1 from me. It really helped, thank you.
WEBRTV 8:34 am on September 11, 2009 Permalink
Thanks its work
Jonathan Mooney 3:29 pm on September 22, 2009 Permalink
Dude u are a complete star!!!
Optimizacion Web 8:58 pm on October 31, 2009 Permalink
okss, i’m searching it! thank you very much!
Farzan 12:45 am on November 21, 2009 Permalink
Thanks!
I had the problem with a padded which used to overlap with its preceding text.
Ypus 1:54 pm on December 1, 2009 Permalink
Thanks man, needed this very much!
Nacho Pascual 6:27 am on December 9, 2009 Permalink
Have you tried:
height:1%;
in your double padded element?
;D
Nacho Pascual 6:32 am on December 9, 2009 Permalink
gl http://www.webtoolkit.info/css-clearfix.html
Pradnya 12:31 am on February 26, 2010 Permalink
Here’s a solution:
padding-top: 25px; //Firefox, Most browsers
!padding-top: 16px; //IE7
_padding-top: 20px; //IE6
The last 2 comments only work in IE.
With these ! or _ declarations, you can change the height, width, padding, any CSS for IE7 and IE6, and it won’t affect Firefox/most browsers.
Reini 12:35 pm on June 22, 2010 Permalink
Thanks!!! I love you or that tip!!!!
onezeros 2:01 pm on July 3, 2010 Permalink
how ’bout with this;
width:100% —> place in ul li class for ie
i use this and fix the problem
doglover 10:49 am on July 28, 2010 Permalink
Thanks Pradnya! That is the only thing I could find that worked for me.