Previous Message
Next Message

IE's transparency filter attribute breaks absolute positioning

Sent by Ingo Chao on 6 September 2005 21:09


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-REMOVED]]
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/
Previous Message
Next Message

Message thread: