[css-d] background-images don't hover in IE

[Jan Deppisch]

Hi,

I want to hover some floated background-images, but IE6 doesn't reset
the hover-state back to normal.

HTML:
<div id="header">
  <a href="/service/"><span class="service" title="Service">Service</span></a>
  <a href="/specials/"><span class="specials"
title="Specials">Specials</span></a>
</div>

CSS:
#header {
  height: 106px;
}

#header a {
  float: left;
}
        
#header a:link span {
  display: block;
  height: 106px;
  text-indent: -5000px;
}
                
#header a:hover span {
  cursor: pointer;
}

#header a span.service {
  width: 134px;
  background: #fff url(../../_media/img/header/service_hell.jpg)
no-repeat center center;
}
                
#header a:hover span.service {
  width: 134px;
  background: #fff url(../../_media/img/header/service.jpg) no-repeat
center center;
}
                        
#header a span.specials {
  width: 245px;
  background: #fff url(../../_media/img/header/specials_hell.jpg)
no-repeat center center;
}
                
#header a:hover span.specials {
  width: 245px;
  background: #fff url(../../_media/img/header/specials.jpg) no-repeat
center center;
}

Any other idea on how to optimize the css is welcome.

Thanks!

Jan
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/