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

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 -

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

Cheers Excavator!!! much appreciated!!