Horizontal navigation problem in IE 7/6

HTML & CSS
1

My horizontal navigation bar is off-kilter in IE 7 and 6. I’m thinking maybe it’s a float issue but I can’t seem to fix it in my IE CSS (clearing doesn’t work). Here’s a link to the dev site and following is the code. Many thanks for any assistance

#access {
    width:940px;
    margin:0 auto;
    overflow:visible;}
#menu ul,
.menu ul {
    list-style:none;
    margin:0;
    overflow:hidden;
}

#menu a,
.menu a {
    color:#999;
    display:block; 
    float:left;
    text-transform: uppercase;
    font-style:normal;
    font-weight: bold;
    font-family: helvetica, arial, sans-serif;
    letter-spacing: 2px;
    margin: 0 5px; 
    text-decoration:none;
    padding: 2px 7px; 
    -webkit-border-bottom-right-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-bottomleft: 7px; 
     border: 3px solid #fff;
     border-top: none; 
}
#menu a:hover,
.menu a:hover {
	color: #000; 
	background: url(images/oil-brown.jpg) no-repeat bottom right;
	border: 3px solid #999;
	border-top: none; 
}
#menu li.current_page_item a,
.menu li.current_page_item a {
	color: #fff; 
	background: url(images/oil-rainbow.jpg) no-repeat bottom right;
	border: 3px solid #999;
	border-top: none;
}
2

You were probably running into a staircase bug.

Since you floated the anchors (but did nothing to the <li>) you were running into the staircase bug and as you see you can fix it by display:inline on the <li> (or you could have floated it)’

Glad you got it sorted out anyway :wink: (and sorry we took too long to answer it for you)

3

Sorry … I fixed this. Not my code (and some excessive id/classes) but the following worked:

.menu ul { list-style:none;}
.menu li { display: inline; }
.menu li a { float: left; }