DD_belatedPNG.js - Can't get alpha transparency to worth on a:hover in IE6

[evanmiller2007]

Hey Guys,
So, I usually use the DD_belatedpng.js fix on my websites to make sure that PNG transparency works with IE6. It is a great fix and works well, except for with one thing I'm trying to do.
Usually when I make a CSS nav, I just make an a:hover state for the navigation links, with a different background. The problem is, I can't seem to get the PNG fix to work on a a:hover background.

I think the simplest way to explain this is to show a website where it is happening:
http://groundscapesofwi.com/
In IE6, when you roll over the nav buttons, you will see the problem (it should be pretty obvious).

Does anyone know what to do here? This is the "if IE" code I'm currently using:

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('img, div, a, span');
</script>
<![endif]-->

The only thing I could think to do was to add a:hover to the list like this:

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('img, div, a, span, a:hover');
</script>
<![endif]-->

But that doesn't work.
Any ideas? Thanks in advance!

[traq]

older versions of IE have bad support for :hover. I'd recommend looking into whatever:hover.

[skeg64]

Make a CSS sprite by combining all the background images into one PNG. Then just change the background-position on :hover. Should work

[traq]

Read the original post. He's already trying to use :hover; the problem is that :hover doesn't work in older versions of IE.

[skeg64]

:hover on anchors works just fine in ie6.

The problem is that the PNG fix won't apply to the background-image that is changed on :hover because it is not part of the DOM.

If the background-image is the same image (using a CSS sprite), and only its position is changed, the PNG fix will work.