Hello Guys,

This is my first post, need your help. I am facing a following problem;

I have navigation designed with ul li and css all works fine, except on mouse over a 3 pixel unwanted space comes between the separator and link background color.

This will be more clear when you see the below screen shot
http://www.freeimagehosting.net/63e52
http://www.box.net/shared/vx1stqrvzifi4qs5i67j
My HTML

<!--Navigation-->
<div id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SEARCH</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">iPHONE APP</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<!--End Navigation-->

My CSS

#nav{ background-color:#333333; width:950px; height:39px; clear:both;}
#nav ul{ list-style-type:none; margin:0px; padding:0px;}
#nav ul li{display:inline-block; }
#nav ul li a{color:#FFFFFF;font-size:15px;font-weight:bold;text-decoration:none;display:block;height:27px;padding:12px 25px 0px 25px;border-left: #FFFFFF solid 1px;}
#nav ul li a:hover{ background-color:#F18B0B; display:block; height:27px;padding:12px 25px 0px 25px;}

try floating the lis to the left.


#nav ul li {
float: left;
}


should get rid of the space.
you have to set a height for the ul when floating, which you already have on #nav.

---

might I also add that


#nav ul li {
line-height: 27px;
}


centers the text vertically within the li. a lot easier versus the padding you are using right now

Thanks you so much !
float:left method worked, thanks again. :thumbsup:

I'll surely try out your other suggestions for centering the content.:)