Text in div that uses transparecy

HTML & CSS
1

Hi all,
please see this site:
http://mmnkltd.com/assessor/trial02.html
The major problem with this (one problem’s with positioning the right-hand side menu – it’s only got a temporary background-color of green to see what it’s doing but that’s another question.:))

I have a div, “content-left”, that is semi-transparent


	#content-left {
		background-color: #fff;
		opacity:0.4;filter:alpha(opacity=10);
		width: 573px;
		padding: 5px 0px 0 0px;
		margin: 15px 0px 0 0px;
	}

In FF the text in that div is somewhat legible, in IE pretty much not at all.
Is it possible to have the text black as I’m intending it to be?
I tried pulling it out of the div and making another one for the text. But then the container with the background graphic didn’t expand.
Hopefully this is possible.
thanks!

2

Hi,
The trick is to set your opacity styles on an empty div that is 100% width and height of the parent div. That opacity div gets nested in the parent along with another div that contains the actual text after the opacity div in the source order.

Then set position:relative on the text div to auto stack it above the opacity div. That keeps the opacity from being inherited to the text and keeps the text on top.

Here is an Example

View the page source and you should be able to see what is going on, there are comments in the css that explain things. There are some IE6 fixes in there too so pay attention to them. :wink: