Privacy Policy
Mar 14


All we have met a problem when display a PNG image on IE within transparent background, right? So, today i will list out some ways that i know to fix the PNG transparent displayed on the IE 6 and below.

Using js

bobosola script:

Download Here - Then inlucde this code to your file:
<!--[if lt IE 7.]><script defer type="text/javascript" src="pngfix.js"></script><![endif]-->

Note the use of the defer keyword. This trick causes the images to be replaced before they are rendered. Earlier versions of this script did not use this method, occasionally resulting in an unpleasant screen flicker as the PNGs were being filtered. The code in the include file is slightly different from the copy and paste code referred to above, so I recommend downloading my file rather than making your own.

Here is a demo page using the Include file method. This method is arguably better for use with multiples of pages, as it only requires three lines of code per page. The JS file is only 2KB in size and will be cached after the first download. It will therefore incur no further download overhead on subsequent pages. The download time should be around 0.3 seconds on an average 48kbps dial-up modem connection.

——-

Dean Edwards Solution:

IE7 is a JavaScript library to make MSIE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6.

IE7.js

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]-->

IE8.js

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->

You do not need to include IE7.js if you are using IE8.js

PNG
The script only fixes images named: *-trans.png

Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.

Download: http://ie7-js.googlecode.com/svn/version/

Using Behavior

First you will need to download these two files, and upload them to your web server: msie.htc & blank.gif

Then add this CSS in between the “head” tags of your web document:

@media screen { img { _behavior: url(msie.htc); } }
If you want to apply to other elements, list the elements along with img. Try and keep the number of elements modified low- as this requires DirectX to work, and it eats memory.

Other ways

Sleight solution using the original AlphaImageLoader to fix the PNG background by including it into the js file from Drew Mclellan .

Download bgsleight.js

SuperSleight solution developed by 24ways from Sleight solution with some new features:

  • Works with both inline and background images, replacing the need for both sleight and bgsleight
  • Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
  • Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
  • Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
  • Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.

Download SuperSleight

<!--[if lte IE 6]><script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->

There’r still some ways to fix PNG transparent on IE, but i think it’s enough. Becoz i also can’t find any solution that can fix displaying PNG Transparent on IE for both single image, background image within link and text area. I also recommend using Dean Edwards Solution instead of Sleight, SuperSleight or the others becoz of its loading speed and other features of that script..



