what is the best way to fix IE6 png trancparency with javascript and Jquery

Question

is there any simple way to fix IE6 PNG transparency with javascript and jquery with out using any plug-in or something too complicated ?

Answer 1

I would suggest using a transparent gif if IE6. On page load, do a browser detect, and set the image src in javascript as appropriate.

Answer 2

• iepngfix
• ifixpng
• DD_belatedPNG (doesn't use jQuery though)

Answer 3

You can use this small plugin to do it for you:

http://jquery.andreaseberhard.de/pngFix/

However the main solution is build around the filters which are included in the IE rendering engine. These can be added by css or javascript.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img.png");

Answer 4

Ive had success using this (IEPngFix). Its a custom behavour that you can use by doing something like this...

<style type="text/css">
    img, div { behavior: url(iepngfix.htc) }
</style>

There online tutorial is here.

Answer 5

There are many different ways of fixing this problem but one of the nicest and lightest way to fix the transparent PNG problem in IE6 is by using DD_belatedPNG. This lightweight but powerful Javascript library adds Transparent PNG image support to IE6 and is only 5.5KB in size so it won’t have a large impact on your website’s loading time. It’s simple to set up and it will fix CSS background-images as well as <IMG/> elements.

see more details here http://www.cre8ivecommando.com/ie6-png-fix-transparent-png-image-support-for-ie6-174/

Answer 6

The jQuery pngfix plugin fixes all PNGs, which is a complicated proposition and likely more power than you need. It fixes:

• IMG tags
• CSS background images
• INPUT buttons that are images

To really answer your question, I'd need to know what all you need fixed, specifically. For example, if you only care about CSS background-image (likely if you're just doing soft drop shadows), then I'd recommend simply copy n' paste of the 8 lines from that plugin.

 // fix css background pngs
 jQuery(this).find("*").each(function(){
  var bgIMG = jQuery(this).css('background-image');
  if(bgIMG.indexOf(".png")!=-1){
   var iebg = bgIMG.split('url("')[1].split('")')[0];
   jQuery(this).css('background-image', 'none');
   jQuery(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='scale')";
  }
 });