Opacity Problem

[squiblo]

I have a few div tags, the 3 I am concentrating on are "full_shadow", "padding_shadow" and "leave_chat" as shown below...

 

<div id='full_shadow' style='display:none'>
<div id='padding_shadow'>
	<div id='leave_chat'>

						<h3>Are you sure you want to leave this chat?</h3>
						<div style="float:left;padding-left:40px;padding-top:30px">
						<img src='http://localhost/images/leave_chat.png'>
						<h3>Yes</h3>
						</div>
						<div style="float:right;padding-right:40px;padding-top:30px">
						<img src='http://localhost/images/cancel_leave_chat.png' onClick="cancel_leave_chat();">
						<h3 onClick="cancel_leave_chat();">No</h3>
						</div>

	</div>
</div>	
</div>

 

and here is the css...

 

#full_shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 927px;
background-color: #848484;
/* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
z-index: 1;
}

#padding_shadow {
height: 200px;
width: 300px;
position: absolute;
top: 50px;
left: 50px;
background-color: #3D3D3D;
z-index: 2;
}

#leave_chat {
height: 200px;
width: 300px;
margin-left: -10px;
margin-top: -10px;
background-color: white;
border: 1px solid black;
z-index: 3;
}

 

 

My problem is that I only want the "full_shadow" div to be opaque but I can see content underneath the "leave_chat" div. I have attached a screenshot of my problem, so you can get a better understanding.

 

Thanks.

 

 

 

[attachment deleted by admin]

[.Stealth]

Have you tried sticking:

 

/* for IE */
  filter:alpha(opacity=100);
  /* CSS3 standard */
  opacity: 1;

 

In the #leave_chat?

 

It looks like it is setting it to child divs, maybe because of the way you are selecting. Try selecting them like:

 

div#full_shadow{
}

[squiblo]

No that has not worked I'm afraid Stealth

[haku]

The maximum opacity of a child element is the opacity of the parent element. Since the parent element of 'leave chat' has reduced opacity, there is no way for 'leave chat' to have full opacity.

 

There are two ways to do this:

* Use a semi-transparent background image to set your transparency on the parent container. This way you don't have to change it's opacity

* move 'leave chat' outside the parent, and position it absolute/fixed in the location you want it.