I hope this will serve as a reference for people to get all of the the info they need in one place and not have to visit two or three sites. Without further adieu let us begin.

I want to start off by saying that I think retrofitting for older browsers (yes IE 6 and below are too old) is a bad idea. We should be moving forward with our development in CSS3 etc... while making sure the older browser are still readable. They do not necessarily need to look the same. Now, with that said, I work as a web developer and know that this idea is rarely accepted by designers and clients alike. I just wanted to get my feelings out there because that is the whole point of this blog. On to the method already.

Wait for it...

The CSS

* html #id {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image_name.png',sizingMethod='scale');}

yep! That's all it is. No fancy javascript, no special image name with transparency behind it, nothing. Throw that in your IE style sheet or right below your 'good browser' statement in your screen style sheet and you will be good to go. Remember: the path is relative to the page you are on, not the CSS file. So absolute path to the image is probably the best way to go.

Notes

As always there are some things to be aware of when using the filter method. If you make sure to follow this rule, you will save yourself a lot of headache. On the element your are using the filter. DO NOT set a position. On any element inside of the element with the filter, DO set position to relative.

(eg.) If your transparency is on your wrap div, do not set a position. Set position relative on your content div and all items within content will be OK.

Now your links and text will be clickable and selectable.

<div id="wrap">
<div id="content">
<h1>Site Title</h1>
<h2>Tagline</h2>
<p>Some <a>long-winded</a> content with a link</p>
</div><!--end #content-->
</div><!--end #wrap-->

#wrap {background: url(../images/image_name.png);}
* html #wrap {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image_name.png',sizingMethod='scale');}
#content {postion: relative;}

As with all other posts you have read about the filter method. The background image will stretch to fit the element, so there is no background-position usage etc...

If you are unable to use a separate (slightly modified) design to handle your transparency needs for IE then the above method will save you a lot of pain when dealing with them.

Below is the code for a snippet to add the above CSS to your style sheet easily with Textmate or e text editor

create a new snippet
add:

background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/${1:image_name}.png',sizingMethod='scale');$0

to the big block
Activation: tab trigger > iepng
Scope Selector: source.css

Further Reading

• http://www.hrunting.org/csstests/iealpha.html