Transparency

[Barrucadu]

How would I make a table have a semi-transparent background, but one of the cells have a fully opaque background?

I know you can do it in ie:

<table height="200" width="200" bgcolor="#FF0000" style="filter: alpha (opacity=50);">
	<tr>
	     <td style="position: relative;">Woo! Opaque!</td>
	</tr>
         <tr>
	     <td>Woo! 50% Opaque!</td>
	</tr>
</table>

How would I change that code to work in other browsers?

 

[andysyme]

Warning: Very cheap and nasty, but all I could come up with at the moment

<table height="200" width="200" border="1" style="filter: alpha (opacity=50);">
	<tr>
	     <td bgcolor="#FF0000" style="position: relative;">Woo! Opaque!</td>
	</tr>
         <tr>
	     <td bgcolor="#FF0000" style="-moz-opacity:.40;">Woo! 50% Opaque!</td>
	</tr>
</table>

I have left your IE handling as is. I use the -moz-opacity for firefox. However, I had to style each cell individually. Have a play and you'll get the idea!

There must be a neater way, just haven't found it yet!

Andy

 

[Barrucadu]

FOUND THE CODE

<style>
/*Transparency*/
#one {
	position: relative;
}
#two {
	z-index: 5;
	position: relative;
}
#thr {
	background-color: #FFFFFF;
	border: 1px solid black;
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>

<div id="one">
<div id="thr"></div>
<div id="two">
Content Goes Here
</div></div>

Demo: http://www.white-knights-templar.com/phpBB2/index.php

The CSS method dosnt work in IE, so i'm going to have to mess around with it until it does...

 

[BeZazz]

i did a code "years" ago which may help it is here
http://pbsupport2.proboards29.com/index.cgi?board=codes&action=display&thread=1094952802

it appears that board is closed to non members(i havnt been there for ages)

EDIT: oh well i tried to paste the code here but the forum wouldnt allow me

1. You have included too many images in your signature or in your previous post. Please go back and correct the problem and then continue again.

Images include use of smilies, the vB code

 

[Barrucadu]

Woo! I got it working!

Here is the IE, Firefox and Opera version:

<style>
/*Transparency*/
#one {
	position: relative;
}
#two {
	z-index: 5;
	position: relative;
}
#thr {
	background-color: #FFFFFF;
	border: 1px solid black;
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>

<comment><div id="one">
<div id="thr"></div>
<div id="two"></comment>
<!--[if IE]><table width="100%" cellspacing="0" cellpadding="10" border="0" align="center" style="filter: alpha (opacity=50);background-color:#FFFFFF;"><![endif]-->
<comment><table width="100%" cellspacing="0" cellpadding="10" border="0" align="center" style="background-color:#FFFFFF;"></comment>
<tr>
<td><!--[if IE]><div style="position:relative;"><![endif]-->
Content Goes Here
</td></tr></table>
<comment></div></div></comment>