WebAppers

/ best free open source web resources /

Shopify

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

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

49 Comments
  • http://billbolte.com Bill

    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

  • http://www.drbizarre.net Dr. Bizarre

    pretty nice !

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

  • http://www.phazm.com/notes/ Jon Hughes

    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

  • http://www.destiny-denied.co.uk Daniel

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

  • Edwin

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

  • http://www.hallumssystems.com T.L.

    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

  • http://www.pisake.com pisake

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

  • http://www.pisake.com pisake

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

  • http://www.Scorpiono.com Scorpiono

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

  • http://www.XGhozt.com/ XGhozt

    It doesn’t work as well as the .htc hack.
    http://www.twinhelix.com/css/iepngfix/

    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.

  • http://www.Scorpiono.com Scorpiono

    Any statistics about global IE6 usage ?

  • http://oh.gd Charles

    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:
    http://www.bestmortgagedeals.co.uk/

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

  • http://www.ceritus.net/~mosquito/solefald_web/sprite-test_iefix2.html mosquito

    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.

  • http://www.8gen.com 8GEN

    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.

  • http://www.yahoo.com Avinash

    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!

  • http://www.golpesdepincel.com evertt de sousa

    VERY NICE

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

  • http://www.samirkamble.com samir

    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.

    Regards,
    Sam.

  • 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;
    }

  • http://www.artiajans.net Ajans

    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?

  • http://www.katekdesign.com Kate

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

  • 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

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

    http://cubicspot.blogspot.com/2010/01/transparent-png8-is-solution-to-ie6.html

    http://cubicspot.blogspot.com/2010/03/pseudo-transparent-24-bit-png-in.html

    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

  • http://technologiesreview.com/ technology review

    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

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons