StylizedWeb is a web design trends and tutorials blog, maintained by Ross Johnson who also runs a web design company and design blog.

Categories Archive

Popular Posts
Advertisement
Premium WordPress Themes, Theme Galaxy Basecamp
Najbolje ponuda IT poslova u Srbiji na itposlovi.info Advertise on Stylized Web

A brand new PNG fix for IE6

add to Save to Delicious Save to Stumble Save to Digg

It's been a while since last PNG fix for IE6 got out and as I've written back then it's not quite perfect and a bit buggy with the rest of JavaScript but now here's another one from Unit Interactive Labs, very fresh and promising, one of the first products of this company.

Also the second product so far from Unit Interactive Labs is a simple and useful tool tip rollover (named as UniTip) which also uses their PNG fix and it is very popular and used a lot these days over the web. Nice work Unit Interactive!

Unit PNG Fix

PNG fix

In their words this new png fix is inspired by work of 24ways.org, and here are some key features why you would use it. As far as I've tested it so far it's working fine.

  • Very compact javascript: Under 1kb!
  • Fixes some interactivity problems caused by IE’s filter attribute.
  • Works on img objects and background-image attributes.
  • Runs automatically. You don’t have to define classes or call functions.
  • Allows for auto width and auto height elements.
  • Super simple to deploy.

So as you see progress has been made, talking about background-image and auto height elements. To include it use standard procedure, download JavaScript (you can do it directly here) and put it between <!--[if lt IE 7]> and <![endif]--> in head tag. And there's a new thing, a small image "clear.gif" which in their words "keep certain elements structurally sound when using the filter property" so you'll need to change path in the JS afterwords .

UniTip

Tool tip

Another project worth a mentiong and also using their PNG fix is UniTip. This is now based on Craig Erskine’s qTip, It supports all browsers, is easy to deploy, and is surprisingly light-weight. Best of all: it offers you the opportunity to customize it to work well with any of your projects.

  • Vertically expands to content.
  • Can accept HTML.
  • You can apply UniTip to specific classes or tags.
  • Adjusts to sides and bottom of page.
  • Unit PNG Fix included in the zip to automatically fix pngs for IE6.
  • Easy to customize and deploy! Friendly with other scripts!

Installation is also simple, after a download include JavaScript and style in your head tag. For more information visit UniTip page.

Have some feedback? Leave a comment



What do you think?





34 Responses so far

By Simon Hellin
on March 7, 2009

I’ve just posted a great png fix tool on my bog (simonhellin.be) it’s very easy to use and it uses javascript. When you add an that a png you just do and it works! it also works for background-image in css!

By Vladimir Vujosevic
on August 21, 2008

I just have to add that Twinhelix v 2.0 Alpha PNG fix is much better than this one, and with additional .js it supports background position and repeat. It’s awesome.

By Dejan Cancarevic
on August 20, 2008

Carlo,
well you know, it would be about time to retire it (IE is abou6 7 years old right?) but yesterday i was at my friends and he is still using ie6 as well as old FF on both of computers so people (average internet users) just don’t know, and probably most of them don’t care about developers
I personally don’t care about it as i used to. I just use css reset and after that it comes to one or two lines of hacks for it

By carlo amoroso
on August 20, 2008

What’s about retiring IE6 from the scene (visit savethedevelopers.org )? If you want to see a brand new ‘Blue ray recorded movie’… you need the right player. So it should be for brand new “css3 / html5″ websites… you can see / read content with “old” browsers but can’t “enjoy” the “special effects”! ;-) But you can get for free the right player (IE7, FF, Opera, Safari… ) so no excuse anymore. :-P

By Vladimir Vujosevic
on August 13, 2008

hvala :)
png i ie6 me izludjuju :)

By Dejan Cancarevic
on August 13, 2008

moze i srpski naravno ;) evo kopiracu ti ceo jedan kod sto ja koristim u jednom sajtu.

#header .featured{
width:555px;
background:url(images/black.png) left top repeat;
}

* html #header .featured {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/black.png’, sizingMethod=’scale’);
}

* html #header .featured *{
position:relative;
}

I ovo kod mene savrseno dobro radi, reci mi samo ako ti treba objasnjenje koda

By Vladimir Vujosevic
on August 13, 2008

yeah but for example lets say you have to use background-position: bottom; .. etc ? could it work that way with AlphaImageLoader filter? or it just have to be div with fixed width and fixed image size i how do you make re sizable boxes with background png images in IE6?
moze i na srpskom ako ti je lakse :)

By Dejan Cancarevic
on August 12, 2008

for bg’s i don’t use regular and then just apply positon relative for IE6

* html #header {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’black.png’, sizingMethod=’scale’);
}

By Vladimir Vujosevic
on August 12, 2008

hm does this one works with background positioned pngs ? twinhelix didnt work for me since pngs went out kinda distorted and not in position as set in main css file…

By Dejan Cancarevic
on August 8, 2008

Rob,
use position:relative for your container and that should fix it

By Rob
on August 8, 2008

Figured one issue out! using: img { display:block; }
has made the images reappear, w00p!

By Rob
on August 8, 2008

One issue I’ve come across on this pngfix is that using the images for links causes all sorts of problems in IE6. I’ve set a few images with links, some display and some disappear!!? I’m slightly confused as to why! Another thing is that I currently have a footer div with no css styles on it with text and an image inside. The whole div is not displaying?? When I remove the javascript its all back to normal… Anyone got any ideas???

By DoZ
on August 1, 2008

I have a whole post on “using transparent PNGs on IE5″:
http://www.dozarte.com/wordpress/2007/12/01/usare-png-trasparenti-su-ie6/
…but it’s in Italian!

By sal
on July 29, 2008

Also, regarding Twin Helix, a recent alpha of their iepngfix (17 July 2008) resolves the issue of positioned background images not working usually associated with most classic IE PNG fixes.

http://www.twinhelix.com/css/iepngfix/

By Dan
on July 28, 2008

At first I thought enabling the png fix on certain elements was cool (in twinhelix), but it just gets annoying to troubleshoot after a while (htaccess problems, several different files, etc..).
This is a chill, one stop shop for ie6 png fixing. Thanks for the link!

By jayhan
on July 28, 2008

This is far most the best pngfix i ever used. But it’s not perfect yet though… sigh IE6.

By kai
on July 28, 2008

are you guys serious? twin helix has been around for years and has always supported bg images. it also uses blank.gif which is nothing new. http://www.twinhelix.com/css/iepngfix/

By Mohsen
on July 28, 2008

I didn’t know :)
Thanks

By Kim Guanzon
on July 28, 2008

Awesome… been looking for a solution that works with BG images as well. Thanks for your work!

By Dejan Cancarevic
on July 27, 2008

i know ;)

By Mark
on July 27, 2008

heh yes you are right Dejan, it’s been quite a while since last png fix was out!

By Saly
on July 27, 2008

wee, something finaly that works with backgrounds!

  1. May 27, 2009: Primerjava JPG, GIF in PNG formatov slik za internet | .: TRSplet - internetne storitve :.
  2. May 26, 2009: Creating Consistently Colorful User Experiences: Part 2, The Medium | UX Booth
  3. Apr 14, 2009: IE6 - Time to go the way of Old Yeller | cnp_studio_Blog
  4. Oct 27, 2008: pokcer texas hold
  5. Sep 7, 2008: Новый PNG фикс для IE6 | Дизайн и не только
  6. Aug 1, 2008: C'est les vacances !! Mais je ne vous laisse pas seul. | TSPS
  7. Aug 1, 2008: Interesting Articles #7 » DivitoDesign - Webdesign Blog
  8. Jul 28, 2008: links for 2008-07-28 :: What else is new?
  9. Jul 28, 2008: Awesomoto » Blog Archive » New IE6 PNG Fix
  10. Jul 28, 2008: A brand new PNG fix for IE6 | StylizedWeb.com | wind(the)frog(dot)net
  11. Jul 28, 2008: Unit PNG Fix: Nuevo parche para PNG en IE6
  12. Jul 28, 2008: ArtsLab