Ultimate Fade-In transparent PNG issue in IE

[antonea]

1) Script Title: Ultimate Fade-in slideshow (v2.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I saved out a few transparent PNGs that have a dropshadow on them. In all versions of firefox the images display with a black border where the drop shadow should be displaying. In the js file I have changed the background from black to transparent, but still no luck.

Here is a link if you could please have a look at it in IE 8 or 7. http://www.northbridgehotel.com.au/temp

Thanks!

[jscheuer1]

The problem for IE is that your .png images have more than one alpha channel, most likely many. These are required to give the edges that smooth/gradual drop shadow effect. When an image like that is combined with IE's filter:alpha (required for a fade transition in IE), it flattens the alpha channels to black. It's possible to remove the filter after each transition, that would improve things. But during the transition the drop shadow would still appear as all black in IE.

One possibility (that might work) is that since IE also has a filter for drop shadows, one might be able to save a separate set of images for IE. These would be ones with no drop shadow, essentially cropped versions. Then if one were to apply the drop shadow filter to these images via style, things might work out. This would require script branching specific to IE, but could probably be tested first without a script.

Another, perhaps better option, one I'm sure would work, but that would be a bit tricky as well, would be to save the images without the drop shadow, and make images for the borders. These images would be the drop shadows. They could be placed around the slide show to give the effect of a drop shadow. The advantage to this option is that although the css would be a bit complex, it could be applied cross browser.