Nice script and solution.
If you are CSS coder, you've probably ran in to png transparency problems many times. Even Microsoft is having problems with it http://runonce.msn.com/runonce2.aspx open in IE6. So I'll tell you few problems and solutions I've handled so far.
First one is if you need just simple transparent image, without some special needs for example backgrounds etc. The solution would be png fix. I've used it many times but it has lots of faults, for example with padding, margins and absolute positioning. Sometimes i can mess up the rest of your JavaScript files, but anyway very useful script. You can download it here http://homepage.ntlworld.com/bobosola/pngfix.js and just include it in your <head> tag
<!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]-->
The second one can partly handle issues from first and it's pure CSS solution. I mostly use this for backgrounds, because if your path for a background is from CSS file then png fix can't handle it.
.someelement { background-image: url(images/image.png); } * html .someelemen { background-color: #333; back\ground-color: transparent; background-image: url(images/blank.gif); filter: progid:DXImageTransform.Microsoft. AlphaImageLoader(src="images/image.png", sizingMethod="scale"); }
I found this very useful, and also when you add some hover effects for example some color or other image. You can see live example here
NOTE: This simple hover is just example and it doesn't work in IE6
.someelement:hover { background: #333; } .someelement:hover { background-image: url(images/image2.gif); }
Only problem I had with this was with <a> tag, link just don't work (when it's in div with this kind of background) and i don't know why (talking again for IE6). And only solution i could think of was to place another absolute div over it for the links, content etc... Yes i know it's not elegant but it works if content is not dynamic.
Luckily more and more people are starting to use IE7, and i must say i have recently switched too, i had to have IE6 because of testing my code and when i found out for Multiple IE program I switched immediately 
Have some feedback? Leave a commentNice script and solution.
Good Script. thank u 
автор, хорошо пишешь, продолжай в том же духе
Nice looking site you’ve got here. Thanks for the tip!
This is a great script to solve the .PNG issues in IE 6.
Thanks for your work and for your comment
I love this blog, thanks
Thank you. It’s good for me.
When I want an image with a transparent background and knowing that PNG’s don’t work in IE6, I will save the image as a GIF with no background and that works just the same as a PNG.
INTERFERENCE FOREIGN TRADE web environment
We offer all products with the best service initiatives, improving the quality of service the products you ihtal web environment provides a detailed way. Category dedicated to the product range with the desired structure, providing convenient access to products from our web site to review the order or request for information from the contact form to reach us
Play Free Online Games, sports games, massive multiplayer games, action games, puzzle games, flash games and more, casual games.
Hi. Thank you for your CSS Hack. But does it work for old navigators ?
I could have workaround using IE filters but that defeats the purpose of image caching as images are filtered per instance not per image.
Instead I went the simple route. IE6 uses PNG8 transparency just fine. It is just index transparency not alpha transparency which sucks.
Solution use photoshop to save PNG24.
Then open with fireworks and save as PNG8 with alpha transparency. (photoshop wont do this.)
Final Result. Beautiful alpha on modern browsers. And ugly index transparency (GIF Style) on IE6 with no CSS hacks.
Trey (Web Standard CSS) Brister
Nice, I will try transparent pictures next time
thank you
Thx
thank you
this helped me so much! Thank you…
What works perfectly with IE? That’s the question! Thank you for interesting article! Take care.
Thank you
Best Posting
What works perfectly with IE? That’s the question! Thank you for interesting article! Take care. Luke
and one more thing, where ever you are using float links are working so try to float rest of content that should help
I love this blog, thanks.
There’s always problem with IE alpha deadlock… What a crap!
I’m using pngfix.js now, didn’t know it had issues. I totally ran into the css bg png issue not rendering… thanks for this article. For my css bg tricks, i’m going back to good old gifs for the time being
exelente muchas gracias !!!
Dostum cok gusel css Birazda türkce yazsanız daha iyi olmucakmı
Thanx
I love this blog, thanks.
I’m using pngfix.js now, didn’t know it had issues. I totally ran into the css bg png issue not rendering… thanks for this article. For my css bg tricks, i’m going back to good old gifs for the time being.
thank you nice sharing
There’s always problem with IE alpha deadlock… What a crap!
@ Luke
Well everything from this, just use on or another for different things as in text
What works perfectly with IE? That’s the question! Thank you for interesting article! Take care. Luke
Be aware that IE6 can deadlock when using the AlphaImageLoader. I wrote about it at http://blogs.cozi.com/tech/2008/03/transparent-png.html
There is a great solution, which fixes a lot of issues with ie6 and lower. And implements png transparency.
I found it by chance through an article over at 24 ways. Its by Dean Edwards:
And there is a google.code page to it:
http://code.google.com/p/ie7-js/
it has worked fine for me so far
There is another way, and it even works for PNG in CSS backgrounds.
http://www.twinhelix.com/css/iepngfix/
regards
Thanks a lot…
Just tried it and it works…oh my oh my… I got stuck on it for 1 and half day, thanks again.
Cheers.
Have a good day
jerome
and one more thing, where ever you are using float links are working so try to float rest of content that should help
Hi Jerome,
I’ve looked at your site and the problem is in position:relative;
Header and footer links are working but content wrapper is relative and all inner divs. So just change that and let me know if it’s working
Also you can post your question on KnowHow forum for more help
Hi there,
I got a prob with pngfix.js that works well and takes out all the errors of pngs when rendering in IE6 but the prob is that my links now do not work in my main content. http://www.gbackup.co.za.
Tried everything and cant find a sol..
Please can anyone help???
To make the links inside a div with a transparent background work, just add:
.someelement a {
position: relative;
}
@ Erik
Well you just treat it like regular image, for example
background: url(image.png) top left;
Hi, did you know any way to use background-position with png transparency on ie < 7?
You’ve seem to forgotten about the wonderful js library IE7
@ Stan
Yes you are right thanks for pointing it out, but i thought it will be obvious without ; at the end of the row
Hi Dejan, can you tell me if this “AlphaImageLoader(src=”imag..” is in same row as “filter: pro...” ? I guess it is?
Thanks, for the great article, I also had few png problems and this helped me figure some of them out.
Wow,thanks. I didn’t know about this solutions of png transparency problems…
on February 8, 2010
Thanks for the script. Looks nice.