dividing lines of navigation acting wierd

I have a right border of 1 px. white, in my nav items, Id like the last item to have no line, but it does sofar, and when i hover, the lines get longer, at first I kinda liked the way it looked, but im sure itll cause problems and its not intended so Id like to know whats causing it so i might fix it...


#navigation_wrapper{
background: #363B28 url(../images/nav_bg.gif) 0 0 repeat-x;
height: 50px;
width:600px;
margin: 10px auto 20px auto;
z-index:100;
position:relative;
top: 80px;
left: 100px;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
#navigation{
float: left;
padding-left:7px;
height: 50px;
background: url(../images/navigation_left.gif) left top no-repeat;
z-index:100;
position:absolute;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
#navigation li{
float: left;
border-right: 1px solid #FFF ;


}

#navigation li last {
border-right:none;
}


#navigation li a{


padding: 9px 20px 0 10px;
height: 30px;
float: left;
font-family: BankGothicMdBTMedium;
text-align:center;
font-size:1.52em;
font-weight: bold;
letter-spacing:-0.05em;
line-height:normal;
color: #FFF;


}

#navigation li a:hover{
color: #609;
background: none;
height:42px;
}
#navigation ul {
position:absolute;
width:12em;
top:1.5em;
display:none;
background-color:#000;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */

}
#navigation li ul a{
width:12em;
float:left;
}


<div id="navigation_wrapper">
<!-- Top Navigation -->
<ul id="navigation">
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="hair.html" title="Hair">Hair</a></li>
<li><a href="nailsl.html" title="Nails">Nails</a></li>

<li><a href="teeth.html" title="DaVinci Teeth Whitening">DaVinci Teeth<br/>Whitening</a></li>
<li><a href="packages.html" title="Exclusive Packages">Exclusive<br/>Packages</a></li>
<li><a href="spa.html" title="Spa Services">Spa Services</a></li>
<li class="last"><a href="staff.htm' title=Staff">Staff</a></li>
</ul>

I apologize for posting so much, im trying to get this first page working perfectly so i can just knock out the rest real quicky.

#navigation li last {
border-right:none;
}

That must be
#navigation li.last {
border-right:none;
}

Thanks! Wow that was a silly error on my part. I still dont know know whats making the lines move on mouseover though..

Can we have a link to your page?

http://www.trendstudiosorlando.com/test3/index.html


not sure its the updated version as I havent reuploaded a new test, however it still shows the slight wierdness with the menu

So, do you want to keep that vertical borders the same when you hover OR extend the border to the bottom in the normal state too?

I would like to keep them the same, the extending past the border is a bug.

this might get you closer to something.

save your stuff.

new code.


#navigation_wrapper {
background: url("../images/nav_bg.gif") repeat-x scroll 0 0 #363B28;
height: 50px;
margin: 10px auto 20px;
opacity: 0.7;
position: relative;
top: 75px;
width: 850px;
z-index: 100;
}

#navigation li a {
color: #FFFFFF;
float: left;
font-family: verdana;
font-size: 1.22em;
font-weight: bold;
height: 40px;
letter-spacing: -0.05em;
padding: 6px 35px 6px 35px;
text-align: center;
}


I would take the opacity off your navigation_wrapper too, I like the darker purple better.

with the opacity gone and the darker purple I might change your hover color to a more subtle transtition though.


#navigation li a:hover {
background: none repeat scroll 0 0 transparent;
color: #E0E0E0;
height: 42px;
}

yeah...that just completely screws up my nav formatting and the lines still move, lol.

I just inserted that code into firebug turned out how I planned last night? firebug LIES!!!!!!!... I dont know sorry about that, wish I could have helped ya out.

Isn't this the problem:

#navigation li a:hover {
background: none repeat scroll 0 0 transparent;
color: #660099;
height: 42px;
}

Remove that and the border doesn't extend, because the height doesn't change.

winner winner chicken dinner! thanks! I thought putting that property there would extend the lines to the end, buttttt it didnt. lol thanks! anddd now i get what i was doing wrong, the li height had to be changed to the height of the background! Thanks guys!

winner winner chicken dinner!

Just had one, actually, but thanks...:D