homepage Welcome to WebmasterWorld Guest from 54.167.179.48
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE9 CSS Display difference
Div positioning
NMalek



 
Msg#: 4503724 posted 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!

 

lucy24

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



 
Msg#: 4503724 posted 11:04 pm on Oct 3, 2012 (gmt 0)

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.

NMalek



 
Msg#: 4503724 posted 11:14 pm on Oct 3, 2012 (gmt 0)

PERFECTION.

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved