Png in IE browsers problem

Question

I have a png image inside a DIV which fades in and out with js code.

This works in all major browser except IE browsers. I have tested IE6, 7 and 8, and all look the same.

I have even tested with a pngfix javascript code but this didn't help at all.

What happens is that the png image shows up, but has rough black edges which are very thick.

I have tried converting the png to GIF, but it looks horrible.

What should I do here?

Thanks

Answer 1

This sounds like the old "IE transparent PNGs in containers with opacity" bug. See here for links.

Answer 2

Set your image as a background-image in a Div with the same dimensions as your image, and use the following CSS:

.divBGImage {background-image:url(/images/image.png); 
    background-repeat:no-repeat;height:34px; width:255px;}
* html .divBGImage { background: none; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/image.png', sizingMethod='crop');
     }

Just a warning that IE can rending Fading on PNG's. It creates a black outline while animating.

You can use a different animation for IE browsers by checking if its IE or not:

if ($.browser.msie) { //Animation options for bad browsers } else { //Animation options for proper browsers }