Transparent PNGs in IE without javascript

Everyone who has given a shot at designing a webpage probably knows this; IE6 (and older IEs) don't play well with PNGs; not when it comes to transparent PNGs at least.

Even though the new IE 7 supports PNG transprency, that is not the end of our troubles, there still lots of people using IE6.

There are numerous solutions (scattered around on the web) for this problem using either javascript or .htc files (essentially javascript for IE only). Javascript will only work when the javascript is enabled. Solutions that rely on .htc file will not be blocked when javascript is disabled but, still they give you another extra file that you need to maintain and really the transparency happens only after the page has fully loaded (that is how most script are set to run).

I have discovered (not really me, but I don't remember where I have actually found it) that using the following in you IE css

//filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, xsrc='logo.png');

can help you overcome the IEs problem with PNG transparency.

You should use it within conditional IE statements so only IE will read it and do one more CSS trick so that IE does not see the regular background CSS rule.

Take a look at a test page that I have prepared. Resize your browser to see that it actually does work as intended.

I meant to put the few lines of code that make a difference here but I can't make wordpress display them correctly, so you have to dig in the source of the test page yourselves (look at the last 10 lines before the closing of the head tag).

I have tested this with IE5.5 and IE6 and IE7 and FF2 and it works OK. I would be glad to hear in other browsers that does or does not work.

Unfortunatelly it does not work with IE5 (and so do all other similar solutions), since AlphaImageLoader was first included in IE 5.5.
For similar solutions take a look at Dean Edward's IE7 PNG transparency script and Klaus Hartl's PNG alpha transparency; They are actually more flexible but they only work when javascript/jscript is enabled on the client's computer.

Category: 

7 Comments

You shouldn't forget, that if ActiveX is disabled in IE, this doesn't work either.

Yes Klaus you are right, did not think of that.

If the "binary and scripts behaviours" in your "internet options - security settings" is set to disable this does not work.

I guess one can never be 100% sure that their script will run.

Annnddddd the path to the PNG is relative to the HTML page, not the CSS doc... its a little nasty one - especially if you have pages in other folders :¬)

Saying that I have been using this technique for almost 2 years now and it is a great simple way to overcome IE6 being etc...

WOW,

All that with all those exceptions to do the same thing that is easily done with the old reliable .gif.

I am not saying that PNG's don't have an advantage, its just the .gif's still work for my needs.

Looking for a solution to my png problems I began looking deeper into gif development and found that if you use matte on a transparent gif, it will do the trick for things like lettering on a textured backgrounds. PNGs are fantastic though, and I hate having to come up with alternative because of Internet Explorer. EVERYBODY DITCH THEIR IE AND START USING FIREFOX!

One of my painfull experience, i always have to enable my active X control and IE always ask again n again for installing activ X.It must be an auto feature in IE but its not i think microsoft think tank should take step on this issue.Great post !

I am Very thank full the owner of this blog. Becouse of this blog is very imformative for me.. And I ask u some thiing You make more this type blog where we can get more knowledge.