IE PNG Fade Fix

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:


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?

Did you try setting border:0 ? lol :). If it’s linked (which I’m assuming it is since it’s a hover fade thingy ma bobby) then try this.

a img{border:0;}

Got a link to look at if it doesn’t work?

Please read my post before replying.

No it is not a link and NO there is NO img tag nested within AND NO there NO border in use.

Hi,

What does it look like with the JS turned off?

If the black border is due to the opacity filter being faded in then you are running into the fading opacity bug mentioned in this thread.

If that’s not the issue then we would probably need a link to check it out:)

You never said there was no link, although you did say there was no <img> and you never said you didn’t try border:0 so stop being rude :).

Got a link?