/ best free open source web resources /

Graphic Resources

Another PNG Fix for Transparent PNGs in IE 6

Posted · Category: Information

We always have IE6 whining about how you should be using an obtuse “filter” attribute, causing all those nice, pretty pngs on your page to go whacky. There are some scripts available for solving this problem, e.g. IE PNG Fix from TwinHelix, Javascript IE PNG Fix, Transparent PNGs in Internet Explorer 6 from 24 ways. Now Unit Interactive has shared us Unit PNG Fix and bask in the the glorious phosphoresence of your PNG images with the following major features as well.

  • Very compact javascript: Under 1kb!
  • Fixes some functionality problems with 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.

Unit PNG Fix

Demo: http://labs.unitinteractive.com/unitpngfix.php
License: License Free

  • Interesting. I’ll definitely be taking a look into this. Thanks for the heads-up.

  • jess

    I was all excited, tried it, and it messed up the images on my site. I’m using some alpha-based PNGs as CSS backgrounds, and the script messed them up in the display. Disappointed. :(

  • Pingback: Otra opción para PNG transparente en IE6 — Tablosign()

  • pretty nice !

  • Pingback: links for 2008-07-16 | JeremiahTolbert.com()

  • Does this allow background repeating of semi-transparent images?

  • chestah

    nope it doesn’t
    it’s just more compact and doesn’t need class declaration like iePNGfix

  • Awesome, looks like a good solution – what is browser compatibility like?

  • Edwin

    Sounds good, I’ll take a look at it :)

  • Sounds promising. I’ve been encountering IE6 issues with transparent PNG’s used in backgrounds, so I’d like to check it out.

  • Pingback: at 专注css,js特效 - lee的博客()

  • Pingback: En el tintero Vol.3 – Vacaciones | ZaRQuN.com()

  • this is awesome. it’s the best solution I found so far.
    Thanks for bring this up!

  • the best solution so far… I am really aprreeciate to bring this up.

  • Ahhh, cheers – one question though, do I need to pre-set the width and height as I had to with iepngfix.htc?

  • It doesn’t work as well as the .htc hack.

    That just recently was updated to also support transparent divs. In my opinion, it’s much better. However, you could cleverly weave the best of both into one epically awesome ie6-fix-hack.

  • Any statistics about global IE6 usage ?

  • I use the HTC behavior hack through an IE6-only conditional comment on my site, and it works perfectly. It doesn’t use any CSS class, and just applies the behavior to every image.

    You can see it on the animated clouds, and the parallax tree (try changing your browser width) on my site:

  • Pingback: rascunho » Blog Archive » links for 2008-07-25()

  • I uh…I don’t think it’s working correctly for me :\

  • El Mariachi

    FYI, this fix doesn’t seem to work with the CSS-sprite technique (just squeezes the background image into the space of the containing block.

  • Doesn’t work?!

  • Brian

    This worked like a charm! Thanks for the great script. The only issue I encountered was that the images were distorted in a mootools script (specifically a 3d carousel). Not complaining, tho.

  • good

  • Danny

    This seems to be the only js fix that worked for us in IE6, highly recommend it. We were using another one from googlecode that caused the PNG to delay for about 5 seconds before it finally became transparent. This one is very clean, plus it doesn’t cause other js issues we had with a dropdown menu in IE6 (probably due to the code being so small)

    Thanks again, definitely a lifesaver!


  • Pingback: Rešitev za transparentne PNG-je v IE 6 - Em3r10.com()

  • Hello Ray,

    This png fix worked like charm. In fact this is the first IE6 png fix plugin which has been working so smoothly with me for first time.

    Many thanks for this lovely script.


  • Dominykas

    Does it allow transparent PNGs to stretch (in ie6 ofcourse)? I hope not.

  • Jay

    Thanks – I’m grateful for this solution – works a treat in IE6 and very simple to implement. I agree with Samir entirely :)

  • Bhushan

    I have a page which gets its layout from a css file. Everything else is working fine thanks to you excellent work.
    however there is one page where there is a form inside a div tag which is unclickable. After a lot of trial and error i am still unable to get this problem resolved.

    Would you be able to please help me?

    the ccs class with the problem is show below:
    the problem is being caused due the property “overflow: auto;” cause it works if i remove it. However i absolutely require this to have a huge form scroll in a small div tag. Any help is extremely appreciated.

    .center_Panel_reverse {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    color: #333;
    background-image: url(images/center_panel_reverse.png);
    background-attachment: fixed;
    padding: 0px;
    height: 600px;
    width: 600px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    position: relative;
    overflow: auto;

  • Thanks you too much, this is working very good.

  • Pingback: Daniel Mundra, computer science through a wolf’s eye » IE6 PNG Bug()

  • Shona

    Excellent, this worked perfectly for me :) Thank you. Ps. I had broken links at first because I didn’t realise the JS had the clear.gif set to “images/” but once I found this it worked fine. Thank you!

  • mary

    This thing works only for those png images that are left aligned. On a project i’m working i have 2 png images right aligned and it seems that it’s just not working. What do you say about this?

  • Like what I see! You have hooked it up like a mofo.
    Seriously, I thought all hopes for my site working in ie6 were over, but it’s all ok now! Well…mostly! :)

  • NIck Wilcox

    sweet – worked like a champ on the first try! This will make my life so much easier!

  • kelly

    still doesn’t allow for links

  • Pallav Sharma

    m using the script in drop down menu shadow but it makes the links unclikable and omits the multilevel menu

    Some body help me please

  • AustinKir

    This is the only fix that would properly display my background images. THANKS. Only problem is it doesn’t work with links well, or with hover images… keep up the great work.

  • Mohammad

    Thankx! this is great

  • Peter

    Thanks, this works.

    One thing I noticed in IE6 it does not fix transparent rollover images if you created them in dreamweaver navigation option

  • val

    I have had tons of issues with IE6 when working on my site http://www.todaysbestmortgagerates.co.uk
    We still have some problems left so I’m defintely going to give these scripts a try :-)

  • Alternate Approaches

    There are two recently-discovered, alternate approaches that developers should try before going the full-blown, Javascript hack route:



    I’ve gotten great mileage out of PNG8 images. It works really well for small images such as icons and images that generally have very few colors. The other approach works well for high-color images on solid backgrounds.

  • Brazon

    Worked on first try!!! A+ Thanks a million :P

  • arun

    This site has many PNG images which are not coming in IE6.

  • Peter

    This thing really screwed up my site. It did fix my PNG’s though XD

  • Great resource I am excited to try it out Thanks for sharing

  • Barakkath

    IE png fix is not working for the css sprite images. pls suggest me.

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons