• Clever Geek Handbook

    IE6 Navigation

    I am using the following code for 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 that they won't change images on hover on IE6. I am using :hover

    anchored, so it should be fine and I am using display

    instead visibility

    , which is another thing that doesn't work in IE6.

    I would really like to not add a load of javascript to replace / preload the image (embedding something like jQuery is not an option) - can anyone help me here?

    Thank,

    +1


    source to share


    3 answers


    IE does not redraw anchors unless some rule changes to <a>

    . Add something for a:hover

    , for example:

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


    BTW: Unfortunately, popular screen readers don't read things with display:none

    , so your menu becomes unavailable.

    I suggest having it visible <img>

    by default and hiding it on hover.

    +4


    source


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

    I recently came up with a little idea that I like to use, which has both normal and suggestive states of the button as the same image, normal button state at the top and hover state of the button at the bottom, which means both button states are immediately cached, so like this is the same image! And you don't have different image downloads for different states of your buttons filling your images folder, just one image that links to each state of that link.

    Then you can get rid of the img tag and its style (display: none, etc.)

    And you have your link style like this:



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

    you will also need to set the height in the link so that it doesn't show any part of the other state, makes sense? Effectively cut the background image in half with element sizing styles.

    no javascript required and and the state change is instant when the image is already loaded :)

    hope this helps!

    +2


    source


    You can also use the background in the anchor label as 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");
}
    +1


    source






    More articles:


    All Articles