Suckerfish, Sons of Suckerfish, Sons of Ursidae and IE6

One of the biggest pains of developing for the web is the necessity of having to make sure all of your sites work in Internet Explorer 6, which came out in 2001 and yet is still used by 20% of users (October 2008). IE6 sucks at handling CSS floats and positioning. Most of the issues are resolved by using a Global Reset Stylesheet but I still find myself occasionally running into new problems for IE6, like with the Suckerfish CSS dropdown menu first created in 2003 at http://www.alistapart.com/articles/dropdowns.

Then came Sons of Suckerfish which still didn’t do the job until I came across Sons of Ursidae (http://css-class.com/articles/ursidae/) which has done the job, at least for now.

Gotta run, this post was more of a mental note to myself, sorry!

Transparent PNGs in IE6

For some unknown reason, a significant amount of people still use Internet Explorer 6 as their browser of choice. Since that’s the case, web developers such as myself have to continue to test our websites in IE6 to make sure they work as desired. The majority of the problems in IE6 caused by CSS can be resolved by using a Global Reset Stylesheet and by building in valid, clean code. However, problems still remain, such as IE6′s inability to support alpha-channel transparency for PNG image files.

There are a number of options for getting PNG transparency to work in IE6:

pngfix.js (http://homepage.ntlworld.com/bobosola/pnghowto.htm) – This is the first “hack” I came across a year or so ago and it’s been the one that I continue to use. It’s a simple JavaScript file that seems to do the job for most regular transparent PNG files in IE6. The biggest downfall I’ve had with it is that it does not support the background-repeat property for tiled backgrounds. Also, on the author’s homepage, he explains how the script hasn’t been updated since 2004 so he suggested to try out the SuperSleight filter.

SuperSleight (http://24ways.org/2007/supersleight-transparent-png-in-ie6) – I’ve also used this before but it’s a bit awkward and clunky since it uses a proprietary filter called AlphaImageLoader. It might be worth looking into if you’re looking for something that has been updated more recently than 2004, but it still does not support the background-repeat property, which is the only reason I would not use the initial pngfix.js.

IE PNG Fix (http://www.twinhelix.com/css/iepngfix/) – This one uses CSS behaviors, which is a custom Microsoft extension to CSS. It apparently also uses the AlphaImageLoader filter that SuperSleight uses. Most importantly, the IEPNGFix v2.0 Alpha version found on the test site apparently now supports the background-repeat property. If that’s the case, then I have found a new PNG fix! I haven’t used it yet but once I do, I’ll update the blog with my observations.

Until Microsoft requires users to update their browsers from IE6, we will always be presented with the problem of PNG transparency. Hopefully, the options above will help!