| Cause: | Unknown. This appears to be a bug in the
browser. In our original analysis, we theorized that the space was the result
of IE5.5/6 always adding a small amount of white space to the bottom of the
document whenever the last element of the page (the body's lastChild) was an
absolutely positioned element. However, a reader has suggested a simpler and
more likely cause: If there is a defined element on the page that follows the
last visible element of the page, the margin-bottom of the last
visible element of the page will be displayed in full. Or in other words,
even though our menus are defined as absolutely positioned elements and
are physically displayed elsewhere on the page, they are created as children
of the body element after the last visible element of the page;
and that last visible element is then displayed with its full margin
allotment.
Or, to put it another way, IE5.5/6 does not display the bottom margin on
the last child of the page (the last element actually created as a child of the
body element of the page). Thus, the addition of the menus appears to
"create" whitespace on the page, since the menus are added after the last
element of the page, which in turn trigger the margin display on the last
item.
To see what we're talking about, have a look at these three sample pages,
none of which even use any JavaScript:
Absolutely Positioned Div On Bottom
Absolutely Positioned Div On Top
Absolutely Positioned Div On Bottom (with margin-bottom 0px)
Load the first page in IE5.5 or 6, then shrink the browser window until
just before the vertical scrollbar would appear. Then load the second page
into the same window without resizing it. On the second page, you'll notice your
vertical scrollbar appears, even though the page contents should be identical
(the only difference being a hidden, absolutely positioned object at (0,0) which,
in the first page is defined at the beginning of the document and in the
second page is defined at the end of the document). On the third page, the
last h1 is specifically set to margin-bottom of 0px via
the page's style sheet; notice that that page is displayed just like the
first example, even though the absolutely positioned div is on the bottom
of the page.
In HierMenus this space virtually always appears, since HM always
creates menus at the end of the page (via appendChild) and page
authors would rarely think to explicitly force the margins to be 0 on
the last visible element of the page.
The above explanation leads us to two possible work arounds: change the
HierMenus code to use insertBefore instead of appendChild;
or setup your pages such that the last visible element of the page is
always forced to have a margin-bottom of 0px. |
