...

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



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

Sammy12
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

gkdesign
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.:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum