Is there a css definititon to make cross browser opacity?
Yes.
I found this, and it seems to work:
div.opacized {
opacity: .50; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=50); /* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
-khtml-opacity: .50; /* Safari 1.x */
-moz-opacity: .50; /* FF lt 1.5, Netscape */
}
If you want a background image with css opacity, you have to make two div, the first with the opacity and the second one css positioned over the first:
<div id='container' style='position:relative;width:600px;height:200px;overflow:hidden;'>
<div class='opacized' style='background-image:url(image.jpc);position:absolute;top:0px;left:0px;z-index:1;width:600px;height:200px;'> </div>
<div style='position:absolute;top:0px;left:0px;z-index:2;'>
normal text over opacized background
</div>
</div>
Your site is most definately worthy of a bookmark, thanks