Forum Moderators: not2easy

Message Too Old, No Replies

Pesky extra pixel in CSS border

My left vertical navbar has 1px too much on the border of a block

         

Gray_Fox

7:35 pm on Mar 21, 2008 (gmt 0)

10+ Year Member



Thanks in advance for any help :)

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;}

londrum

8:19 pm on Mar 21, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



it will probably be easier to just give the box a border as well. but make it the same colour as the background so it doesn't show.
but the answer is something to do with this...
if your border is only 1px wide then the browser has to decide whether the line along the top overlaps the one on the side, or the one on the side overlaps the one on top. like this...
[pre]
SSSSSSSSSSS
O.........O
O.........O
SSSSSSSSSSS
[/pre]

or
[pre]
OSSSSSSSSSO
O.........O
O.........O
OSSSSSSSSSO
[/pre]

if you turn off one then you are bound to have an overlap somewhere.
safari has probably just chosen to overlap the opposite one to the other browsers.