IE7 display issues (adding extra top margin)

Question

I am having a really tough time figuring out why IE7 adds extra padding to the this page!

This is what IE7 is doing: http://imgur.com/lwyRI.png

The correct page

Answer 1

Generally speaking, especially for IE7, but for better practice anyway, always specify all sides w/padding or margin...in other words don't just use margin-top:?px (? for whatever) and assume the rest is fine. Better to use margin:?px 0 0 0 or whatever values.

Another general idea, especially with IE 7 and below is to not use margin and padding on the same element.

Also, anything floated needs a width and as to the double-margin bug, it only occurs when you have margin on the same side as the side the element is floated.....so if you're declaring float:right on something, you don't want to have margin: 0 20px 0 0 on the same thing... it will get doubled. Better to use padding on the containing element.