MTWK
01-16-2007, 07:55 PM
I'm attempting to use the opacity in css for the first time.
I have a div (contenttransparency) a background color set with a transparency set to 50% with a z-index of 100.
I had a second div (content) inside the first div with the opacity set to 100%. It has a z-index of 500.
These are both on top of another div (not shown) which has a background image. I'm trying to fade out the background image.
This works in IE in that get full transparency for the inside div but not in Firefox which still keeps the opacity from the first div. Hope this makes sense.
Why doesn't the content div opacity override in firefox.
Here's the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Artist</title>
<link href="styles1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenttransparency">
<div id="content">
<h3>Welcome</h3>
<hr />
<p>This is my text content.</p>
</div>
</div>
</body>
</html>
This is the CSS.
/* This one has the transparency. */
#contenttransparency {
background-color:yellow;
width:609px;
height:509px;
opacity: .5;
filter: alpha(opacity=50);
z-index:100;}
#content {
text-align:left;
position:relative;
width:589px;
height:509px;
padding:10px;
opacity: .9;
filter: alpha(opacity=100);
z-index:500;}
I have a div (contenttransparency) a background color set with a transparency set to 50% with a z-index of 100.
I had a second div (content) inside the first div with the opacity set to 100%. It has a z-index of 500.
These are both on top of another div (not shown) which has a background image. I'm trying to fade out the background image.
This works in IE in that get full transparency for the inside div but not in Firefox which still keeps the opacity from the first div. Hope this makes sense.
Why doesn't the content div opacity override in firefox.
Here's the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Artist</title>
<link href="styles1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenttransparency">
<div id="content">
<h3>Welcome</h3>
<hr />
<p>This is my text content.</p>
</div>
</div>
</body>
</html>
This is the CSS.
/* This one has the transparency. */
#contenttransparency {
background-color:yellow;
width:609px;
height:509px;
opacity: .5;
filter: alpha(opacity=50);
z-index:100;}
#content {
text-align:left;
position:relative;
width:589px;
height:509px;
padding:10px;
opacity: .9;
filter: alpha(opacity=100);
z-index:500;}