E-com DevBlog Spider-ball-vacuum

jQuery pngFix

One of the greatest jQuery plug-ins that I have stumbled on has been the pngFix plugin.  This fantastic piece of code takes your png images and applies the AlphaImageFilter logic to make ie6 actually display them with the correct transparency (not that nasty gray-ish stuff)  When I found it, I was ecstatic, when I first tried it I was overjoyed!  Then I tried to develop with it.

While this may be uncommon for most users, it has a severe bug.  In fact the bug was mentioned on the creator's blog in the comments by one unfortunate user (Dj) who ran into the same thing I did.  The problem arises when you use a png as a clickable object, or even as a background where your clickable object is going to be.  As near as I can tell, when the pngFix executes, it grabs all the png files on the page and runs then through the image filter and then slams them back down on the page.  On top of all of your links... on top of everything.  I tried changing the z-index of my links, I tried changing the png image from a background to an img-tag.  Nothing worked.  I had almost given up hope (as there was no answer posted on the blog) when I found another site that mentioned the problem.    Someone in there (Elbert Oh) had commented that they had found a possible solution and pointed users towards this site for examples.

By using the example site, I ended up with a working solution (this will be deployed in the new ProForm site)

Here is an example of the solution (with the correct code in place)

Here is the header image that will link back to the homepage

<div id="logo"><a href="http://www.proform.com"><span>ProForm.com</span></a></div>

Seems simple enough right? Here's the css that I used.

#logo {
	margin-left: 531px;
	height: 90px;
	background: url('images/logo.png') no-repeat scroll 0px 3px;
}
 
 
#logo a {
	display: block;
	width: 459px;
	height: 90px;
	position: relative;
	z-index: 1;
}
 
#logo a span {
	display: none;
}

What you should be able to see here is that I set the logo appear on the right side of the page (hence the fatty margin-left). Then I set the height of the object, and finally pointed it to the png image that I'm using as a background (that without the fix would be picked up, filtered, and then slammed back down on top of my clickable area).

I made the link take up the entire image area by making the display a block and setting the width and height to the same dimensions as the image. Then there's the real magic of making this work. setting the position to relative, and then setting the z-index to 1. ((POSSIBLE BS ALERT)) Somehow the positioning gets tweaked when the transparency filter is applied and that is part of the reason for the links becoming unclickable. By setting the position to relative, and then setting the z-index to 1, it forces the image to stay where it is and leaves the links clickable. That may not be what is actually happening, but I think that's what's going on...

Anyway with those small changes, the site* is now working with clickable links and png images in ie6, ie7, Firefox 2, Firefox 3, Safari 3.1, and Opera 9.5 .

*The development site on my local server, not the actual ProForm.com as we have not launched the new site yet