a:hover background image swap not working in IE6

a.dismiss-cross { background: transparent url(/images/cross-grey.png) no-repeat scroll 0 0; fl开发者_StackOverflow社区oat: right; border: none; width: 19px; height: 19px; display: block; }

a.dismiss-cross:hover {
    background-position: 0 -19px;
}

And implemented with

 <a class='dismiss-cross' href='#'></a>

Lo and behold it doesn't work in IE whereas its fine in every other browser.

Any ideas?

Thanks.

I'm not really sure, but as far as I remember you have to explicitely declare the :link and :visited pseudo-classes:

a.dismiss-cross:link,
a.dismiss-cross:visited {
    background: transparent url(/images/cross-grey.png) no-repeat scroll 0 0;
    float: right;
    border: none;
    width: 19px;
    height: 19px;
    display: block;
}

And, by the way, if you use floating, there's no reason on assigning a block display. Floating implies block display. But... IE6 has a bug with floated elements that have margins. It doubles the margins. The fix is quite simple though. You set display: inline;. This is ignored by all the other browsers, but fixes IE6.