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!
