I have a section of markup on page that under circumstances I want to give the
impression that it is disabled or inactive by making any input controls
contained within it unclickable and the entire area faded out. I figured I'd
do this by placing a css element over the portion of a page with a higher
z-index and a width/height to match the containing parent, and a bit of opacity
to provide the faded look.
I was able to get it to work in FF/Webkit/Opera/IE8, but it just won't work in
IE6/IE7. In IE6 the overlay won't grow to fill the parent container without
specifying exact width/height values in pixels (which I cannot do in this
case). In IE7 the opacity is not honored and instead it is fully opaque
resulting in the area being completely covered over.
Example Markup (section of page):
<div id="wrap" style="position:relative;">
<div class="disable-overlay"> </div>
<div id="content">
[content with unknown height/width coming from backend
datasource]
</div>
</div>
CSS:
.disable-overlay
{
position: absolute;
background-color: red;
left:0;
top:0;
z-index: 100;
height:100%;
width:100%;
/* Gecko */ opacity: 0.40;
/* Mozilla */ -moz-opacity: 0.40;
/* IE */ filter: alpha(opacity=40);
}
Any help is greatly appreciated,
Jer
________________________________
Attention:
The information contained in this message and or attachments is intended only
for the person or entity to which it is addressed and may contain confidential
and/or privileged material. Any review, retransmission, dissemination or other
use of, or taking of any action in reliance upon, this information by persons
or entities other than the intended recipient is prohibited. If you received
this in error, please contact the sender and delete the material from any
system and destroy any copies.
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
