Hiermenus Go Forth, XXV - DHTML Lab | 15 | WebReference

Hiermenus Go Forth, XXV - DHTML Lab | 15


Logo

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



In-line and 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>This is an <B>in-line</B> paragraph.</P>
<P STYLE="position:absolute;left:20px;top:130px">
This is a <B>positioned</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

In this example, we have reversed the page order of the the content. On the previous page, the positioned element was defined first, then the in-line content.

In theory, the order should make absolutely no difference. The display should be the same and so should the property values returned.

A positioned element exists outside the page flow and can be placed anywhere in the page code with the same result.

As we can see from the values returned, the page order of the the content does not affect the properties in IE6 when it is not in standards-compliant mode.






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>This is an <B>in-line</B> paragraph.</P>
<P STYLE="position:absolute;left:20px;top:130px">
This is a <B>positioned</B> paragraph.</P>
</BODY>
</HTML>

BODY Element Property Values

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

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 same example, with the reversed content returns different values when IE6 is in standards-compliance mode.

The BODY, although a single-line element has been given two lines! This two-line height is reflected in the values of the height properties: 38px instead of 19px.

Page content that is, ostensibly, exactly the same, returns two sets of property values.

My Guess:

When IE renders a block element (DIV, P, etc.) it checks for content immediately following the element.

If it encounters content, it inserts the vertical space required after a block element. Therefore the height of the BODY grows by this vertical space, one line (19px) in our example.

If there is no content, just a closing BODY tag (</BODY>) then no vertical space is inserted because the page is fully rendered and none is required. Consequently, the BODY does not have an extra line of space.

It seems that the simple existence of a tag (in our example, P) is enough to tell IE that more content is coming. There is no check made at this time for whether the element-in-question is in-line or positioned.

This definitely constitutes a problem, and a minor bug. It can be easily avoided by authors through the ordering of page elements.






Hopefully, you now know most everything there is to know about page canvas dimensions in the two IE6 modes. There is more, but we will stop here. Since the specifications for the properties used in our examples are not always the same between IE versions (4, 5, 5.5, 6.0) it is recommended that you experiment with various page elements, retrieving the property values, for a good understanding of browser version differences. On the next page, we'll look at the changes made to HM to accommodate pages created only with positioned elements in IE6 standards-compliant mode.


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