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* download 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 navigation menu.

CSS Code
#nav {
clear: left;
padding: 16px 0 0 30px;
}

And the fix…

Just add display: inline-block to the div with double padding. That’s it… I know, it’s ridiculous.

#nav {
clear: left;
display: inline-block;
padding: 16px 0 0 30px;
}

*UPDATE* If you want a more detailed explanation of the issue, go to: Position is Everything

*UPDATE 2*There are some scenarios where this might not be the best solution. Read through the comments below if you run into any issues.