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
You can follow the comments for this article with the RSS 2.0 feed.
Great fix, thanks.
Thanks - made my day.
This fixed my problem. Thanks for the input!
You’re a genius! Thank you for documenting this.
Thanks for the helpful tip!
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…
Thanks for this! This fix also works with a rare double margin bug in IE7 and also in IE6!
[...] Specify the <div> as “display: inline-block” (credit) [...]
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.
Thanks, worked for me. I can’t believe we now have to support two incredibly buggy browsers, and soon to be three!
You are a star, thanks so much for this!!
Thanks, for that one. Bizarre though. Inernet Explorer really is a mystery…
Bravo…thanks for the (nonsensical but functional) fix, which I will be using. Maybe IE8 will see this repaired (fingers crossed).
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.
Content © cafefrenzy.com
Proudly powered by WordPress
Theme designed by The Design Canopy
22 queries.
0.354 seconds.
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.