Banner Fade In Jquery not working

My banner works in most of the browsers except in IE 7,8 and I 开发者_运维问答think 9. At the bottom of the banner, when fadein is in effect, shadows under the banner go black:

Can anyone help me?

Website: www.maurobonucci.com/beta/

It's working on IE 9, which is the only version I have. But I expect the problem you're having in earlier versions has to do with the drop shadow on the bottom of the image.

I strongly believe that the problem is that IE8 understands the PNG's transparency very poorly. I base this on the fact, that your images include the shadow. That shadow is semi-transparent and is the only thing that goes black.

I think for your case you can easily fix this by cutting the shadow out. Make the shadow as a wrapper, so it would be static all the time. And then have the changing images container inside the wrapper, so only the images without PNG transparency would get faded. This should fix the problem for IE8 and IE7. However, IE6 has completely new set of problems with PNG transparency. OR even easier would be to open the images up in your photoshop and add solid white background to all of them. Since your websites background is white anyways, then there is no need for the shadows to be transparent.

Some similar articles:

• How to solve/hack fading semi-transparent PNG bug in IE8?
• jquery cycle IE7 transparent png problem