Category Archives: Transparent PNGs

Supporting Transparent PNGs in IE6 for Plone 3

I’m working on my first Plone website.  I created a simple style for the site using transparent PNG files.  It looked great on IE7+, Chrome, Safari, Firefox.  I wasn’t sure whether it was necessary to still support IE6, where the transparent PNG files are not supported out-of-the-box.  The website was for Computer Architects so they probably all have more recent browsers, but not everyone follows the latest curve, so I went a step further with my design.

There are several options for supporting transparent PNGs in IE6.  Here are the details about the one I selected:

Supersleight JQuery Plugin

I only had a couple of images in my banner that I was concerned about.  One was an in-line image.  The other was a positioned back-ground image for which this wasn’t the best option, as it doesn’t work with positioned background images.  Darn.

Understanding what the code was doing wasn’t so difficult – uses JavaScript to add a css “filter” rule to inline and background images in IE6 and IE5.5 browsers, since “filter” is not in the W3C CSS specification.  What I needed to do was figure out how to use a jQuery plugin within Plone 3.  Turned out it wasn’t too difficult.  Yeah!

First, jQuery is automatically included in Plone 3.  I needed to download the script file I was using and put it into my custom theme’s template folder.  Once I had that completed, I needed to update the logo template in the browser folder to call the JavaScript function on my single inline image – jq('#portal-logo').supersleight().  Then I needed to register my script in the theme’s profiles/default registry file (jsregistry.xml) (from Nabble), copy the x.gif image to my theme’s skins/images folder and restart my server.

Now I need to use an alternative method to help out my background image because of the positioning.  I’m planning to create two images (one PNG and one GIF) and switch between them based on the user’s browser.  We’ll see how it goes.