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

Hiermenus Go Forth, XXV - DHTML Lab | 9


Logo

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



In Version 4.1.2, we addressed menu formatting and item element positioning in the new IE6 for Windows. Recall that the problems were traced to the new standards-compliance mode of IE6. We solved them by referencing the new document.compatType property, and formatting menus in one of two different ways, depending on the value returned by document.compatType.

If you did not read our detailed discussion in Column 60, it is highly recommended that you do so, as our current modifications are a direct follow-up.

The New (i.e. overlooked) IE6 Problem

Many thanks to Jim Santo for alerting us to a problem with menu display in his pages, leading us to identify the following:

If:
  1. IE6 is in standards-compliance mode, and

  2. There is no in-line content on the page. That is, all the content is contained within positioned elements.

Then,
  1. All the requisite menu trees will be created as required, but

  2. The top-level menus will be positioned off-the-screen, vertically. That is, they will have a negative top position, and consequently not visible in the page.

Reason

The standards-compliance mode of IE6 includes a major change to the definition of the page "canvas." It is described in the Who Moved My Canvas? section of the required-reading MSDN article, IE6 CSS-Enhancements. The relevant passage is reproduced below:

In earlier versions of Internet Explorer, the BODY element represents the canvas—the entire surface onto which a document's content can be rendered. The size of the BODY element cannot be changed and equals the size of the window. Margins you set on this element are rendered inside the border and scroll bars of the element.

As of Internet Explorer 6, when you use the !DOCTYPE declaration to switch on standards-compliant mode, the BODY element can obtain its size from its content, or you can set its size explicitly—like a DIV object, for example. In standards-compliant mode, the HTML element represents the canvas.

When you switch on standards-compliant mode, the HTML element also becomes the positioning container for positioned elements that don't have a positioned parent. When standards-compliant mode is switched off, as with earlier versions of Internet Explorer, an absolutely positioned element is positioned relative to the BODY when there is no positioned parent. When standards-compliant mode is switched off, as with earlier versions of Internet Explorer, the BODY element represents the canvas.

Copyright © 2001 Microsoft Corporation,
One Microsoft Way, Redmond, Washington 98052-6399 U.S.A.
All rights reserved.
Terms of Use

Expanding on the above, in standards-compliant mode if the BODY has no in-line content then it has no "size." Positioned elements will consider the HTML element to be their parent, as will the BODY element. In other words, in standards-compliant mode, the BODY can be seen as "just another element." It can even be positioned!


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