PNG Transparencies – 3 Solutions to Try

There are loads of solutions out there on the Internet for tackling IE6 PNG transparency bugs. Throughout my search, I found these three solutions to be the most effective, and (perhaps just as importantly) easiest to implement.

I was able to use all of these solutions collaboratively to solve the IE6 PNG transparency issues that I was facing.

1) IMG tag transparency issues

Any PNG files used as the src for IMG tags that have transparency in them, will require you to refer to the pngfix.js file. This file, and instructions for its use can be found here.

Basically, add the pngfix.js file to your scripts folder, and reference it as follows (don’t forget to modify the src attribute in the script tag) from your master page:

<!--[if IE 6]>
<script defer type="text/javascript" src="/Style Library/McCain/Scripts/pngfix.js"></script>
<![endif]-->

Simple as that.

2) background-image css property transparency issue

If you have any background-image css properties that refer to PNG images with transparency, then you will need the DD_belatedPNG.js file from here , as well as the latest JQuery library from here.

This solution is slighly more involved than solution 1, and may even crash your browser if there are multiple overlapping background images (see solution 3 for help with this).

Anyhoo, when it does work, it does the trick nicely, so here is how to use it.

Firstly, acquire DD_belatedPNG.js and jquery.js, and place them both in your scripts folder.

Secondly, refer to them both within your master page as follows (don’t forget to modify the src attributes in the script tags)


<script type="text/javascript" src="/Style Library/Scripts/jquery.js"></script>
<!--[if IE 6]>
<script defer type="text/javascript" src="/Style Library/Scripts/DD_belatedPNG.js"></script>
<![endif]-->

Now, you will need to create a new js file that calls the functionality within DD_belatedPNG.js, and refer to that within your page as well (put the script reference just under the reference to DD_belatedPNG.js above, and all should be good).

This new js script should contain code that resembles the example below


$(document).ready(function()
{
DD_belatedPNG.fix( '#elementId);
DD_belatedPNG.fix( '.css-class' );
}

Where #elementId and .css-class are example selectors that will get you the elements that are having the issues with their background-image. You can make as many such calls as you want, but you must make a call for each of the elements that needs addressing.

If this isn’t clear, please let me know (james.ellins@creative-sharepoint.com). Failing that, refer to the website for DD_belatedPNG.js here.

3) Give up and use GIF files instead

PNG files produce much smoother transparency effects than GIF files, but GIF files don’t seem to encounter the same problems in ie6 that PNG files do. So, if no other solution will do, try this.

For starters, create and link to a separate style sheet just for IE6, and have elements within that style sheet that use GIF images for the background-image property instead of PNG images.

Example code taken from a project of ours is shown below.
This bit is from the master page, referring to an IE6-only style sheet.


<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/Style Library/CSS/CSP-IE6.css" />
<![endif]-->

This next bit is from within an IE6-only style sheet. The example shown below refers to GIF images for the background-image properties, whereas in the main stylesheet PNG images were used.

This example is for tabbed navigation in SharePoint. Trying to use solution 2 for this particular scenario caused IE6 to crash.


#mcn-SiteBar .mcn-TopNavItem td
{
background-image:url("/Style%20Library/Images/right_btn_corner.gif");
}
table.mcn-TopNavItem
{
background-image:url("/Style%20Library/Images/left_btn_corner.gif");
}

And that’s it. Hopefully, armed with these three different approaches, IE6-induced transparency effect misery will be a thing of the past.

Good Luck