Margin NOT Working In Internet Explorer [Archive]

Ntrimgs

05-25-2010, 08:28 PM

I set up the following page with these Div's and styles:

<div id="wrapper">
<div id="top_logo"></div>
<div id="navigation"></div>
<div id="body"></div>
</div>

#wrapper {
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#wrapper #top_logo {
height: 96px;
width: 980px;
background-image: url(../members/graphics/members_toplogo.png);
background-repeat: no-repeat;
background-position: left top;
position: absolute;
margin-top: 1px;
}

#wrapper #navigation {
height: 45px;
width: 800px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/members_nav.png);
background-repeat: no-repeat;
background-position: left top;
position: absolute;
top: 115px;
left: 85px;
}
#wrapper #body {
width: 800px;
margin-right: auto;
margin-left: auto;
margin-top: 200px;
}

The problem is that the margin of 200px on the body isn't being noticed in IE. Instead of coming down it stays right at the top near the edge of the screen. In Firefox and Chrome it looks fine. Any ideas?

tirna

05-25-2010, 08:50 PM

css position takes the element out of the normal page flow.

Without running your code I'm not sure what the exact problem is but I suspect that because #body has no css position and #navigation does might be resulting in different browsers doing things differently.

I would try some or all of the following:

1) remove all css postion, top etc styles from the 3 child

2) give each of the 3 child divs (and not just some of them) a position: absolute and respective top, left etc styles

3) I wouldn't use 'body' as an id in case there is a conflict in some browsers with the <body> element. Maybe change 'body' to 'content' or something similar.

btw - which version of IE did you test your code in?