# CSS Rollovers

**URL:** <https://forum.kirupa.com/t/css-rollovers/208913>\
**Category:** web dev\
**Created:** [December 4, 2006, 6:18am UTC](https://forum.kirupa.com/t/css-rollovers/208913 "2006-12-04T06:18:54Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![matthewjumps](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@matthewjumps](https://forum.kirupa.com/u/matthewjumps)\
**Post date:** [December 4, 2006, 6:18am UTC](https://forum.kirupa.com/t/css-rollovers/208913/1 "2006-12-04T06:18:54Z")

</div>

OK CSS Gurus

```auto
<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.

```auto
#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.

```auto
#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: