Absolute with percentage height in IE6

HTML & CSS
1

I’m trying to achieve a very simple effect in IE6. Please view any of the examples below in any browser other than IE6 to see the desired effect. I’ve created 3 variations that all produce the same visual effect in browsers other than IE6.

http://chriscressman.com/absoluteOverlay1/
http://chriscressman.com/absoluteOverlay2/
http://chriscressman.com/absoluteOverlay3/

I can get this to work in IE6 if I set a fixed height that is larger than the natural content height on the gray div. To see this working, visit:

http://chriscressman.com/absoluteOverlay4/

Can anyone get this to work in IE6 without setting a fixed height on the gray div?

2

Hi, IE6 won’t let an absolute child use percentage heights unless the parent has a height set. There’s no getting around that unless you want to cheat a bit :slight_smile:

You are only using 50% height but if you wnated to cover everything up you could set a height larger then you ever would need, and then hide the overflow with the parent :slight_smile:

*{margin:0;padding:0;}
body{color:black;background:white;font:4em/1 sans-serif;}
div.gray{position:relative;width:800px;background:gray;[B]overflow:hidden;[/B]}
div.red{position:absolute;top:0;left:0;width:800px;[B]height:999em;[/B]background:red;}