Jquery IE6 png transperency fix

Jquery IE6 png transperency fix

Posted on 18. Nov, 2008 by emposha in Featured Articles, Javascript, Jquery

Another Ie6 png fix that use Jquery selectors.  Just include Jquery 1.2.x and jqPngFix for automatic fix of all png images on page.

Performance test for 10 png images on page:

How to use:

<script language="JavaScript">
$(document).ready(function() {
  if ($.browser.msie && $.browser.version == '6.0') {
    jqPngFix();
  }
});
</script>
* This source code was highlighted with Source Code Highlighter.

Download script: jqPngFix.zip

Page:
  • 1

12 Comments

Chris

17. Jan, 2009

Do you have a working example? Could not get it to work on my project – I just got empty images on FF.

admin

17. Jan, 2009

Chris, I have but this project still offline.

slemKaffe

17. Jan, 2009

I couldn’t get it to work either, a working example would be great.

admin

18. Jan, 2009

@Chris & slemKaffe: I added how to call function

Anon

25. Jan, 2009

Added code to header, put the fix in the directory, doesnt work.

Im not a programmer so I dont know what I should be changing to get this to work. If there is, like, one simple line of instructions you could add to help us non-developers out, that would be great.

Matt Cassarino

27. Jan, 2009

This worked great for us, thanks!

One thing, make sure the javascript include of jqPngFix.js and the jquery function that calls jqPngFix() is INSIDE your HTML check for < IE7. If not, we found that ALL transparent pngs were replaced with the blank.gif once the page was fully loaded — not good!

We used the HTML

Manny

08. May, 2009

Hi this does not work with background images, and i am seeing a small ‘x’ replacement image over my transparent png image so what shoudl i do

manny

08. May, 2009

albeit this is a very nice and simple solution well done. please see my test case to see above mentioned issues http://element.co.za/testsites/element/pngfixtest_1.html

thank you kindly

Priyantha

14. Dec, 2009

but can you use this fix to fin (fxxxing) IE6’s PNG icons you are using for hover effect Eg:- If you add a png image for a:hover it will not work…

Thank you very much for your post!
I have a question however:


$(document).ready(function() {
if ($.browser.msie && $.browser.version == ‘6.0′) {
jqPngFix();
}
});

Is this going within or ?

my question was cut off… :(

I was asking if the call function goes into the HEAD or the BODY?

Thank you again!

emposha

28. Dec, 2009

In the body…

Leave a reply