PDA

View Full Version : #div shift in IE 7.0



spitfire72
Jan 24th, 2010, 09:14 PM
Hi. Help is needed with our school website I've been helping re-create from scratch.
1. We're about to go live and I just discovered the navbar shifts to the right in IE 7.0:
http://browsershots.org/screenshots/...49303273c9510/

http://www.stonebridgeschool.org/temp/
http://www.stonebridgeschool.org/temp/sbs-styles.css

this is the style, though I'm sure the wrapper is affecting it too:

#navbar2{margin:auto 0; height:auto; width:795px;position:absolute; top:182px; text-align:center;}

this works in other browsers.

Any ideas?
Thanks a million.
Hannah

Excavator
Jan 24th, 2010, 09:59 PM
Hello spitfire72,
Try making these two additions to your CSS -

.splash #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; margin-top:30px;/* this overrides the text-align: center on the body element. */
position: relative;
}

#navbar2{
margin:auto 0;
height:auto;
width:795px;
position:absolute;
top:182px;
left: 0;
text-align:center;
}

spitfire72
Jan 25th, 2010, 06:26 AM
:DThat was easy! Now, what should I learn from this....?

Thanks for helping this little volunteer effort go live in style...

Excavator
Jan 25th, 2010, 06:48 AM
:DThat was easy! Now, what should I learn from this....?

It's the position:relative; that makes it work. Remove it and watch what happens - the menu is relative to the body of the document instead of it's container.