Hi Chris,
Thanks for the info.
The general layout of the site, and the use of the AP divs, is to accomplish
two very simple -- or what is simple with IE7 and FF2 -- things.
First, the header and the footer regions get "glued" to the top and bottom
of the viewport. This is working in IE6 okay as well.
Second, that the center navigation bar and content regions, *fill* the
remaining vertical space in the viewport, and that any overflow is clipped
at the start of the footer with a scrollbar to handle viewing of the
overflow.
I create two temporary pages for acid testing:
www.areteam.com/ie6-short.html and www.areteam.com/ie6-long.html. These are
copies of the existing HOME and PHILOSOPHY pages, however they are devoid of
any PHP and include an ancillary ie6.css style sheet for shits-and-giggles
to figure this problem out.
I'm not sure I *completely* understand your comment of...
> <style>
> #page-bg-body {border:1px solid red;} </style>
>
> In IE, it has no height because it has no children still in
> document flow. Since it has no height, it won't tile down the
> length of the page as you expected.
I realize that a DIV will collapse down based on it's content, however why
then does the HEIGHT:100% properly address the situation -- at least
visually with respect to the background image -- on IE7 and FF2, whereas IE6
does not? Does IE6 treat that property differently.
Holding aside the issue of the descendant DIVs' contents not "filling" the
viewpoint, there are some issues, that are also coming into play...
A) The background image of DIV#PAGE-BG-BODY is not appearing at all. This
background includes the white area on the left and right sides of vertical
divider bar, with a drop shadow off of the right edge. You can see this in
the masthead -- note the drop shadow off of the right-hand side -- but not
in the "BODY" area. (This is the most puzzling aspect of this.) In addition,
when I add indicate borders to the three problematic DIVs, I can see that
the "space" they occupy should not cause any clipping of the background
graphic.
B) On long pages (see: www.areteam.com/ie6-long.htm) the content spills out
of the containing DIV. This seems to go back to the HEIGHT property issue.
IE6 seems to ignore the containing DIV's HEIGHT and OVERFLOW properties. It
also seems to ingore the BOTTOM property -- when I did try it, and simply
let's anything spill out. The only exception I have found is if I include a
specific measurement in the HEIGHT property.
Now that last bit would work just fine if I could dynamically calculate the
height based on (viewport available height LESS height of header and footer
regions). This is specifically why the AP DIVs came into play, because I did
not want to have to dynamically manipulate the DIV heights via JavaScript or
PHP.
My goal is to get this working the same on IE6 as it does in IE7 and FF2.
This seems like something that should be fairly straight forward, but it's
not. (I can understand having it degrade gracefully, but I'm not necessarily
accepting that path for IE6. IE5? Sure. NN4? Sure. IE6...mmmm... no.)
As far as I can see, this comes down to addressing the styles on three
elements: DIV#PAGE-BG-BODY, DIV#BODY-NAVBAR, and DIV#BODY-CONTENTS. Right?
Last, I do know that the BOTTOM property is being honored, where I'm not
trying to stretch something to fill the viewport, because the footer is
fixed to the bottom of the viewport as it should be.
Now I'm just beating about on blind garden paths. So what is suggested as a
next step to addressing this to achieve the desired effect?
...Rob
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
