...

View Full Version : Link List Menu Borders



Basscyst
10-22-2007, 08:50 PM
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
10-22-2007, 08:59 PM
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
10-22-2007, 09:49 PM
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
10-22-2007, 10:40 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum