my slideshow has black bkg showing upon fade transition in IE

[Lisa Haran 7]

Site is http://www.kinlaydublin.ie/ My slideshow background is a transparent PNG upon fade transition between slides a black jagged background appears behind the transparent png in IE only I'm guessing this is the issue as IE cannot deal with PNG's. However is there a way of fixing this issue?

[kastelic 6]

Hmm, not seeing it on IE9, IE8 or IE7 on windows. What version are you using, and perhaps a screenshot?

[Lisa Haran 7]

See on on IE8 and IE 7 on windows, tried few different machines in different location just to be sure, and yes same issue.

[catrina 103]

I looked around for a solution to PNGs in Internet Explorer and found this: http://support.microsoft.com/kb/294714

[Lisa Haran 7]

Hi Catriona, that document is dated 2007, so not really up to date info. Anyone else any other thoughts on this, as I'm sure this is something that has been addressed before. Thanks

[Lisa Haran 7]

I tried linking this script in the custom code header scripts area but still no joy http://www.kinlaydublin.ie/scripts/iepngfix.js

[kastelic 6]

It appears that script is meant for IE6. Here's a post that might shed light on your issue: http://stackoverflow.com/questions/1156985/jquery-cycle-ie7-transparent-png-problem

[Lisa Haran 7]

Thanks Kastelic, but I used that script to test it, as the issue arise in IE 6, 7, 8 don't care about 6 but really need to resolve this otherwise I will have to remove the slideshow as there is no issue with transparent PNG's it just when they are used as a background in the slideshow.

[kastelic 6]

Did you try that jQuery plugin on the link I gave ? If so, did you convert it to compatibility mode which is required for Wordpress?

[Lisa Haran 7]

Hi Katelic, I didn't see a jQuery plugin on the link to download?

[Lisa Haran 7]

http://forum.jquery.com/topic/jquery-cycle-plugin-and-png-transparency-in-ie8-and-ie7 does not have a plugin to download, it is a list of other peoples work around and in most cases they reverted to non-transparent pngs. As I didn't build this site as static site i am finding it harder to find solutions as I have no direct access to the slideshow files other than used FEATURES in the back-end and CSS for styling. if you can recommend anyone who will assist me with this, I would happily pay as this is driving me crazy and I need to resolve this as unfortunately a lot of people still use IE.

[catrina 103]

Here is another solution that can be tried: http://christopherschmitt.com/2007/10/30/png-transparency-for-internet-explorer-ie6-and-beyond/

[Lisa Haran 7]

Hi Catriona, That tutorial is to amend static PNG in IE which is not my issue, all my PNG's appear fine in IE except the PNG that is assigned as the feature backgroun #feature-area .fcontainer { background: transparent url(http://www.lisaharan.com/wordpress/wp-content/uploads/2011/05/slideshow_bkg.png) no-repeat left top; width: 510px; height:330px; } Every time an image (jpeg) fades into transitions the black surround appears.

[kastelic 6]

I'm reading through this thread again, and it just really seems like you should try the jquery code on http://stackoverflow.com/questions/1156985/jquery-cycle-ie7-transparent-png-problem Its seems to be solving the exact same issue you are having. Make sure to convert it to compatibility mode. IE7 and up supports transparent pngs, your issue is slightly different as is talked about on that post.

[Lisa Haran 7]

Hi Kastelic, Don't know what you mean when you say ' Make sure to convert it to compatibility mode'

[kastelic 6]

Here's the doc on that: http://docs.jquery.com/Using_jQuery_with_Other_Libraries