a:hover background image swap not working in IE6

Question

Hi I have:

a.dismiss-cross {
    background: transparent url(/images/cross-grey.png) no-repeat scroll 0 0;
    float: 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.

Answer 1

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.