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

So is the problem with the image or with the fading code? If it is the code, post the code. — epascarello, Sep 18 '10 at 11:20
Possibly a duplicate of [this](http://stackoverflow.com/questions/2020690/how-to-make-a-google-maps-semi-transparent-png-tile-layer-work-in-ie8) but waiting for confirmation — Pekka, Sep 18 '10 at 11:24

score 2 · Accepted Answer · edited May 23 '17 at 11:55

2

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

edited May 23 '17 at 11:55

Community

1
1

answered Sep 18 '10 at 11:23

Pekka

442,112
142
972
1,088

score 0 · Answer 2 · answered Sep 18 '10 at 13:26

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 }

Png in IE browsers problem

2 Answers2