DHTML Lab: HierMenus CENTRAL: Version 3.x FAQ #14 - dhtmlab.com

Frequently Asked Question #14

Entered: August 22, 2000

In Version 3.08, we identified and fixed a problem with the z-index of menu elements. In short:

In Navigator, all new positioned elements (layers) are created above the top-most element in the page in z-order. This suits the menu elements, since they must always display over other elements.

In Explorer, new positioned elements do not have their z-index set automatically. They will only appear over elements with the same (i.e. no) z-index. If you have manually specified a z-index for an element, the menus will appear under that element.

This problem was fixed in Version 3.08 by introducing a loop, for IE users, that checks every element on the page, determines the highest z-index present, and declares the z-index value that should be assigned to the menu elements. Once this value is established, the script begins to create the menus.

In normal-size pages, the time consumed by the loop is indiscernible. However, in very long pages, especially those that are table-intensive, the delay caused by the loop before menu-creation may be unacceptable. Even worse, the delay may be in vain if you have not declared a z-index for any elements in your page.

Solution

Identify the loop in the makeTop() function of the HM script:

function makeTop(){
    beingCreated = true;
    if(IE4) {
        topZ = 0;
        for (z=0;z<menuLoc.document.all.length;z++){
            oldEl = menuLoc.document.all(z);
            topZ = Math.max(oldEl.style.zIndex,topZ)
        }
    }
    ...
}

Omit the loop and hard-code a high z-index value (topZ) for the IE menu elements. This value should be larger than any other element's z-index that you have set. If you have not set any other z-index value, just give topZ any positive value:

function makeTop(){
    beingCreated = true;
    if(IE4) {
        topZ = 5000;
    //  for (z=0;z<menuLoc.document.all.length;z++){
    //      oldEl = menuLoc.document.all(z);
    //      topZ = Math.max(oldEl.style.zIndex,topZ)
    //  }
    }
    ...
}

Thanks to Gary Fenton, for placing his client's menus in an unforeseen environment, and forcing the problem to appear. The page hosted a 4600-element table, and was over 300K long without images!