Welcome to WebmasterWorld Guest from 174.129.127.214

Forum Moderators: not2easy

Message Too Old, No Replies

IE9 CSS Display difference

Div positioning

   
10:43 pm on Oct 3, 2012 (gmt 0)



Hi everyone,

What I'm hoping for is a top nav bar that goes 100% across the width of the page, with a centered, fixed-width body area beneath that. The solution I've created works beautifully in Chrome and Firefox, but not in IE. I've validated both the HTML and CSS, no quirkiness there. The code looks like this:

<div id="strip">
<div id="menu">
...
</div>
</div>
<div id="page">
<div id="header">
</div>
<div id="body">
</div>
<div id="footer">
</div>
</div>

=============

#strip{
position:absolute;
top:0px;
width:100%;
height:40px;
}
#menu{
width:1040px;
margin:0 auto;
}
#page{
width:1040px;
margin:0 auto;
padding-top:40px;
}

Based off what you see there, do you see the reason IE9 pushes the strip div in from the left to wherever the page div starts, then goes whatever width would be 100% (meaning there is a horizontal scrollbar now)? Chrome/FF look like this:

[---------------------------]
[empty] [---------][empty]

IE9 looks like this:

[empty][---------------------------]
[empty][---------][empty]

Thanks for any assistance!
11:04 pm on Oct 3, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Tangential answer: What's the purpose of these three lines?
position:absolute;
top:0px;
width:100%;

The width of a div is always 100% unless you've set it to something else. If it's the first thing in the html, it will go to the top of the page without further instructions. That's assuming your boilerplate has set a 0 top margin for the body (and html, if you want to go belt-and-suspenders).

I've known browsers to be snarky about the "margin: auto" setting, especially in combination with specific numbers, whether em or percent. Technically it should make no difference whatsoever, but see what happens if you say explicitly
{margin-top: 0; margin-right: auto;}

et cetera.
11:14 pm on Oct 3, 2012 (gmt 0)



PERFECTION.

I was hoping it'd be that easy! Thanks!