45 Responses to “How to fix PNG Transparent on IE?”

  1. Av- Says:

    Thanks for your effort of compiling this amazing list!

  2. Korny Says:

    You might want to check out http://blogs.cozi.com/tech/2008/03/transparent-png.html?cid=106552420 - which discusses some problems with AlphaImageLoader, which is ultimately what all these methods call, one way or another.

  3. Starry Nebula Says:

    Thanks for the helpful tips!

  4. melvin Says:

    Thanks tutorial added

  5. omg I hate IE Says:

    I wasn’t aware of this issue (because I use chrome) until I did a test of my design.. then I find out it is next to impossible to fix it.
    I’m using a PNG in an IFRAME.
    works with every other browser, except IE.
    If you could bottle the feelings I have right now, you could sell it to protesters for the next G8/G20 summit.
    Seriously Microsoft, Die!

  6. pro gain trial Says:

    Your style is very unique in comparison to other folks I’ve read stuff
    from. Thanks for posting when you have the opportunity, Guess I will just book mark
    this web site.

  7. EndoRev Says:

    You made some really good points there. I looked
    on the web to learn more abouut the issue and found most
    individuals will goo along with your views on this site.

  8. how to get rid of cellulite Says:

    wonderful issues altogether, you just won a new reader.
    What may you recommend about your submit that
    you just made some days in the past? Any certain?

  9. siêu thị mẹ và bé lừa đảo Says:

    Hey there! I simply want to give you a huge thumbs up for your great information you have right here
    on this post. I will be coming back to your web site for more
    soon.

  10. reklama lubin odrodzenia Says:

    I needed to thank you for this very good read!! I definitely loved
    every bit of it. I have you bookmarked to check out new things you post…

  11. spirit.vn Says:

    Right away I am going away to do my breakfast, once having my breakfast coming over again to read additional news.

  12. Black Pussy South Africa Says:

    Black women are very unique and, they are a very various type of females.
    There are so numerous stereotypes associated with black girls and, you will discover the
    ladies extremely amazing. Black girls have a dark skin and, they are understood for their nature of
    being aggressive. It is really intriguing how black girls have the tendency to stimulate curiosity and debate.
    The women can be discovered in all parts of the world and, the most popular black girls are
    African Americans. African women are known to be simple and
    very calm. Since they have similar functions, it often ends up being
    really hard to tell the ladies apart physically. African
    American girls are children of previous servants who were
    generated from Africa, years ago. They have a long
    history of battle and final victory. The black area
    in America has actually needed to battle many fights simply to be heard.

  13. Nigerian Black Pussy Says:

    Black ladies are really exotic and, they are a really
    various breed of ladies. There are so numerous stereotypes linked with black women and, you will
    discover the ladies extremely interesting. The ladies can be discovered in all parts of the world and, the most popular black girls are African Americans.

  14. clenbuterol weight loss Says:

    hello there and thank you for your info – I have definitely picked up something new from right here.
    I did however expertise a few technical points using this web site, as I experienced to reload the web
    site a lot of times previous to I could get it to load properly.

    I had been wondering if your hosting is OK?
    Not that I am complaining, but sluggish loading instances
    times will sometimes affect your placement in google and can damage your
    high quality score if advertising and marketing with Adwords.
    Anyway I am adding this RSS to my email and could look
    out for much more of your respective exciting content.
    Make sure you update this again very soon.

  15. https://www.facebook.com/pages/Clash-of-Clans-Cheats-and-Hack/1432310080335863 Says:

    Hi! I could have sworn I’ve visited this website before but after looking at a few of the posts I realized it’s new to me.
    Anyhow, I’m certainly happy I found it and I’ll be bookmarking it and checking back regularly!

  16. Phat Black Pussy Tumblr Says:

    Black girls are very unique and, they are an extremely different type of women.
    There are many stereotypes connected with
    black girls and, you will find the girls extremely amazing.
    Black ladies have a dark skin and, they are understood for their nature of being aggressive.
    It is really interesting how black women have the tendency to stimulate curiosity and argument.

    The ladies can be found in all parts of the world
    and, the most popular black ladies are African
    Americans. African women are understood to be extremely calm and simple.
    Due to the fact that they have comparable features, it typically becomes
    very difficult to tell the females apart physically.

    African American girls are children of previous slaves who were brought in from Africa, several years earlier.
    They have an extremely long history of battle and final victory.

    The black community in America has needed to battle numerous fights
    just to be heard.

  17. auto-colorizer for google plus and facebook Says:

    It’s very easy to find out any matter on net as compared to textbooks, as I found this paragraph at this site.

  18. google ads plus advertising Says:

    Pretty great post. I simply stumbled upon your blog and wanted
    to say that I have truly enjoyed surfing around your weblog posts.
    After all I will be subscribing to your rss feed and I am hoping
    you write again soon!

  19. http://szybowiec.dzwon.net/ Says:

    I would like to thank you for the efforts you have put in penning this blog.
    I am hoping to check out the same high-grade blog posts from you in the future as well.
    In fact, your creative writing abilities has motivated me to get my own site now ;)

  20. towels by gus Says:

    Hello Dear, are you truly visiting this web page on a regular basis,
    if so afterward you will definitely obtain nice knowledge.

  21. pakar seo indonesia Says:

    I like the helpful information you supply on your articles.
    I’ll bookmark your blog and test again right here frequently.
    I’m relatively certain I will learn many new stuff proper here!

    Best of luck for the next!

  22. best garage door openers Says:

    Woah! I’m really loving the template/theme of this blog.
    It’s simple, yet effective. A lot of times it’s difficult to get that “perfect balance”
    between usability and appearance. I must say you have done a very good job with this.
    In addition, the blog loads very fast for me on Safari.

    Exceptional Blog!

  23. clash of clans triche Says:

    I love your blog.. very nice colors & theme. Did you design this website
    yourself or did you hire someone to do it for you? Plz answer back as I’m looking to design my
    own blog and would like to know where u got this from. appreciate it

  24. clash of clans triche Says:

    I love your blog.. very nice colors & theme. Did you
    design this website yourself or did you hire someone to do it
    for you? Plz answer back as I’m looking to design my own blog and would like
    to know where u got this from. appreciate it

  25. clash of clans triche Says:

    I love your blog.. very nice colors & theme.

    Did you design this website yourself or did you hire someone to do it for you?
    Plz answer back as I’m looking to design my own blog and would like to know where u got this from.
    appreciate it

  26. website builder software Says:

    Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my
    blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time
    and was hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to your new updates.

  27. program do rozliczania pit 2013 Says:

    Right now it appears like Movable Type is the best blogging
    platform out there right now. (from what I’ve read) Is that what you are using on your blog?|

  28. hay day hack Says:

    Il est extremely hard de jouer on the web, d’acheter des jeux, parfois m.
    The Fring App is pre-installed on the Premium 8SE and provides free
    video chats, free group video, live texting over the Internet and more.

    the record d’avoir are generally plus grandes element des joueurs de son
    nom.

  29. hay day hack Says:

    Il est extremely hard de jouer on the web, d’acheter des jeux, parfois m.
    The Fring App is pre-installed on the Premium 8SE and provides free video
    chats, free group video, live texting over the Internet and more.
    the record d’avoir are generally plus grandes element
    des joueurs de son nom.

  30. hay day hack Says:

    Il est extremely hard de jouer on the web, d’acheter des
    jeux, parfois m. The Fring App is pre-installed
    on the Premium 8SE and provides free video chats, free group video, live texting over
    the Internet and more. the record d’avoir are generally plus grandes element des joueurs de son nom.

  31. hay day hack Says:

    Il est extremely hard de jouer on the web, d’acheter des jeux,
    parfois m. The Fring App is pre-installed on the Premium
    8SE and provides free video chats, free group video, live texting over the Internet and more.
    the record d’avoir are generally plus grandes element des joueurs
    de son nom.

  32. café vert Says:

    Hey there! I simply would like to offer you a big
    thumbs up for your excellent info you have here on this post.
    I am returning to your website for more soon.

  33. twitter wagershack Says:

    I like the helpful info you provide in your articles. I’ll bookmark your blog and check again here regularly.
    I’m quite sure I’ll learn lots of new stuff right here!
    Good luck for the next!

  34. twitter wagershack Says:

    I like the helpful info you provide in your articles.

    I’ll bookmark your blog and check again here regularly. I’m
    quite sure I’ll learn lots of new stuff right here!
    Good luck for the next!

  35. twitter wagershack Says:

    I like the helpful info you provide in your articles.
    I’ll bookmark your blog and check again here regularly.
    I’m quite sure I’ll learn lots of new stuff right here!
    Good luck for the next!

  36. twitter wagershack Says:

    I like the helpful info you provide in your articles. I’ll
    bookmark your blog and check again here regularly. I’m quite sure I’ll learn lots of new stuff right here!
    Good luck for the next!

  37. queen loft bed plans Says:

    For people who live in shared flats, lofts, student rooms or studio
    flats the bedroom also doubles as the main living area.
    Safety and space are two of the most vital qualities that our children’s bedroom should
    possess. This protective coating helps protect the lumber from the outside elements and also reduces the maintenance on these parts
    because you won’t have to re-stain the lumber or sand it.

  38. small cabin floor plans Says:

    Windows can be jimmied with a screwdriver or broken with a
    rock. You have a great deal more headroom too, and they have all the conveniences of the travel trailer.

    Enjoy a family outing or get a group together
    and share the activities.

  39. small cabin floor plans Says:

    Windows can be jimmied with a screwdriver or broken with a rock.
    You have a great deal more headroom too, and they have all the conveniences of
    the travel trailer. Enjoy a family outing or get a group together and share
    the activities.

  40. Can You Get Pregnant Right Before Your Period Says:

    For most recent news you have to go to see internet and on internet I
    found this website as a most excellent web page
    for latest updates.

  41. best clothes steamer Says:

    I am not sure where you’re getting your info, but great topic.

    I needs to spend some time learning more or understanding more.
    Thanks for wonderful info I was looking for this information for
    my mission.

  42. pet waste bags wholesale Says:

    Hey! I’m at work surfing around your blog from my new iphone 4!
    Just wanted to say I love reading your blog and look
    forward to all your posts! Carry on the excellent work!

  43. best knife sets Says:

    Thank you for another excellent post. Where else may just anybody get that kind of info in such a perfect way of writing?
    I have a presentation subsequent week, and I’m at the search for such information.

  44. Elsword coins generator Says:

    Fantastic web site. A lot of helpful information here.

    I’m sending it to some buddies ans additionally sharing in
    delicious. And naturally, thanks on your sweat!

  45. best knife sharpening system Says:

    Thanks , I’ve recently been searching for information approximately this subject for a while and yours is
    the best I’ve came upon till now. But, what about the conclusion?
    Are you positive concerning the source?

Leave a Reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word

Close
E-mail It