PNG8 Black Border in IE

Question

I have a problem in IE with PNG8 images in that it appears with a big dirty black border in the shadowing of my *.png. (IE7, IE8)

I am using alphatransparency and basically have shading under my small image. All browsers render this fine, except IE which renders the shading as a black circle?

I need the image "transparent" because it appears on top of a variety of multicolored backgrounds, etc?

Any ideas?

Answer 1

I am compelled to respond. I just solved this issue as well. Just to recap, in IE7 and IE 8, transparent PNG and GIF images in links sometimes have a black border or shadow around them.

You need to check to make sure there is no opacity filters on these images. I have opacity on 100. I changed this to

filter:0;

Remember also for blurry link text, you need to specify a background color for the link or else it will be fuzzy and blurry.

Death to IE!!

Answer 2

I'd like to say thanks for the answer, and to add something. In my specific instance, I needed to override a style that was:

filter: alpha(opacity=50);

Adding the below code made my opacity correct, but added the issue of the black edges:

filter: alpha(opacity=100);

This is the line that saved me by fixing the issue:

filter: 0;

I hope this helps someone else too!

Answer 3

OK - solved the problem. It seemed that my JS was assigning

filter: alpha(opacity=100);

to the image and this is what was causing the black mark to appear as I had already made the image alphatransparent in the PNG8 encoding.