PNG Shadow Not Rendering Properly In IE

[ezsolution]

1) Script Title: Ultimate Fade-in slideshow (v2.1)
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: Shadow area of PNG is displaying black in IE, instead of translucent as it does in Google Chrome and Mozilla Firefox. Link: http://www.cherrycrestfarm.com/beta/index.asp



Any help would be appreciated, as the image outside of the script displays correctly!

Thanks

[ezsolution]

Well after no responses we tried many different things, but apparently it has to do with the Microsoft IE Alpha filter. Adding a style element in the JavaScript fadeslideshow.js file fixed the issue. The line you need to change is around +/- line 236.

Original:

setting.$restorebutton=$('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] +'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />')
				.appendTo(setting.$wrapperdiv)

Update to the following:

setting.$restorebutton=$('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] +'" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+fadeSlideShow_descpanel.controls[1][0]+'\');position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />')
				.appendTo(setting.$wrapperdiv)

Best Regards,

Matt Boaman

[traq]

actually, this is not a .png issue. the script uses the css3 property "opacity" (not a transparent png image), which is not well-supported by Internet Explorer. As you discovered, the Alpha filter is Microsoft's proprietary alternative.

[jscheuer1]

Not exactly ideal, there is a brief moment (at least in IE 8) with each transition where the shadow is still solid black. In cases like these, where the shadow is the same for each image, the best way to deal with it would be to place the shadow outside of the slide show. This can be done by creating a single .png image, fully transparent in the area where the images will be with your semi-transparent shadow along its edges. Using absolute positioning and z-index, place this image either above or below the slide show. Make the images in the show without alpha channel opacity, making them fully transparent where you want the shadow to be.