Tweet
So, I've coded a page that looks pretty clean... in standards compliant browsers.
The design relies on a stack of position:relative divs, with display:none divs in between, that are revealed onClick, pushing the rest of the stack down to make room.
The only issue is that each position:relative div has a position:absolute subdiv inside it.
IE somehow locks the position of the position:relative parent, because of the position:absolute child, and the animation ends up simply displaying behind the stack of divs, rather than moving them...
Is this a known issue? is there a workaround/fix?
GENERAL LAYOUT
and css
The design relies on a stack of position:relative divs, with display:none divs in between, that are revealed onClick, pushing the rest of the stack down to make room.
The only issue is that each position:relative div has a position:absolute subdiv inside it.
IE somehow locks the position of the position:relative parent, because of the position:absolute child, and the animation ends up simply displaying behind the stack of divs, rather than moving them...
Is this a known issue? is there a workaround/fix?
GENERAL LAYOUT
Code:
<div class="wrap">
<div class="parent" style="position: relative;">
content goes here
<div class="child" style="position: absolute;">
more content goes here
</div>
</div>
<div class="showOnClickOfParent" style="display: none">
still more content, all sneaky like
</div>
<div class="parent" style="position: relative;">
content goes here
<div class="child" style="position: absolute;">
more content goes here
</div>
</div>
<div class="showOnClickOfParent" style="display: none">
still more content, all sneaky like
</div>
<div class="parent" style="position: relative;">
content goes here
<div class="child" style="position: absolute;">
more content goes here
</div>
</div>
<div class="showOnClickOfParent" style="display: none">
still more content, all sneaky like
</div>
<div class="footer" style="position: relative">
</div>
</div>
Code:
.parent {
margin: 0px;
width: 700px;
height: 150px;
color: #fff;
padding: 0px;
position: relative;
overflow: hidden;
background-color:#cdc;
clear: both;
zoom: 1;
}
.child {
float: right;
position: absolute;
margin-top: 0px;
bottom: 0px;
left: 200px;
width: 135px;
background-color: #0e834c;
font-size: 75%;
text-align: center;
font-weight: bold;
}
.showOnClickOfParent {
padding: 5px 10px;
margin: 0;
text-indent: 0;
border: 1px solid #999;
background-color:#ffffff;
zoom: 1;
}
.footer {
text-align: right;
background-color: #fff;
border: 1px solid #999;
background-color:#cdc;
z-index: 6;
}
Comment