Transparent PNGs in IE6
Everybody knows that IE versions 5.5 and 6 cannot render a PNG image with alpha transparency correctly. The result is a visible “box” around the image highlighting what is supposed to be the transparent part. In the past I had used the “IE7″ JavaScript that i had found on the web before IE7 was actually released. It involved including a JavaScript file in the header of your page that was responsible for post-processing all PNGs on the page just after page load using Microsoft’s proprietary IE filter: AlphaImageLoader. While that method works fine if you have a webpage or website with many PNG images, I thought I’d share a quicker way to do it inline, should you ever have the need to deal with just a single PNG. This quick little piece of code will write PNGs into your webpage in such a way that Internet Explorer below version 7 will “draw” the image properly with full alpha transparency.
In order to do this we will actually write the image into the page twice - once for IE6 and below, and again for all the other browsers. Here we go…
1 - create a 1 pixel by 1 pixel transparent GIF image and drop that in your images directory (i usually name it “spacer.gif”).
2 - here’s the XHTML to put in the <body> of your document…
<!--[if lt IE 7]>
<img id=”ie6image” src=”spacer.gif” alt=”" style=”filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’myimage.png’, sizingMethod=’image’);” />
<![endif]–>
<img id=”theimage” src=”myimage.png” alt=”" />
* notice how we write the image the first time using Microsoft’s Alpha Image Loader - and how this is wrapped inside IE conditional comments which basically say “if the browser is IE version less than 7″ - then we write the image again the “normal” way for all other browsers.
3 - here’s the CSS to put in the <head> of your document or external stylesheet…
#theimage, #ie6image {
width: 100px;
height: 100px;
border: 0px;
}
* html #theimage {
display: none;
}
* the second style above is the popular * html CSS hack that only IE version 6 or lower will read - telling those browsers to not display the second image.
And there you have it - a relatively simple way to solve the problem of alpha transparency in older versions of Internet Explorer. The best part about this approach is that it uses no JavaScript - just standards-compliant XHTML and CSS.
comments
Leave a Reply
-
stuff i’ve built
-
need my help?
I’m currently available for off-site projects. So, if you’re in need of a client-side guru, or maybe just some help with customizing your own WordPress blog, you can contact me via email by
-
what i'm reading
-
what i'm using
-
what i'm watching
