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
- Brushes (11)
- Buttons (15)
- Color Schemes (15)
- Fonts (29)
- Forms (65)
- Icons (56)
- Patterns (20)
- PS Tutorials (7)
- Stock Photos (18)
- Tables (18)
- Announcement (46)
- Best Collections (1)
- Code (29)
- eCommerce (14)
- Framework (92)
- Hosting (11)
- Information (96)
- Inspiration (26)
- Legal Documents (7)
- Reviews (8)
- Security (12)
- Social (17)
- Sound (6)
- Stats (25)
- Tools (96)
- Webmail (12)
- BSD License (35)
- CC License (83)
- GPL License (122)
- LGPL License (31)
- License Free (390)
- MIT License (151)
Search Site
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 2007 WebAppers
Sponsored by NetDNA Content Delivery Network
Recommended Books for Web Developers
Interesting. I’ll definitely be taking a look into this. Thanks for the heads-up.
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.
[...] Otra opción para PNG transparente en IE6. Muy fácil de usar y sin siquiera pesar 1kb. 0 # [...]
pretty nice !
[...] Another PNG Fix for Transparent PNGs in IE 6 | Web Resources | WebAppers (tags: ie6 png javascript fix) [...]
Does this allow background repeating of semi-transparent images?
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?
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.
[...] 参考网站：Another PNG Fix for Transparent PNGs in IE 6 [...]
[...] Another PNG Fix for Transparent PNGs in IE 6 Otra forma de ver los png transparentes en IE6 [...]
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.
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.
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:
http://www.bestmortgagedeals.co.uk/
[...] Another PNG Fix for Transparent PNGs in IE 6 | Web Resources | WebAppers 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. (tags: http://www.webappers.com 2008 mes6 dia25 at_tecp PNG IE6 hack) [...]
I uh…I don’t think it’s working correctly for me :\
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?!
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
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!
VERY NICE
[...] Via WebAppers. [...]
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.
Does it allow transparent PNGs to stretch (in ie6 ofcourse)? I hope not.
Thanks – I’m grateful for this solution – works a treat in IE6 and very simple to implement. I agree with Samir entirely
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.
[...] able to fix it. I used the fix from project atomic but you need a blank.gif file which I got from here. Both sites are really helpful and I thank them for their [...]
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!
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!
Thanks
sweet – worked like a champ on the first try! This will make my life so much easier!
still doesn’t allow for links
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
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.
Thankx! this is great
Thanks, this works.
One thing I noticed in IE6 it does not fix transparent rollover images if you created them in dreamweaver navigation option
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
RSS feed for comments on this post · TrackBack URI