Home/ Questions/Q 84373
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T21:55:14+00:00

I’m using the following code to have a non-JS navigation: <ol id=navigation> <li id=home><a

  • 0

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,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 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.

    • 0