IE7 Display Issues (adding Extra Top Margin)

March 29, 2023 Post a Comment

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 would have the thre

Solution 1:

I do this to every page:

<body>
<!--[if IE]><div class="ie"><![endif]-->

...LALALA

<!--[if IE]></div><![endif]-->
</body>

It's called a conditional comment. It's IE proprietary, but acts like a comment to other browsers and validators.

Now you can specify IE specific rules using .ie ancestor.

get some .ie #whatever{position:relative;} going on and put those boxes where they're supposed to be!

Solution 2:

Not sure but try this out in your CSS do

body
{
    padding:0;
    margin:0;
}

http://www.w3schools.com/css/css_margin.asp http://www.w3schools.com/css/css_padding.asp

alternatively would like to see some code as posted by others.

Solution 3:

use:

display: inline;

Hope this helps.

Solution 4:

Try removing margin-top: from #background and instead add a clear:both or clear:right for #background.

Solution 5:

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.

Html5 Manual