css active and hover links don’t work in chrome or safari

[cordellc]

Hi,

I’ve created a horizontal menu using lists but the hover link doesn’t change the background or color in chrome or safari. Works fine in all versions of IE and firefox. Here’s my css code – can you see any reason why this wouldn’t work in these 2 browsers? Would really appreciate your help – it’s driving me mad!!
Thanks,
Caroline

#mainmenubar {
width: 800px;
height: 30px;
margin: 0px;
padding: 0px;
font-size: 12px;
font-weight: bold;
background-image: url(images/menubar.jpg);
background-repeat: no-repeat;
}
#mainmenubar ul {
list-style-type: none;
margin-left: 365px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
overflow: hidden;
}
#mainmenubar li {
width: 85px;
height: 25px;
float:left;
padding-top: 5px;
margin-top: 0px;
margin-bottom: 0px;
border-left-style: solid;
border-left-width: 2px;
border-left-color: #fff;
}
#mainmenubar ul li a:link, #mainmenubar ul li a:visited {
color: #FFF;
text-decoration: none;
width: 85px;
height: 25px;
margin: 0px;
padding: 0px;
}
#mainmenubar ul li a:hover, #mainmenubar ul li a:active {
color: #291501;
background-color: #dddddd;
display: block;
width: 85px;
padding-top: 5px;
margin-top: -5px;
}

[cordellc]

Hi,

Here’s the link for you

http://www.springtidebathrooms.co.uk/test/index.htm

Cheers,
Caroline

[cordellc]

Thankyou thankyou thankyou!!! You are a massive star – you wouldn’t believe how much time i’ve wasted trying to fix this. Also noticed you’d used line-height to position the list item within the menu correctly, getting rid of the need for silly negatives on my margins. Fantastic!!!!

[Author]

Posts