Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

A brand new PNG fix for IE6

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, 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 .


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.

Leave a comment on Stylized Web Have some feedback? Leave a comment

51 Comments So Far

  1. By Saly posted on July 27, 2008 at 4:34 pm

    wee, something finaly that works with backgrounds!

  2. By Mark posted on July 27, 2008 at 4:34 pm

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

  3. By Dejan Cancarevic posted on July 27, 2008 at 4:35 pm

    i know ;)

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

  5. I didn’t know :)

  6. 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.

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

  8. Pingback: ArtsLab

  9. Pingback: Unit PNG Fix: Nuevo parche para PNG en IE6

  10. Pingback: A brand new PNG fix for IE6 | | wind(the)frog(dot)net

  11. Pingback: Awesomoto » Blog Archive » New IE6 PNG Fix

  12. Pingback: links for 2008-07-28 :: What else is new?

  13. 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!

  14. 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.

  15. Pingback: Interesting Articles #7 » DivitoDesign - Webdesign Blog

  16. I have a whole post on “using transparent PNGs on IE5″:
    …but it’s in Italian!

  17. Pingback: C'est les vacances !! Mais je ne vous laisse pas seul. | TSPS

  18. 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???

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

  20. By Dejan Cancarevic posted on August 8, 2008 at 5:13 pm

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

  21. By Vladimir Vujosevic posted on August 12, 2008 at 4:50 pm

    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…

  22. By Dejan Cancarevic posted on August 12, 2008 at 4:59 pm

    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’);

  23. By Vladimir Vujosevic posted on August 13, 2008 at 9:30 am

    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 :)

  24. By Dejan Cancarevic posted on August 13, 2008 at 9:40 am

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

    #header .featured{
    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 *{

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

  25. By Vladimir Vujosevic posted on August 13, 2008 at 5:27 pm

    hvala :)
    png i ie6 me izludjuju :)

  26. What’s about retiring IE6 from the scene (visit )? 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

  27. By Dejan Cancarevic posted on August 20, 2008 at 10:07 am

    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

  28. By Vladimir Vujosevic posted on August 21, 2008 at 5:22 pm

    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.

  29. Pingback: Новый PNG фикс для IE6 | Дизайн и не только

  30. Pingback: pokcer texas hold

  31. I’ve just posted a great png fix tool on my bog ( 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!

  32. Pingback: IE6 - Time to go the way of Old Yeller | cnp_studio_Blog

  33. Pingback: Creating Consistently Colorful User Experiences: Part 2, The Medium | UX Booth

  34. Pingback: Primerjava JPG, GIF in PNG formatov slik za internet | .: TRSplet - internetne storitve :.

  35. I think there is still some issues when using a Css drop down menu. Absolute position doesn’t appear to be working.

  36. Thanks! I tried a bunch of fixes that didn’t work for my situation. This was easy to implement AND made my png’s attractive for CSS backgrounds with hover. Thanks for the help in making websites look great in multiple browsers!!!

  37. Pingback: 網站製作學習誌 » [Web] 連結分享

  38. By Ce. posted on April 18, 2010 at 1:25 am

    This is broken if using transparent PNGs with the sliding doors CSS technique for rollovers.

  39. %100 Doğal ve hiç bir yan etkisi olmayan Uzamax’ı keşfedin
    UZAMAX içeriğinde mineral ve vitaminler barındıran, doğal bitkielerden üretilmiş gıda desteğidir. İçeriğinde herhangi bir kimyasal ürün bulunmamakla birlikte tamamen doğal kurutulmuş bitkisel bir karışımdır. Sadece birkaç aylık kullanım kürü sonrasında bile uzamax’ın etkisini hissedeceksiniz.

    Uzamax kullanarak doğal yollarla bünyenize gerekli olan tüm besin, vitamin ve mineralleri vücudunuza almanızı sağlar.izlanda yosun hapı

  40. Pingback: PNG fix for BG img in IE6 - DesignersTalk

  41. Nice information. I like it. Thank

  42. it’s really work for background images also….
    Thanks a lot

  43. IE6 is too old
    I love firefox

  44. IE6 is too old

  45. By Pierre posted on September 8, 2011 at 9:34 am

    L2Code.. Your script is written like crap.

    But thanks anyway..

  46. wow amazing i love it ..perfect..

  47. I have recently written this article to show you how to export png 8 in Fireworks.

  48. Hello there, simply changed into aware of your weblog through Google, and found that it is really informative. I am going to watch out for brussels. I will be grateful in the event you continue this in future. A lot of other folks can be benefited from your writing. Cheers!

  49. By jeaneaj posted on January 11, 2012 at 10:58 am

    nice! thanks a lot!

  50. Pingback: PNG ie6 Transparency | Open Cart Know How

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>