PNG Fix for Internet Explorer
So everyone has had to put up with using gifs and jpegs which we often find “not to our ideal quality”. There is a issue with IE and using png’s as it places a grey box around the png graphic, in Firefox and Safari this issue is fine.
There is a quick fix which I have been luckily enough to find. It is a javascript file which can be called by the following line of code underneath the
Here is the code:
<script defer type="text/javascript" src="pngfix.js"> </script>
And the file can be downloaded below:
PNG Fix for Internet Explorer
12 Comments so far
Leave a reply
I’ve been looking around for a script like that and haven’t found one, but now that I’m pretending IE6 no longer exists, it’s not a problem.
I used to do the same thing…but it works great now for everything
Hope it helps!
Yo! This thing doesn’t work very well. It still shows that gray area for very small PNG’s. Something I’m missing here?
Hey Phoenix!
How small are we talking here? 16px x 16px? I’m not on a pc at the moment so I can’t test it straight away but give me till tomorrow and i’ll double check. When i have done small images using it, it seemed to be working fine for me.
Also what javascript are you using? The one above?
Yes sire, I’m using the exact JS mentioned here cuz I downloaded it using the link provided here.
And yes, I was talking about 16px by 16px and smaller (around 14px by 12px and similar sizes).
Cool hmm…when i used the same script for png’s that small (16px by 16px) it worked fine for me.
I’ll do a test tommorow for you and let you know how I go with it, I mean it should be working but i’ll post back with what i get :).
Stay tuned it will work.
Hey only me again
I just tested the file with a 10px by 10px file and your 14px by 12px file, and they both come out fine.
Is it stretching your image at all in ie6? Or just showing that annoying box for the transparency?
Feel free to send me a file with the image and i’ll try get it to work for you. My email is apoure01 [at] apoure [dot] [com].
The gifs are being stretched not the PNGs. I’ll be removing the gifs anyway. I just put those childish cartoonish gif icons in my template to mark the placeholders for the custom graphics I’ll be replacing them with in the future.
Those “igloos” in the sidebar show the grey box and that is my only problem. For bigger pngs, the code works just fine. No problems, whatsoever.
And thanks a million for all the replies guys. Really appreciate it.
I’ll be replacing those little “igloos” with custom bgs anyway. So even if this problem doesn’t get sorted out (which is impossible) it won’t be too much of a bother. I just pointed it out so people can know.
Thanks for pointing it out i’ll do some more checks on my side and make some adjustments to try make it a little better and hopefully more reliable for smaller .png’s.
Aye aye sir!
Here is a fix for some common problems with the sizes and smaller png’s:
- Image slightly distorted or not quite fitting to
boundaries. This can usually be solved by searching the code and changing sizingMethod=’scale’ to sizingMethod=’image’ or sizingMethod=’crop’. I chose ’scale’ as this option respects any styled borders on the images. The other options do not, but may render smaller images better.
- Page jumps by a few pixels. In certain circumstances, the script can make the page ‘jump’ upwards, by a few pixels when it runs. This is due to spurious carriage returns in the HTML. In MSIE, these can leave a small space underneath the image, which the script removes once it runs. This has the effect of making the entire page below the PNG ‘jump’ slightly. The fix is to remove any errant carriage returns from your code.
Hope all that helps
Thanks for information.
many interesting things
Celpjefscylc