Hiermenus Go Forth, XXV - DHTML Lab | 13


Logo

Hiermenus Go Forth, XXV:
Version 4.1.3 - The Complete Script (Full-Window)



Positioned Content

Page HTMLIE6 Display
(with dimensions added)		 
<HTML STYLE="background:pink">
<HEAD>
<TITLE>IE6 Page Canvas</TITLE>
</HEAD>
<BODY STYLE="margin:30px;background:yellow">
<P STYLE="position:absolute;left:20px;top:130px">
This is a <B>positioned</B> paragraph,<BR>
and the only content in this page</P>
</BODY>
</HTML>

BODY Element Property Values

document.body.clientWidth: 300
document.body.clientHeight: 200
document.body.offsetWidth: 320
document.body.offsetHeight: 204
document.body.scrollWidth: 300
document.body.scrollHeight: 168

HTML Element Property Values

document.documentElement.clientWidth: 0
document.documentElement.clientHeight: 0
document.documentElement.offsetWidth: 320
document.documentElement.offsetHeight: 204
document.documentElement.scrollWidth: 320
document.documentElement.scrollHeight: 204

Comments

The property values in this example are identical to those of the first example on the previous page.

The scrollHeight of the BODY element includes the height of the single positioned element. The positioned element is a child of the BODY element and contained within it.





Page HTMLIE6 Display
(with dimensions added)		 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
      "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML STYLE="background:pink">
<HEAD>
<TITLE>IE6 Page Canvas</TITLE>
</HEAD>
<BODY STYLE="margin:30px;background:yellow">
<P STYLE="position:absolute;left:20px;top:130px">
This is a <B>positioned</B> paragraph,<BR>
and the only content in this page</P>
</BODY>
</HTML>

BODY Element Property Values

document.body.clientWidth: 240
document.body.clientHeight: 0
document.body.offsetWidth: 240
document.body.offsetHeight: 0
document.body.scrollWidth: 240
document.body.scrollHeight: 0

HTML Element Property Values

document.documentElement.clientWidth: 300
document.documentElement.clientHeight: 200
document.documentElement.offsetWidth: 320
document.documentElement.offsetHeight: 204
document.documentElement.scrollWidth: 300
document.documentElement.scrollHeight: 168

Comments

This example is the one relevant to the current HM problem and fix. If there is no in-line content then the BODY element is empty. It has no height. Zilch, nada. The clientHeight property returns 0. Any attempt by HM to adjust menu vertical positioning will result in a position off the visible window, because HM believes the visible window is 0px high! The menus are created, but we can't see or use them.

No in-line page content is rare, but more and more authors are enclosing all their content in positioned elements, necessitating our current fix.





On the next page, we look at the property values returned with both in-line and positioned content.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: November 13, 2001
Revised: November 13, 2001

URL: http://www.webreference.com/dhtml/column61/6.html