Fixing PNG Transparency Issues for Internet Explorer (SharePoint Edition!)

Portable Network Graphic (PNG) files have an issue when rendered in IE 5.5 up through version 6, have an issue with displaying transparency, and renders the transparency in gray.

Microsoft has a KB article regarding the issue here: http://support.microsoft.com/kb/294714however, this requires you to enclose the PNG within a DIV, and you would need to do this for each one… there are more elegant and efficient ways to accomplish this.

While this is not a SharePoint specific issue, my world centers around SharePoint solutions, and I run into this often. The best resource for this fix out there is located here: http://homepage.ntlworld.com/bobosola/index.htm

There are numerous ways to get this into SharePoint, to name a few…

• Create a Content Editor Web Part, either link to pngfix.js or place the code within the web part on the page which contains one or many PNG files with transparency.

Download here:
http://cid-b06529fd3fc75473.skydrive.live.com/embedrow.aspx/SharePoint/Internet|_Explorer|_PNG|_Transparency|_Fix|_Web|_Part.dwp

• Link to the pngfix.js, or just put the contents of the JavaScript file within a master page (which is what we’ve done at our website – www.grace-hunt.com) which can be seen if you view the source of any page within our website