Scott Reston wrote:
URL:
http://scott.therestons.com/development/test.html
To make up for lacking PNG transparency support in IE, I'm using the
"filter:" attribute to make a div's background transparent (yep - i'm
aware that IE will make all descendents transparent, too...)
huh?
I'm running into a problem, though - when I apply "filter" (as in
filter:alpha(opacity=80);) to a containing div, it no longer lets
absolutely placed divs within it to break free of it's box dimensions.
the inner div is clipped by the dimensions of the container.
Everything appears to work fine if the transparency filter is removed or
if the containing div is RELATIVELY positioned, but the two together
cause problems.
Scott, I never understood why these filters are not fully supported by
IE [1], as it's a MS proprietary extension, or not? And it's neither an
CSS nor a web standards question.
Basically, the problem you reported relies on the combination pos.
absolute + filter, as you mentioned. And that's the solution at the same
time. Disconnect position:absolute from the filter. The filter has to be
applied to another element with the same dimensions:
#div5 {
position: absolute;
top: 450px; left: 0;
width: 300px; height: 300px;
}
.meta {
width: 300px; height: 300px;
background-color:#006699;
filter:alpha(opacity=80); /* moved from div5 */
}
<!-- new element meta added -->
<div id="div5"><div class="meta">
<p>This is div 5. div5 HAS transparency.</p>
<div id="div6">
<p>here's div 6. it gets clipped by IE.</p>
</div></div>
</div>
Ingo
[1] http://www.satzansatz.de/cssd/tmp/alphatransparency.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
