PDA

View Full Version : PNG Shadow Not Rendering Properly In IE



ezsolution
04-06-2010, 08:43 PM
1) Script Title: Ultimate Fade-in slideshow (v2.1)
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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

:confused:

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

Thanks

ezsolution
04-08-2010, 01:45 PM
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
04-08-2010, 02:07 PM
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
04-08-2010, 02:22 PM
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.