Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile CSS Navigation Hover Problem(ul,li)

    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


    My HTML
    Code:
    <!--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
    Code:
    #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;}
    Last edited by gkdesign; 07-24-2011 at 07:59 AM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    try floating the lis to the left.

    Code:
    #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

    Code:
    #nav ul li {
     line-height: 27px;
    }
    centers the text vertically within the li. a lot easier versus the padding you are using right now
    Last edited by Sammy12; 07-24-2011 at 07:11 AM.

  • Users who have thanked Sammy12 for this post:

    gkdesign (07-24-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks you so much !
    float:left method worked, thanks again.

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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •