Alpha PNG Backgrounds in IE
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.
