CSS Rollovers - IE 6

programming web dev
1

Im using a HTML structure like this


<div id="nav">
 <a href="#" id="btn_home">Home<span></span></a>
<div class="seperator"></div>
<a href="#" id="btn_contact_us">Contact Us<span></span></a>
 </div>

and CSS like this

#nav {
    height: 37px;
}
#nav .seperator {
    height: 37px;
    width: 3px;
    float: left;
    background: url('images/nav_seperator.gif') 0px 0px no-repeat;
}
#nav a {
    display: block;
    float: left;
    height: 25px;
    padding-top: 12px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: #4a7291;
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1px;
    text-align: center;
}
#btn_home {
    width: 54px;
}
#btn_contact_us {
    width: 84px;
}
#nav #btn_home span {
    width: 54px;
    background: url('images/nav_home.gif') 0px 0px no-repeat;
}
#nav #btn_home:hover span {
    background: url('images/nav_home.gif') 0px -37px no-repeat;
}
#btn_contact_us span {
    background: url('images/nav_contact_us.gif') 0px 0px no-repeat;
}
#btn_contact_us:hover span {
    background: url('images/nav_contact_us.gif') 0px -37px no-repeat;
}

so basically theres a absolutely positioned span inside each a that has a background image in it of the button, z-index places it over the top of the text in the a, and then using the :hover css selector, it moves the background image to reveal the “over” state of the button

what im wondering is - why does it work fine in IE 7 and FFox - but in IE 6, it repositions the background image when u roll over, but when you roll off, it doesnt reset it…

anyone had this issue before?