CODEWITHSUNDEEP
htmlcsscross-browserhover
Gaelen
Gaelen

Reputation: 315

CSS hover problems in Chrome and IE8

I'm having trouble with cross-browser compatibility.

I have a simple menu (with all JS functionality removed for the purpose of this demonstration). The background of the links are meant to go orange when hovered over.

I think the problem would easily be recognised by someone who knows CSS well, but my knowledge isn't up to scratch. An explanation would be greatly appreciated!

Here is the code on JS Fiddle

Here is a portion of the CSS:

#mainlinks  {
    position:absolute;
    display:block;
    overflow:visible;
    margin:0px;
    padding:0px;
}

#mainlinks li {
    display:block;
    position:relative;
    float: left;
    cursor:pointer;
    overflow:hidden;
    padding:4px;
    margin:45px 3px 2px 3px;
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    font-size: 14px;
    text-decoration:none;
    list-style: none;
}

#mainlinks li :visited {
    text-decoration:none;
    color:#000;
    padding:4px;
    margin:45px 3px 2px 3px;
}

#mainlinks li :hover {
    text-decoration:none;
    color:#FFF;
    padding:4px;
    margin:45px 3px 2px 3px;
    background-color:#f1592a;
}

Upvotes: 2

Views: 1378

Answers (2)

Jonathan Miller
Jonathan Miller

Reputation: 1786

you should try applying the text specific styles (ie: color) to the 'a' tag instead of on the LI

Upvotes: 1

Kent
Kent

Reputation: 2960

try li:hover instead of li :hover, li:visited instead of li :visited

hope this works ^^

Upvotes: 1

Related Questions