PNG8 Black Border in IE - css

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.

Answer 4

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 5

This worked for me with animated opacities:
img{
background: transparent;
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
zoom: 1;
}

Answer 6

After searching for alternative solutions, I returned to the source images for answers.
It seems that 24bit .png-files cause problems, but 8bit versions behave well. I haven't researched this in depth.
These settings in Photoshop's Save for Web & Devices -dialog helped me get rid of the black strokes in opacity animations:
PNG-8, Selective, Diffusion, Transparency, Colors: 256, Matte: None, No transparency Dither, Interlaced and Convert to sRGB with "Internet Standard RGB".

Answer 7

You can do it in CSS buy using IE's proprietary filtering system.
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');
DEMO
you will need to use a blank.gif for the 'first' image in your background declaration. This is simply to confuse ie8 and prevent it from using both the filter and the background you have set, and only use the filter. Other browsers support multiple background images and will understand the background declaration and not understand the filter, hence using the background only.
You may also need to play with the sizingMethod in the filter to get it to work the way you want.

Answer 8

I had the same thing happen to a PNG with transparency that was set as the background-image of an <A> element with opacity applied.
The fix was to set the background-color of the <A> element.
So, the following:
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
Turns into:
/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;