After a week of digging around online, I give up. I'm still really new at coding, and can't seem to get my CSS-only menu to render correctly in IE.

Is this just an issue of weird floats, or do I need to include the whatever:hover or a conditional javascript?

Any advice GREATLY appreciated. Hero status will be awarded. :)

http://www.emkspace.com/client/

HTML part:

<div id="container">
  
  
 <div id="header"><img src="[URL="http://www.webmaster-talk.com/view-source:http://www.emkspace.com/client/images/header.jpg"]images/header.jpg[/URL]" width="870" height="121" alt="carolen gray salon" /></div>
 
 <div id="headermenu">
  <ul class="menu">
    <li class="home"><a href="[URL="http://www.webmaster-talk.com/view-source:http://www.emkspace.com/client/index.htm"]index.htm[/URL]">home</a></li>  <!-- HOME button here -->
    <li class="services"><a href="[URL="http://www.webmaster-talk.com/view-source:http://www.emkspace.com/client/services.html"]services.html[/URL]">services</a></li> <!-- SERVICES button here -->
    <li class="about"><a href="[URL="http://www.webmaster-talk.com/view-source:http://www.emkspace.com/client/about.html"]about.html[/URL]">about</a></li> <!-- ABOUT button here -->
    <li class="location"><a href="[URL="http://www.webmaster-talk.com/view-source:http://www.emkspace.com/client/location.html"]location.html[/URL]">location</a></li> <!-- LOCATION button here -->
    <li class="social"><a href="[URL="http://www.webmaster-talk.com/view-source:http://www.emkspace.com/client/social.html"]social.html[/URL]">social</a></li>
    <li class="contact"><a href="[URL="http://www.webmaster-talk.com/view-source:http://www.emkspace.com/client/contact.html"]contact.html[/URL]">contact</a></li>
</ul></div>
  
<div id="breadCrumb">
<!--
breadcrumbs();
 -->
</script>


</div>

CSS part:

body  {
    margin: 0;
    padding: 0;
    text-align: left;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    background-color: #ee237c;
}

#container {
    width: 890px;
    text-align: left;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0px;
    position: absolute;
    background-color: #FFFFFF;
    background-repeat: repeat-y;
    background-position: right;
    overflow:auto;  <-- ( :au to )
    left: 1px;
} 

#header {
    background-color: #FFF;
    position: absolute;
    width: 870px;
    height: 121px;
    overflow: hidden;
} 
#headermenu {
    height: 65px;
    width: 870px;
    float: left;
    position: absolute;
    top: 121px;
}
/* below is navigation bar stuff */
.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #333;
}
.menu li {
    padding: 0;
    margin: 0;
    height: 65px;
    list-style: none;
    background-repeat: no-repeat;
}
.menu li a, .menu li a:visited {
    display: block;
    text-decoration: none;
    text-indent: -1000px;
    height: 65px;
    background-repeat: no-repeat;}

.home {background-image: url(images/navro_1.jpg); width: 91px;}
.home a {background-image: url(images/nav_1home.jpg);}

.services {background-image: url(images/navro_2.jpg); width: 196px;}
.services a {background-image: url(images/nav_2serv.jpg);}

.about {background-image: url(images/navro_3.jpg); width: 182px;}
.about a {background-image: url(images/nav_3about.jpg);}

.location {background-image: url(images/navro_4.jpg); width: 124px;}
.location a {background-image: url(images/nav_4loc.jpg);}

.social {background-image: url(images/navro_5.jpg); width: 160px;}
.social a {background-image: url(images/nav_5social.jpg);}

.contact {background-image: url(images/navro_6.jpg); width: 117px;}
.contact a {background-image: url(images/nav_6contact.jpg);}

ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.contenttext {
    list-style-type: none;
    margin-right: 25px;
}

Using absolute position on everything is never a good idea; it causes all kinds of problems, one of which you've run into here.

In your CSS file, replacing position: absolute; top: 121px; with padding-top: 121px; in #headermenu might be enough to fix this, or you may need to strip out the position:absolute on other elements as well.

Agree with Andrew, you don't need all that positioning, not even for that simple menu. This is also why using DW when you don't understand coding, html, css, and layout, is a very bad idea.

IE 7 and below has MAJOR bugs with absolute positioning, just get rid of it. Learn to use the document flow and floats and you'll have better luck.

You cannot have float: left and position:absolute together, they do not work together, it's one of the other - floated, or positioned.

Thanks very much for your help!

I guess we all have to start somewhere, eh? Good info about the absolute positioned elements; I never realized they were so buggy.

Maybe I should stick to easier layouts til I get a little better at this.