Link List Menu Borders

[Basscyst]

See the problem here:

http://www.rateprice.com/combo/pricefinal.asp

On the top navigation menu, the link to "Pricing" has a class of on, you'll see a 1px piece of border on the bottom right corner of the tab. Not sure why it's there nor can I seem to make it go away. Perhaps it's the bottom border of the next sibling? This appears as such in both IE 7 and Firefox. Any help is appreciated.

CSS:


#spacer1{
height:16px;
float:left;
width:15px;
border-bottom:solid 1px #C60000;
border-left:solid 1px #757575;
}
#headernav ul{
list-style:none;
float:left;
padding:0px;
margin:0px;
float:left;
}
#headernav ul li{
padding:0px;
margin:0px;
float:left;
width:150px;
}
#headernav ul li a{
color:#32659A;
display:block;
text-decoration:none;
text-align:center;
font-size:.8em;
border-bottom:solid 1px #C60000;
height:100%;
width:100%;
}
#headernav ul li a:hover{
color:#C60000;
}
#headernav ul li .on{
border:solid 1px #C60000;
border-bottom:solid 0px;
background-color:#FFFFFF;
}
#spacer2{
height:16px;
width:233px;
border-bottom:solid 1px #C60000;
float:left;
border-right:solid 1px #757575;
}


HTML:

<div id="headernav">
<div id="spacer1">
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" class="on">Pricing</a></li>
<li><a href="#">Broker Info</a></li>
<li><a href="#">Broker Menu</a></li>
<li><a href="#">Admin</a></li>
</ul>
<div id="spacer2">
</div>
</div>


Thanks,

Basscyst

[Basscyst]

Ahh, well I fixed it by giving the next sibling of the "on" tab a margin-left of 1px. If there is a more elegant solution I'd still like to hear your ideas.

Thanks,
Basscyst

[dcostalis]

I see you've been updating the code as I was looking at it.

If you kill the red line, it seems to work like it should:

internal.css (line 81)
#headernav ul li a {
border-bottom:1px solid #C60000;
display:block;
font-size:0.8em;
height:100%;
text-align:center;
text-decoration:none;
width:100%;
}

[Basscyst]

Can't kill the red line, it's what gives the look of a selected tab. I don't see any difference in that bit of css either. It's all good though, it's displaying fine with the margin fix.