Tilted Forum Project Discussion Community

- Tilted Technology (https://thetfp.com/tfp/tilted-technology/)

- - any CSS gurus around? (https://thetfp.com/tfp/tilted-technology/97228-any-css-gurus-around.html)

any CSS gurus around?

I hope so!

have a look at this please: http://www.digitallsd.com/test_css.htm

Okay so in IE it works perfectly. It displays the table background color transluscent over the image background while keeping the contents of the table at 100% alpha. Perfect.

In Firefox however, it makes the table bg AND its contents transluscent. I dont want that.

Is there a work around for this?

I'm no CSS guru, but what happens when you remove all the errors as listed here:

Validator Results?

This Should Work...

<html>
<head>
<style type="text/css">

.transBg{
background-color: #000000;
border: 1px solid #9D6F39;
filter:alpha(opacity=40);
opacity: 0.4;
-moz-opacity:0.4;
z-index: 0;
position: absolute;
}
.transInner {
font-size: 11px;
color: #BA9D7C;
font-family: Arial, Helvetica, sans-serif
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
position: relative;
}
body{
background-image: url(http://images.lottadot.com/shane/pho...l-flower-i.png);
}
</style>
</head>
<body>
<table width="400" height="400" class="transBg"><tr><td> </td></tr></table>
<table width="400" height="400">
<tr>
<td class="transInner" align="center">
<table class="opaqueBg"><tr><td>
<img src="http://images.lottadot.com/shane/photos/flowers/orange-spikey-ball-flower-i.png" height="200" width="200"><br>
This is the test text for this css thing.
</td></tr></table>
</td>
</tr>
</table>
</body>
</html>