Semi-Transparent Table, Opaque Contents

[Barrucadu]

If you want to make a table that is semi-transparent, but with fully opaque contents (example here), use this code. I have tested it with opera 9, firefox 1.5 and ie 6.

<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>

Yep, you guessed it, all those non-standard tags are needed by IE (<comment> what kind of stupid idea is that...)

 

[kleszcz]

wow.... it's cool! Rep added. I will implement the code for my website later.

Have you already tested in firefox 2 it is just released? Currently Im going to install new version.

 

[Barrucadu]

Havent tested in FF 2, because for some reason it isnt working on my laptop..

But here is an online preview of it:
http://www.white-knights-templar.com

 

[kleszcz]

I have just installed FF2 and working fine. No problem. Great coding.

 

[kleszcz]

working on ie7 also...

 

[3l3ctr1c]

Wow was looking for this thanks, I think we may supply a php if-else for the IE/FF and echo the code accordingly.

 

[DocCRP]

Hi, I was wondering if anyone could help me concerning this script...

I tried it out, and it wasn't transparent, but then I noticed the transparency code was under "thr" instead of "two" so I switched those in the section just before the table (so that the order was one, two, thr). This made the table transparent as hoped for, but the content was then transparent as well instead of solid.

I'm not sure what's not working for me, because I go to the TC's example and it shows up perfectly, transparent table and solid content (although, it looks as if the title text may also be transparent, but it's hard to tell, and I don't know if it's intended...but everything else is solid). And the TC has the code in the example exactly as it's posted here (without the switch I made for the "thr" and "two"). So I'm not sure why it doesn't work for me.

I'm using Opera 9 to view both the example and my own local file.

 

[beaver6813]

Looks great on FF2 Rep+