Thanks Thierry just gave this a shot but still not right in IE6/IE7. I was still able to access to the input controls (albeit I can disable These server-side if necessary).
The bad thing is the .png interacts with any colors above/below it. For example the section I am giving an "inactive" look to is a table of data with alternate rows having a background colour. With the .png applied it mixes together with the colours to give a really horrible look. It really is suprising how well my original method works in every browser but IE6/IE7, the same technique seems to be workable I'm just having issue being unable to apply a height:100% and opacity not being set in IE7. -----Original Message----- From: Thierry Koblentz [mailto:n...@tjkdesign.com] Sent: Tuesday, September 29, 2009 1:37 AM To: Jeremy Ferrante; css-d@lists.css-discuss.org Subject: RE: [css-d] IE6/IE7 Section Overlay Issues > 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 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 [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/
