There are times when you wish there was a clean, elegant way to go about a thing and there are times, as we all know, when this just isn’t possible. Such, is my state of mind at present. We all know what it’s like to take something that is beautiful and clean, and have to bend and contort it to work in environments it really shouldn’t be subjected to. Such is the peril of the web designer and developer. And such is the profound necessity of standards.

In times like this, I can’t help but wish we, as designers and developers, had something for our practice, akin to the good old tennis ball hack.

Without a doubt, I’m ranting about Internet Explorer. I know, it’s a tiresome subject, but we, nevertheless, exhaust countless, valuable hours contending with the legacy Microsoft left behind.

I won’t blame Microsoft, entirely, for the recent neglect I’ve shown this blog. I’ve been buried in the final preparations, for the launch of the colossal project I’ve been working on for the past months. At the end of this stretch, starting in October of last year, and after roughly a dozen meetings and 160 odd, independent email strings, I think it’s understandable how spending the last 5 hours and 15 minutes trying to figure out why Internet Explorer would not except ‘click’ events and in the end discovering a simple switch to a ‘mousedown’ event worked fine, had me little feathers, a wee bit ruffled.

Don’t get me wrong, I was ready to cry like a little girl when I happened upon this senseless solution, but I’m not the type to easily let things go, not understood. So is life with IE.

The funny thing in all this, is I couldn’t stop thinking about the brilliance of the tennis ball hack and how wonderful it would be for us developers facing off with Internet Explorer, if we had a similar, beautiful solution to IE short comings. The fact, however, is that we are the tennis balls to the IE walker, in this equation.

Unlike our gainful pursuits in web standards, the tennis ball hack has not enjoyed the same glint on the horizon. In fact, rather than improve the design of the walker, as to not require the cannibalized tennis ball, companies have bloomed to capitalize on this age old hack and take something away from the masses and a stab at the beauty of accessibility.

Alas, the parallels with Internet Explorer and the web design community are uncanny. I digress. It’s a beautiful, chilly day in San Francisco and I am off to try to catch the end of Preemptive Media’s presentation on Air, at Southern Exposure. Enjoy the weekend, and if you have a chance, pick up a can of tennis balls just for fun. You never know when you might need to erase black scuff marks from the tile or rescue your keys from inside your locked car.

In the process of redesigning a site for a client, I stumbled into my long lost, woeful friend PNG. Actually, I shouldn’t be so hard on PNG. We all know who’s fault it really is. There are a ton of sources out there, offering solutions for the IE bug, but I needed something a little more comprehensive and involved a little less leg work.

My research led me to numerous sites, offering solutions to my PNG woes. Most of which either built upon or reiterated the techniques Michael Lovitt discussed in this article, way back in the day.

For all the of the progress we’ve seen with IE7 (which DOES support transparent PNGs), we’re still left with the fact that it’s just a carrot dangling on a stick for a while more. We still have to deal with its predecessor and thus, I needed a clean solution that would do the leg work for me.

Ping back PNG forward

To start with, there is a very simple solution to get IE6 to properly render transparent PNGs, using the Microsoft AlphaImageLoader. For simple tasks, I prefer to do this strictly using CSS and an IE6 conditional statement.

/* IE6 PNG transparency FIX {--MEH!--} ----*/
* html #nav ul li {background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader »
(src="http://www.domain.com/img/myPNG.png", »
sizingMethod="scale");}

(Line wraps are marked » -Ed)

This method of handling PNGs usually does the trick, for simple application. It’s concise and easy to implement. On an individual basis, it’s perfect. I should mention, there are two ways you can define your sizingMethod. The first, “scale” (shown above), is perfect for some repeating background images. There is a drawback. It works great for 1px by 1px images and 1px images for x or y repeats, but for tiling images you get some unappealing distortion happening. The other value for sizingMethod is “crop”. This is for non-repeating background images.

the All-Around PNG

This time, however, I needed something that would do a little more of the leg work for me. I needed something that would handle all of my PNGs at once. I stumbled across this article by John Labriola, which proved to be the best solution for my needs. He worked off of a solution Drew, of All in the Head and came up with a stream lined approach, using minimal JavaScript. Check it out.

Based on sleight he uses a simple function that loops through document.all to find all of your background PNGs and fix them. You can download his updated version of bgsleight.js here.

Better dropdowns and hidden divs, using transparent PNGs

Now you’ve got all you need to make sexy dropdowns, hidden divs, icons and whatever else you come up with.