[Solved] IE Layout problem

I must be doing something wrong because I cannot get my CSS rollover menu to position correctly in IE6. In any standards compliant browser the template looks perfect, even in IE7...but not IE6

Visit my blog in a standards compliant browser to see what my design SHOULD look like...

www.elitistsnob.com

Do the same in IE6 and you'll see what is wrong.

Here is a graphical representation of the column layout of the template...

Here is the HTML portion of the code in question....

And here is the CSS code for both the Header tag as well as the Menu CSS code which generates the CSS-based image rollovers..

#header{ position:relative; height:128px; max-height: 128px; background-image: url(images/template/snob/header_bkg.jpg); padding: 0px 0px 0px 0px; color:#3f3f3f; min-width:965px; width:100%; }

/*********** #Menu code ***********/
#menubar { background:url("/images/template/snob/menubar.jpg") ;}

#menu ul { background:url(images/template/snob/menubar.jpg) no-repeat; padding: 0; margin-left: 450px; margin-top: -38px; height: 38px; }

/* CSS Rollovers */

#navlist li
{
float: left;
display: inline;
list-style-type: none;
padding: 0px;
margin: 0px;
height: 38px;

}

#home{
height: 38px;
width: 78px;
text-indent: 0px;
overflow: hidden;
background: url(images/template/snob/blog.jpg) top left no-repeat;
display: block;

}

#home:hover{
background-position: bottom left;
text-decoration: none;

}

#articles{
height: 38px;
width: 95px;
text-indent: 0px;
overflow: hidden;
background: url(images/template/snob/articles.jpg) top left no-repeat;
display: block;
}

#articles:hover{
background-position: bottom left;
text-decoration: none;

Can someone tell me what exactly I'm doing wrong, and what measures I must take to resolve the problem?

Thanks!