1

I have a site with a lot of bg png images. css like this:

div#carousel ul#slides li.monitor{
  background:url(../images/monitor.png) no-repeat center top;   
  position:relative;
}

and I have jquery and pngfix included as such:

<script language="javascript"> 
  google.load("jquery", "1.6.2");
</script>
<script src="/javascripts/jquery.pngFix.pack.js"></script>

and

$(document).ready(function() {
$(document).pngFix(); 
    ...
})

yet still my pngs do not show up in IE7, IE8, etc. Ideas?

enter image description here

Community
  • 1
  • 1
panzhuli
  • 2,890
  • 6
  • 33
  • 46

1 Answers1

1

jquery.pngfix.js is only for IE 5.5 and 6.0. Internet Explorer 7 and 8 supported 24-bit transparent PNGs natively and do not require a fix. However, there are some specific formats of PNG that IE7/IE8 don't support. If you go with the standard 24-bit alpha transparency, then you'll be fine. But some other variants... not always.

Convert them to 24-bit if they aren't already, and confirm that IE is loading them properly over the network (no 404 errors, etc.).

Jon Adams
  • 24,464
  • 18
  • 82
  • 120
  • If you are still having problem with the images after converting them, can you post the specific PNGs for us? – Jon Adams Aug 25 '11 at 00:44
  • hmm. I'm not sure I'm that proficient with PNG exporting. Generally, I'm exporting from Photoshop with default PNG 24-bit settings (transparency selected). I'll upload a sample to my initial post. And thanks! – panzhuli Aug 25 '11 at 00:48
  • as a note - some of the other 24-bit pngs are working. Is there a limitation on the file size of these??? – panzhuli Aug 25 '11 at 00:52
  • ack. forgot to mention this is in a jquery carousel (using cycle() ) if that matters... – panzhuli Aug 25 '11 at 00:52
  • Those should be the correct types of PNGs. In that case, its my guess that it's not a PNG/transparency display problem, but a JavaScript compatibility problem. Are there any errors in the console? Do those images load correctly when set on plain HTML/CSS not created by the Carousel library? – Jon Adams Aug 25 '11 at 00:58
  • 1
    yes. i believe that's the issue. it hadn't occurred to me that this was the problem, but I found this post: http://forum.jquery.com/topic/jquery-cycle-plugin-and-png-transparency-in-ie8-and-ie7. I suppose my options are to use gifs. oh well!!! thanks for your help - got me on the right track! – panzhuli Aug 25 '11 at 01:00