> 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,
Hi Jer,
For IE6/7, I'd forget the extra markup and use #content instead with the
AlphaImageLoader filter.
So first use:
.disable-overlay {
/* remove rules that you use for IE 6/7 from here */
*display:none; /* this will "kill" that element in IE 6/7 */
}
Then create a PNG that will give you the opacity you want and go with:
#wrap {
*background: none;
zoom:1;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='this-is-a-png
-with-alpha-transparency.png', sizingMethod='scale');
}
That filter should give you the visual effect you're after and disable your
controls at the same time. Make sure there are no 100% transparent pixels in
your PNG or users will be able to click through it. (the size of the image
does not matter as the filter will stretch it).
Not tested but I think that should work...
--
Regards,
Thierry | http://www.TJKDesign.com
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
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/
