Another IE and Opacity Issue

[ianq]

Howdy,

Trying to understand how opacity works with IE, and how to get my web page coded to my liking. Needless to say, everything I try works with FF, but IE is definitely a challenge.

I want to use opacity on the page to note what isn't available to users (photos). As the CSS code points to many objects in the page, can't set opacity there as it would impact all the objects whereas it might only be 2 or 3 I want to set opacity on.

I'd like the following html/css code to work with IE: (I added the zoom and width=100 to setopac as per stuff I read about tricking IE, but they don't work.)

.setopac{filter:Alpha(Opacity=20);-moz-opacity:.20;opacity:.20; width:100%; zoom:1;}
.phsbord06{BORDER:1px #FFFFFF solid;padding:5px;font-weight:bold;position:absolute;top:180px;left:125px;}
.phstitle09{color:#887;font:12px arial,verdana,sans-serif;position:absolute;top:282px;left:-73px;width:160px; text-align: center;}

<div id="about-layer">
<span class="setopac">
<img src="img/phmain6.jpg" alt="Coming Soon" border="0" class="phmbord6">
<span class="phmtitle9">Coming Soon</span>
</span>
...

The above doesn't work at all with IE, works fine with FF. It doesn't seem to apply the setopac style to the 2 elements.

If I do the following, it works in IE.

.phsbord06{BORDER:1px #FFFFFF solid;padding:5px;font-weight:bold;position:absolute;top:180px;left:125px;filter:Alpha(Opacity=20);-moz-opacity:.20;opacity:.20;}
.phstitle09{color:#887;font:12px arial,verdana,sans-serif;position:absolute;top:282px;left:-73px;width:160px; text-align: center;filter:Alpha(Opacity=20);-moz-opacity:.20;opacity:.20;}

<div id="about-layer">
<img src="img/phmain6.jpg" alt="Coming Soon" border="0" class="phmbord6">
<span class="phmtitle9">Coming Soon</span>

or it works in IE this way too, by moving the opacity style into the html code as:

<div id="about-layer">
<img src="img/phmain6.jpg" alt="Coming Soon" border="0" class="phmbord6" style="filter:Alpha(Opacity=20);-moz-opacity:.20;opacity:.20;">
<span class="phmtitle9" style="filter:Alpha(Opacity=20);-moz-opacity:.20;opacity:.20;">Coming Soon</span>

My workaround is to set the opacity per image/text in the html code, but it just looks ugly, would much prefer to get the setopac css style to work.

Any ideas? Thx...Ian

(my web page is http://www.quickmire.com/photomain.html )

[infinityspiral]

I've had really good luck with this js library. It's very small and fixes opacity issues without having to mess with filters and stuff.

http://labs.unitinteractive.com/unitpngfix.php

Good luck!