apoure.com web blog | development. design. flash.

development. design. flash.

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

  1. Dirk Gadsden (Esherido) June 19th, 2007 9:31 pm

    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.

  2. George June 20th, 2007 2:31 pm

    I used to do the same thing…but it works great now for everything :)

    Hope it helps!

  3. Pulkit Sachdeva (PhoeniX) June 20th, 2007 5:38 pm

    Yo! This thing doesn’t work very well. It still shows that gray area for very small PNG’s. Something I’m missing here?

  4. George June 20th, 2007 9:37 pm

    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?

  5. Pulkit Sachdeva (PhoeniX) June 21st, 2007 7:46 pm

    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). :(

  6. George June 21st, 2007 10:30 pm

    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.

  7. George June 22nd, 2007 9:15 am

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

  8. Pulkit Sachdeva (PhoeniX) June 22nd, 2007 8:33 pm

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

  9. George June 24th, 2007 10:53 pm

    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.

    :D Can’t wait to see your final work…post up a URL when you finish! :D

  10. Pulkit Sachdeva (PhoeniX) June 25th, 2007 4:30 pm

    Aye aye sir! :D

  11. George June 29th, 2007 11:16 am

    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 :)

  12. celpjefscycle January 12th, 2008 9:17 am

    Thanks for information.
    many interesting things

Leave a reply