Forum Moderators: not2easy
I'm trying to get a vertical navbar going. I have a list of links to each /dir on our website. The CSS gives it its look. When a user is in, say /bus, then the /bus link block in the navbar will be highlighted white. I've put a thin border around the link blocks not highlighted and an inline on the highlighted link so that it did not have any borders (our page background is also white). The problem is that I get a 1px extra on the bottom right corner of the highlighted box. It has something to do with the interaction of the border-top (which I use to separate each link block) and border-right properties, but how?
The only browser that shows it without the 1px is Safari.
The code is below.
Thank you to anyone who can give me a pointer on this one.
HTML:
<tr>
<td class="vnb">
<a href="/hotels/">ACCOMMODATIONS</a>
<a href="/bus/" style="background: #FFFFFF; border:none; color:#34364D;">BUSINESS DIRECTORY</a>
<a href="/calendar.html">CALENDAR OF EVENTS</a>
</td>
</tr>
CSS:
td.vnb {background-image:url(/i/lnb-bg-sides-134.gif); background-repeat:repeat-y; text-align:center; font-size:10px; font-weight:bolder; font-family:Arial,Helvetica,sans-serif; padding-top:0px; margin-top:0px;}
td.vnb a {color:#E4E9F9; text-align:left; text-decoration:none; display:block; padding: 5px 3px 5px 5px; border-top:1px solid #E4E9F9; border-right: 1px solid #34364D; border-left: 1px solid #34364D;}
[pre]
SSSSSSSSSSS
O.........O
O.........O
SSSSSSSSSSS
[/pre] [pre]
OSSSSSSSSSO
O.........O
O.........O
OSSSSSSSSSO
[/pre]