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
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts

    Navigation hover problem

    Hi all,

    I have created a nav bar here http://www.glen-lodge.co.uk/testing/navTest/test.html

    I have set the hover of each <a> with a new gradient, what I have noticed however is when hovered in ff there is a small gap between each divider and the hover gradient on the left and in ie the same but instead on the right. This happens on all links apart from the first one?

    Has anyone any suggestions on how this can be corrected?

    Thanks in advance!!

    Kyle
    Last edited by kyllle; 12-03-2009 at 04:40 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello kyllle,
    I'm not sure why but it looks like display:inline; is causing that. Goes away when you float the li instead... at least in FF
    Try this -
    Code:
    	
    	ul.nav_links{
    		list-style-type: none;
    		color: #fff;
    		font-weight: bold;
    		/*padding: 8px 0 7px;*/
    		font-size: 1.2em;
    overflow: auto;
    		/*background: #eee;*/
    	}
    	
    		ul.nav_links li{
    			float: left;
    			padding: 8px 0px 7px;
    			border-right: 1px solid #3a537b;
    		}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    kyllle (12-03-2009)

  • #3
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    Cheers Excavator!!! much appreciated!!


  •  

    Posting Permissions

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