Problem in IE with A:hover

Discussion in 'CSS' started by Supergrover1981, Aug 30, 2006.

0
  1. #1
    Gidday guys,

    I'm currently trying to write up a CSS navigation menu, and I'm having a little problem in IE 6.

    Problem can be viewed at:

    http://www.johnbayne.com/hiclone1/1.html

    The problem is with the 2 menu items in the top-right corner. In Firefox, everything works fine. In IE6, "A:hover" works when the mouse is rolled over the menu item, but when the mouse rolls off, hover stays active.

    Any ideas most appreciated.

    Cheers,
    - JB

    CSS:

    
/* CSS Document */

#mainbox {
background: #FFFFFF;
width: 765px;
height: 1200px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 0px;
border-style: solid;
border-color: #666666;
border-width: 2px;
padding: 0px;
}

#headerbackground {
background: url(topbg.jpg);
background-repeat: repeat-x;
float: left;
width: 759px;
height: 80px;
margin: 3px;
border: 0px;
padding: 0px;

}

#headermenu {
background: url(topmenubackgroundtp.gif);
width: 101px;
height: 80px;
padding: 0px;
margin: 0px;
float: right;
border: 0px;
text-align: center;
vertical-align: bottom;
background-color: #0000FF;}

A:link #headermenu {
background-color: #0000FF;
}

A:visited #headermenu {
background-color: #33CC33;
}

A:active #headermenu {
background-color: #CCCCCC;
}

A:hover #headermenu {
background-color: #FF0000;
}

#headermenu p {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #FFFFFF;
margin-top: 55px;
}
    Code (markup):
     
    Supergrover1981, Aug 30, 2006 IP
  2. dddougal

    dddougal Well-Known Member

    Messages:
    676
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    108
    #2
    Put them like this instead:

    a.headermenu:link {....}

    then the link:

    <a href="blah blah" class="headermenu">blah blah</a>

    or put the link conditions within the section #headermenu...

    Id personally do it the first way but its upto you.
     
    dddougal, Aug 31, 2006 IP
  3. Mano70

    Mano70 Peon

    Messages:
    42
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I would not put a class on each link, just wasted code.

    But your HTML is wrong (errors). You can't put a link outside a div, and only one element can have a id:
    <A HREF="dog.html"><div id="headermenu"><P>HELLO</P></div></A>
    <A HREF="cow.html"><div id="headermenu"><P>AGAIN!</P></div></A>

    Unordered lists is really what you should have used here:
    <ul id="headermenu">
    <li><a href="dog.html">Hello</a></li>
    <li><a href="cow.html">Again</a></li>
    </ul>

    Further, you are using a:active before a:hover in your CSS, this is also wrong:
    http://www.w3schools.com/css/css_pseudo_classes.asp
     
    Mano70, Aug 31, 2006 IP