16 Jul

Another PNG Fix for Transparent PNGs in IE 6

Information

Leave a Comment

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.

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

Sponsors

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

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact