/    Sign up×
Community /Pin to ProfileBookmark

Nested element cropped when opacity is applied

Copy linkTweet thisAlerts:
Sep 29.2007

Hi all

I tried searching the forums but couldn’t find an answer for this. It’s a problem with IE’s ‘filter: (opacity)’ property. I can best explain it by example

If I have two div’s like this

[CODE]<div class=”outer”>
Outer
<div class=”inner”>
Inner
</div>
</div>[/CODE]

and I apply the following styles

[CODE].outer {
position: absolute;
top: 100px;
left: 100px;
width: 300px;
height: 300px;
background-color: #ff0000;
border: 1px solid #000000;
filter: alpha(opacity=68);
z-index: 1;
}

.inner {
position: absolute;
top: 100px;
left: 250px;
width: 100px;
height: 100px;
background-color: #00ff00;
border: 1px solid #000000;
z-index: 2;
}[/CODE]

then the area of the inner div which is outside of the area of the outer div is cropped. This is only the case for IE ver. 5.5 and up. When using FF and the opacity property it workes fine. Am I doing something wrong? Is this a bug in IE? Is there a work around?

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelSep 30.2007 — Can the 'outer' DIV be made [I]relative[/I]? That way, the 'inner' can be based upon point 0,0 of it, instead of maybe having no parent-apparent (not sure of nesting an [I]absolute-inside-an-absolute[/I] is such a good idea...

Or, -try "overflow:visible;" on the 'outer', to maybe 'force' the over flow to show...
Copy linkTweet thisAlerts:
@KravvitzSep 30.2007 — It's a bug in IE.

Either don't position "outer" or add another <div>.
Copy linkTweet thisAlerts:
@DokauthorSep 30.2007 — @ WebJoel: The div is dragable so it has got to be positioned absolutely. I tried all the different settings of the overflow property without succes.

@ Kravvitz: Adding another div solves the problem. Thanks a lot. Here's a working example

[code=html]<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.outer {
position: absolute;
top: 100px;
left: 100px;
width: 300px;
height: 300px;
background-color: #0000ff;
border: 1px solid #000000;
z-index: 1;
}

.middle {
width: 300px;
height: 300px;
background-color: #ff0000;
border: 1px solid #000000;
filter: alpha(opacity=68);
z-index: 1;
}

.inner {
position: absolute;
top: 100px;
left: 250px;
width: 100px;
height: 100px;
background-color: #00ff00;
border: 1px solid #000000;
/*filter: alpha(opacity=68);*/
z-index: 2;
}
</style>
</head>
<body>
<div class="outer">
Outer
<div class="middle">
Middle
<div class="inner">
Inner
</div>
</div>
</div>
</body>
</html>[/code]
×

Success!

Help @Dok spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...