filter: alpha for IE transparency and text problem

[dms42]

I'm trying to set the background of a DIV to be a semi-transparent image. Using

filter: alpha(opacity=XX)

I can get it to work in IE as well as browsers that support the PNG alpha transparent image I'm using. Here's my problem -- the text in the DIV box is also opaque. I've tried to use all the kludges I've read about:

1. making another DIV/SPAN, placing the text in it and setting its opacity back to 100
2. making a second statement for the DIV using the random * to reset everything to back to opacity 100
3. made another DIV with a higher z-index so its above the opaque box (and tried this woption with background: transparent, too)

but I still can't get the text to be black (opacity 100)

does anyone have any other ideas?

[DrDoc]

Welcome to Webmaster World!

The reason why you can't reset the opacity is because when you say 100%, it actually means 100% of the 25% (or whatever) the parent is set to. However, there is a reliable, though cumbersome, workaround:

Put a div inside the div you want the transparent background on...
Use absolute positioning and a negative z-index. Then use conditional comments (or the *html hack) to serve the changes to IE.

#opacity {
background-image: url(25_opacity.png);
}
#ieopacity {
display: none;
}
* html #opacity {
background-image: none;
}
* html #ieopacity {
background: #036;
display: block;
filter: Alpha(opacity='25');
height: expression(document.all['opacity'].clientHeight);
left: 0;
position: absolute;
top: 0;
width: expression(document.all['opacity'].clientWidth);
z-index: -1;
}

<div id="opacity">
Some text and contents here...
<div id="ieopacity"></div>
</div>