Wednesday, July 22, 2009

IE6 Transparent PNG Fix for Blackbaud NetCommunity

This was a tough one! Mostly because of having to work around the way Blackbaud's CMS, NetCommunity works.

Since we still receive a surprisingly significant amount of traffic from people browsing with IE6, we had to make sure that our nice, slick semi-transparent PNGs were not showing up with the lovely gray-blue background that IE6 likes to put on there.

One nice thing about NetCommunity is it has jQuery built-in, and so I've been really trying to use it for all things Javascript, (which really isn't a hardship since jQuery is so nice and easy to use - up until this point I had been using Prototype mostly).

So, cut to the chase, I was having a problem using Angus Turnbull's great solution, and searching around for a jQuery solution lead me to Supersleight. I uploaded it to a document library in our NetCommunity installation and then also uploaded a 1x1 transparent gif to the image library in NetCommunity.

Finding out the Document ID and the Image ID, I then added the following lines to each layout for our site:

Notice the shim... line points to the image id for the transparent gif. You could change the supersleight plugin, but this is easier and leaves the plugin intact.

But here is the most important part!
The plugin is looking for images with the class "tpng" and with a extension of .png. Since the images on NetCommunity are dynamically generated (i.e. view.image?id=1844) you have to drop down to the HTML in the editor and add &.png to the end of each image. For example:

Of course, the HTML editor will convert the & to & amp;, but that is okay. Still works.

Yes, this is a rather crazy hack, but until that glorious day where IE6 is no longer used, it'll have to do.

No comments: