CSS Rollovers

programming web dev
1

OK CSS Gurus

<div id="nav">
            <a href="products.htm" id="productsBtn">Products<span></span></a>
        </div>

Thats basically my HTML for the nav, with multiple tags of course, each with a unique id.

#nav a {
    display: block;
    float: left;
    position: relative;
    height: 70px;
    margin: 0 10px 0 10px; 
    padding: 0;
    overflow: hidden;
    color: #FFFFFF;
    font-size: 15px;
    text-align: center;
}
#nav a span {
    display: block;
    position: absolute; left: 0; top: 0; z-index: 1;
    height: 70px;
    margin: 0; padding: 0;
    cursor: pointer;
}

That is the general CSS applied to all a tags in the #nav, along with the nested in the I use the span so that i can have HTML text in there in case the image doesnt load, or the user has images disabled.

#nav #productsBtn {
    width: 80px;
}
#nav #productsBtn span {
    background: url("images/nav/products.gif") top left no-repeat;
    width: 80px; 
}
#nav #productsBtn:hover span {
    background-position: bottom left;
}

This CSS is unique to the <a> with the id #productsBtn. i set the width of the <a>, then set up the child <span> with a bg image and width. lastly it repositions the image on hover.

All good! Works great in IE7, and Ffox.

But…in IE6 on Win, when I rollover, all is well, the background image of the span gets repositioned like it should. BUT - when roll out, the background image should reset to top left, but it doesnt. it just stays there.

:jail: