D A wrote:
(snip)
> I have some more specific examples of the issue:
>
(snip)
> 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
You need to hack IE6. It does make sense of some percentages.
<div class="container">
<div class="ap"></div>
<div class="rp">
<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>
.container {background: yellow; width: 100px; position: relative;}
.ap {background: red; height:50%; width: 100px; position:
absolute; top: 0px; right:0;}
.rp {position: relative;}
* html .container {overflow:hidden;} /* hack for IE6, hides overflowing
padding */
* html .ap {padding-top:200%;top:auto;bottom:50%;} /* hack for IE6 to
give some height */
Hopefully the ap box isn't for a image, could get complicated. If so,
padding-bottom:200% also works.
--
Alan http://css-class.com/
______________________________________________________________________
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/
