PNG8 Black Border in IE

Question

Hi Guys,

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 ontop of a variety of multicolored backgrounds etc ?

Any ideaS?

Answer 1

I have suffered from similar issues with opacity in ie7, ie8 what you can do is give your png image a background color which will remove the ugly borders from the image....It works for me

Answer 2

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.

Answer 3

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 4

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!!