IE6 Navigation hovers

Question

I'm using the following code to have a non-JS navigation:

<ol id="navigation">
    <li id="home"><a href="#"><img src="./images/nav/home-hover.png" alt="Home" /></li>
    ...
</ol>

And the CSS:

#navigation a {
    display: block;
    height: 25px;
}

#navigation a img {
    display: none;
}

#navigation a:hover img {
    display: block;
}

#home a {
    background: url('./images/nav/home-normal.png') no-repeat;
    width: 100px;
}

My problem is they won't change images on hover in IE6. I'm using the :hover on an anchor so that should be fine and am using display rather than visibility which is another thing that doesn't work in IE6.

I'd really like not having to add a load of javascript for image replacing/preloading (embedding something like jQuery isn't an option) - can anyone help me here?

Thanks,

Answer 1

IE doesn't repaint anchors unless any rule on <a> itself changes. Add anything for a:hover, e.g.:

 #navigation a:hover {border:0} /* no-op */

BTW: unfortunately popular screen readers don't read things with display:none, so your menu ends up being inaccessible.

I suggest having <img> visible by default, and hiding it on hover.

Answer 2

You can also use the background on the anchor tag to be your image holder.

HTML:

<ol>
 <li><a href="#"></a></li>
</ol>

CSS:

li a{
 background:url("link.jpg");
 display:block;
 width:100px;
 height:50px;
} 

li a:hover{
 background:url("link2.jpg");
}

Answer 3

Hi

I agree with what jason is saying here, but if you want both images to be cached before the user hovers over the links then why use two images?

I came up with a little idea a while ago that I like to use, which is having both normal & hover states of the button as the same image, the normal state of the button at the top and the hover state of the button underneath, this means that both states of the button are cached straight away, as its the same image! And you dont have loads of different images for different states of your buttons filling up your images folder, just one image that refers to every state of that link.

Then you can get rid of you img tag and its styling (display:none etc)

And have the links styling like so:

#home a {    
    background: url('./images/nav/home-normal.png') no-repeat left top;    
    width: 100px;
}
#home a:hover {    
    background-position:left bottom;
}

you'll have to put a height on the link aswell, so it doesn't show any part of the link's other state, make sense? Your effectively cutting the background image in half with the elements dimension styles.

no javascript needed & and state change is instant as the image is already loaded :)

hope this helps!