[thelist] horizontal menu and IE6

Roel Mulder roel.mulder at gmail.com
Wed Oct 15 13:14:32 CDT 2008


Hi all,
There is this CSS thing I just can't grasp. We put a site together
today, which features a horizontal menu. Only in IE6 the buttons
spread to full width, and underneath each other. Would anyone be so
kind to throw a glance at it? The site is running at a temporary
domain, and will only be up for another day or two at this url:
http://helen.mta.nl/  and then moved to their server/domain.

The menu:
<div id="navbar">
<div id="navcontainer">
<ul><li class="active"><a href="http://helen.mta.nl/">Home</a></li>
<li><a href="/werkwijze.html">Werkwijze</a></li>
<li><a href="/consult.html">Consult</a></li>
<li><a href="/contact.html">Contact</a></li>
<li class="last"><a href="/over-tosca.html">Over Tosca</a></li>
</ul>
</div>
</div>

The CSS:
#navbar{ position:absolute; left:210px; top:130px; width:650px;}
#navcontainer { margin:0 0 0 30px; padding:0; height:20px;}

#navcontainer ul {
  border:0;
  margin:0;
  padding:0;
  list-style-type:none;
  text-align:center;}

#navcontainer ul li {
  display:block;
  float:left;
  text-align:center;
  padding:0;
  margin:0;
}

#navcontainer ul li a {
  background:#75726b;
  height:18px;
  border-right:1px solid #dcdedd;
  border-left:none;
  padding:0 7px 0 7px;
  margin:0 0 10px 0;
  color:#dcdedd;
  text-decoration:none;
  display:block;
  text-align:center;
}
#navcontainer ul li a:hover { color:#fff; background:#a6a69e;}
#navcontainer a:active { background:#a6a69e; color:#b41720;}
#navcontainer li.active a { background:#a6a69e; color:#b41720; }
#navcontainer li.last a { border-right:none; }

I've tried several variants yet all render the same result. So, likely
I'm just not seeing something that is staring me in the face.

Cheers,
Roel



More information about the thelist mailing list