Semi-Transparent Table, Opaque Contents

Barrucadu · 10-23-2006, 06:57 AM

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.

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>

<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 · 10-24-2006, 02:36 PM

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 · 10-24-2006, 03:47 PM

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 · 10-24-2006, 03:55 PM

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

kleszcz · 11-10-2006, 12:49 AM

working on ie7 also...

3l3ctr1c · 11-10-2006, 02:59 AM

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 · 12-29-2006, 03:18 PM

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.
????: NamePros.com http://www.namepros.com/code/250080-semi-transparent-table-opaque-contents.html

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

beaver6813 · 12-30-2006, 01:34 AM

Looks great on FF2 Rep+

10-24-2006, 02:36 PM	#2 (permalink)
kleszcz Join Date: Jul 2006 Posts: 4,609 Follow @cvul	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. __________________ juegosjuegos Your Hotel in Austria Matratzen Domain Acquisition \| Store all your favorite links! \| Web Proxies Proxy List \| Bookmarks \| Creative Enquiry \| Web Proxy List

10-24-2006, 03:47 PM	THREAD STARTER #3 (permalink)
Barrucadu Senior Member Join Date: Aug 2005 Location: East Yorkshire, England Posts: 2,689 Follow @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 __________________ Website \| Blog Arch Hurd developer; GNU Webmaster; FSF member #8385

10-24-2006, 03:55 PM	#4 (permalink)
kleszcz Join Date: Jul 2006 Posts: 4,609 Follow @cvul	I have just installed FF2 and working fine. No problem. Great coding. __________________ juegosjuegos Your Hotel in Austria Matratzen Domain Acquisition \| Store all your favorite links! \| Web Proxies Proxy List \| Bookmarks \| Creative Enquiry \| Web Proxy List

11-10-2006, 12:49 AM	#5 (permalink)
kleszcz Join Date: Jul 2006 Posts: 4,609 Follow @cvul	working on ie7 also... __________________ juegosjuegos Your Hotel in Austria Matratzen Domain Acquisition \| Store all your favorite links! \| Web Proxies Proxy List \| Bookmarks \| Creative Enquiry \| Web Proxy List

11-10-2006, 02:59 AM	#6 (permalink)
3l3ctr1c NamePros Regular Join Date: May 2006 Posts: 256	Wow was looking for this thanks, I think we may supply a php if-else for the IE/FF and echo the code accordingly. Last edited by 3l3ctr1c; 11-10-2006 at 02:59 AM. Reason: Typo

12-29-2006, 03:18 PM	#7 (permalink)
DocCRP First Time Poster! Join Date: Dec 2006 Posts: 1	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. ????: NamePros.com http://www.namepros.com/code/250080-semi-transparent-table-opaque-contents.html I'm using Opera 9 to view both the example and my own local file.

12-30-2006, 01:34 AM	#8 (permalink)
beaver6813 NamePros Regular Join Date: May 2005 Location: England Posts: 390 Follow @beaver6813	Looks great on FF2 Rep+ __________________ -Beaver6813.com - Web Developer Extraordinaire!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)