View Full Version : Resolved CSS Navigation Hover Problem(ul,li)

07-23-2011, 08:33 PM
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

<div id="nav">
<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>
<!--End Navigation-->


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

07-24-2011, 08:05 AM
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

07-24-2011, 08:21 AM
Thanks you so much !
float:left method worked, thanks again. :thumbsup:

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