E-com DevBlog Spider-ball-vacuum

19Dec/080

DD_belatedPngFix – A new solution to an aging problem

This has already been reported on several tutorial/dev sites, but I thought I'd put in a word or two about it.  DD_belatedPngFix is a fantastic little piece of work created by Drew Diller.  Drew has taken a unique approach to fixing the many issues that plauge ie6 and png files.  Instead of the standard alphaimageloader he uses just a touch of VML to tweak the images into appearing correctly, this allows for png files to be used as backgrounds and eliminates the annoying problem of trying to click on an image/div/whatever that was in another div with a background set to a png.

I started to set NordicTrack up with this script, but found that it's not quite perfected with objects that have absolute positioning (if anything on the page is a png that is above where your positioning the absolute element, they will build themselves as blocks, then knock each other out of the way), or with png sprites (your roll-over image is zoomed in a little so it appears 'cut-off').  Drew is regularly updating his script (which is awesome) so hopefully he'll have these issues fixed soon. --UPDATE (03/19/2009)! So after doing a bit more research (and a few updates to the js from Drew) this may no longer be an issue. If you remove the "position: relative, z-index: 1" from your png elements (or containers) the dd_belated png fix will work like a champ! NordicTrack has been converted and has been running dd_belated for just over a month now (so go and firebug the code ;) and see how I made it work) with no crazy formatting errors!

So in short, if you need a png fix that is simple, easy, and you don't want to throw "position: relative; z-index: 1" on all your elements that have a png in them (or as a background).  This is definetly something you'll want to check out.

Here's that link again, in case you missed it -> http://www.dillerdesign.com/experiment/DD_belatedPNG/ .

Print This Post Print This Post