Hiermenus Go Forth, XXV - DHTML Lab | 14


Logo

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



Positioned and In-line 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.</P>
<P>This is an <B>in-line</B> paragraph.</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: 149

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 BODY element contains both the in-line and the positioned element. Therefore the scrollHeight property reflects the bottom edge of the last child (the positioned element) of the BODY.

This is, of course, the expected behavior.





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.</P>
<P>This is an <B>in-line</B> paragraph.</P>
</BODY>
</HTML>

BODY Element Property Values

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

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: 149

Comments

The values we receive in this example are also the expected ones:

  1. The HTML element, representing the page canvas, has a scrollHeight that accounts for two child elements.
  2. The BODY element, only a single line of in-line content, has height values of 19px, reflecting the height of the line.




We have now looked at values returned by all combinations of content type and IE6 modes. There is, however, one final example that exposes an IE rendering problem (bug) and therefore we should take a quick look at it on the next page.


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/7.html