IE6 PNG Fix for Images and Backgrounds
I talked earlier this week about some of the shortcomings of IE6. One of the most frustrating shortcomings is the lack of PNG support in Internet Explorer 6. PNG files are incredibly useful and their usage opens many more transparency options allowing for more flexibility in design. All new browsers have full PNG support, the only problem is there are still a large number of users that use Internet Explorer 6. As much as I would love to ignore those users, this is not a practical strategy for most business to business websites.
For quite some time there have been PNG fixes. There are some that use CSS and CSS hacks. I have had moderate successes with these. One problem is that with a lot of these you have to specify an image size. This unfortunately doesn’t work well with some dynamic elements as you may or may not know the image size. Technically, you can get this size with a little programming but I would rather have a more robust fix. This led me to several varieties of JavaScript PNG fixes. I have tried most of the common ones including bgSleight and the jQuery fix. Most work adequately but none have offered all the solutions we need. At Zipline, Sheldon and I created a PNG fix that actually works really well although not perfect. Technically, we didn’t create a PNG fix but instead we combined solutions from a several other PNG fixes to create one capable of doing regular PNG images and PNG background images even in embedded CSS. The code is a little messy but it works, if you want to clean it feel free.
The only known problem with this fix is that it has occasional problems rendering links over a background image in IE6. This can be especially troublesome with PNG navigation. This seems to be most pronounced when the background image is repeated. We have tried to solve this problem but as of this time we don’t have a good solution. If you happen to have a solution for this problem we would love to hear about it. Please send me an email or drop me a comment. Otherwise you’re welcome to use this as needed, if you make it better please let me know we would love check out any positive modifications. Good luck!
Download: IE6 PNG Fix for Images and Backgrounds
No related posts.
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Hey thanks for the fix, but I do have a question, when i used this, some of my png images used in the html file didn’t size right, I think they went to the image size instead of my defined size. Should that Happen? Do you just need to make images be the exact size?
hi! im new in scripting. I have a problem on onmouseover and onmouseout images. if start with a fresh page, the png’s are transparent. but when i do a mouseover, it has a white border around the image and it stays that way forever even if the mouse is out of the image. can you help me solve this? thanks you very much!
To Ryan:
Its really awesome… Good Work.
To Mike:
Its depending upon your image repetaion. If you havent specified repeat for your background, in the function fnFixPng() pls change sizingMethod=’crop’ instead of sizingMethod=’scale’ that would solve the size variation issue….
Thanks & Regards
Ramanan Kalirajan
This transparency problem played havock on website presentation who was using IE6 and the graphics (which were suppose to wow) became what made me look like a moron as I didnot know about this silly problem.
If you set your anchor links that are over a png background to position:relative that seems to help.
Also, there’s a better explanation of it here: http://www.hrunting.org/csstests/iealpha.html
Thanks for sharing your code.
Seems to work on my site. Replaced my old one with this one.