Hey Guys.

I am well aware that this issue has been brought up before, but after looking around the net, and finding lots of articles explaining the issue, I cannot seem to get it to work.

Basically, I have a tool tip that has a PNG background image, which has a rounded square as a graphic (so the background behind the square is transparent), and it needs to fade in and fade out when called (with a opacity animation).

The image is set as a background-image in a div.

This works fine in all browsers, but in ALL IE BROWSERS there is an annoying black border that shows up around the png image.

I tried using the alphaImageLoader filter to get rid of the border, but when I remove background-image and then set the filter property, nothing shows up.

Here is my CSS:

Code:
background:none!important;
width:32px;
display:inline-block;
height:32px;
-ms-filter:progid:DXimageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,enabled=true,src='/graphics/loader.png');
filter:progid:DXimageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,enabled=true,src='/graphics/loader.png');
I have tried remoing the -ms-filter declaration (so only having one filter property) but nothing seems to work.

I have also tried setting display:block and display:inline-block.

No luck.

Any ideas?