Advertisements

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
    image
Advertisements

About Geoff Varosky
Geoff Varosky is a Senior Architect for BlueMetal Architects, based out of Watertown, MA. He has been architecting and developing web based applications his entire career, and has been working with SharePoint for the past 13 years. Geoff is an active member of the SharePoint community, Co-Founder and Co-Organizer of the Boston Area SharePoint Users Group, co-founder for the Boston Office 365 Users Group, co-organizer for SharePoint Saturday Boston and speaks regularly at SharePoint events and user groups.

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

  1. Parth says:

    looks good! thanks for sharing. Parthparth@SharePointEngine.com | http://www.sharepointengine.com

  2. Tiago says:

    great post!Im trying to make it work but still no luck.The fix works in common pages but not sharepoint portals.Sure you didn\’t do anything else?

  3. Tiago says:

    js script only works for non background-image png images

  4. Navin says:

    Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: