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:
> 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...)


> 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;
	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>



css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: