> I'm trying to nest an absolutely positioned DIV inside of a relatively
> positioned DIV and give that nested DIV a percentage height.
>
> This works fine in all browsers (including IE7 and 8) but IE6 refused
> to give the nested DIV the height I specify. I've tried giving it has
> layout to no avail.
I have some more specific examples of the issue:
This works:
<div style="height: 300px; background: yellow; width: 100px; position:
relative;">
<div style="background: red; height: 50%; width: 100px; position:
absolute; top: 0px; right: 0px;">
</div>
</div>
You'll see a 300px tall div with the top being red (the nested div
going 50%) and bottom being yellow (the container div).
This, does not:
<div style="background: yellow; width: 100px; position: relative;">
<div style="background: red; height: 50%; width: 100px; position:
absolute; top: 0px; right: 0px;">
</div>
<div style="position: relative;">
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
</div>
</div>
The difference between the two is that in the first case, I'm giving
an explicit height to the container div. In the second one, I'm
letting the contained relatively positioned div define the height of
the container.
It appears that IE6 can't calculate the height of the container div
based on the nested relatively positioned div and therefore doesn't
know % of *what* to make the absolutely positioned div.
-DA
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
