Problems with IE 6 Windows Displaying Stylesheet correctly

IE 6 is messing up my layout [?]

[Raybo]

HI all ..

I'm faced with an issue, that is somwhat borrowed from both my pages on two different websites.

I have used this same sheet/setup for the longest time, and had become rather reliant upon using it without fear of something breaking. I've tested it on Safari, FireFox, NetScape 7, IE 5.1, all on Mac, and IE 5 on PC.

Unfortunately, as my link below demonstrates, it breaks under IE 6 under Windows. :(

And ideas what is causing this?

What's happening is the content isn't flushed to the top of the page. You see the right hand nav display fine, and then as you scroll down the page, my content displays right where the right hand content stops.

Here is the style sheet I've been using. I recognize there are a lot of extra tags, but I've used them testing.

#header {
width: 100%;
height: 76px;
background: #ffffff url(images/header_back.png) repeat top left;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
padding-right: 0px
}

#logo {
float: left;
width: 196px;
height: 76px;
background: transparent url(images/ms_header.png) no-repeat top left;
color: #ffffff
}

#subheader {
width: 100%;
height: 18px;
background: #2F44BE url(images/headgraphic.png) repeat top left;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
font-family: "Lucida Grande", Geneva, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none
}

#container {
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 8px;
background: #ffffff
}

#content {
padding: 0px;
padding-right: 0px;
margin-right: 160px;
background : #eeeeee;
}

#sidenav {
float: right;
width: 137px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
background-color: #ffffff
}

#footer {
clear: both;
padding: 5px;
margin-top: 5px;
background: #eeeeee;
border-top: 1px #2F44BE solid
}

#body {
font-family: "Lucida Grande", Geneva, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
background-color: #FFFFFF
}

<div id="header"><div id="logo"></div></div>

<div id="subheader"> horiz nav </div>

<div id="container">

<div id="sidenav"> nav</div>

<div id="content"> content </div>

<div id="footer"> footer stuff </div>

The URL for this is <oops, no personal URLs, thanks. See TOS [webmasterworld.com]>

I hope this is obvious to someone as to what is wrong. I've pulled my hair out trying to sort it out.

Please help!

Thanks in Advance

[edited by: DrDoc at 2:36 pm (utc) on June 18, 2004]

[createErrorMsg]

You might try specifying a width for your #container, and don't forget to close the <div> (in your snippet it doesn't).

Also, try giving the #content and/or #sidenav a position: relative;.