This post will cover backgrounds (for DIVs) and transparent images (.PNGs)

As we ALL know; IE6 poses far too many challenges for designers, resulting in seperate stylesheets and hacks.
I found the need for a transparent background with links on top of it, in Firefox & Safari (and IE7) PNGs are supported, so all worked fine, but when tried with IE6, Yea, there were PROBLEMS! No PNG support and links within the transparent window disappeared.

There are links to the PNGs and Demos at the bottom of the post.

This is the difinitive way to make transparency work with all browsers!

CSS code for STANDARD supporting browsers (Firefox, Safari).

.transparent {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 250px;
border: 1px solid #000;
 
background: url('../images/blackTransparent80.png');
 
z-index: 1;
}

CSS code for IE6 (hack). this is put in the style-sheet as well.
(The ‘*html’ only works on IE and is ignored by all other browsers.)

*html .transparent {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 250px;
border: 1px solid #000;
 
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/blackTransparent80.png', sizingMethod='scale');
 
z-index: 1;
}

This code is the code for the DIV

<span style="position: relative; top: 1px; left: 1px;">
<a href="http://nodstrum.com">nodstrum.com</a>
</span>
<span style="position: relative; top: 90px; left: 270px;">
<a href="http://blue44.com">blue44.com</a>
</span>
<span style="position: relative; top: 200px; left: 70px;">
<a href="http://teenfirst.com">teenfirst.com</a>
</span>

Here are the links to my pre-made transparent backgrounds and the demos.
Transparency Demo – White
Transparency Demo – Black
White 80% Transparent PNG (1px x 1px)
Black 80% Transparent PNG (1px x 1px)

Enjoy!