DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum X-1 (v3.10.1) | 3

Hierarchical Menus Ver. 3 - Addendum X-1 (v3.10.1)
fix for IE5 image positioning

The Separator Line Problem

If the menu example on the previous page had separator lines, we would get the positioning illustrated below. Here we have specified a two-pixel black separator line using the following in-page parameter variables:

separator = 2;
separatorCol = "black";

NS and IE4Win Menu	IE5 Menu

In Version 3.09, we left the separator definition code (item bottom border styling), where it used to be: after the creation and positioning of the item and image elements, in itemSetup(). By adding a separator, we move the items down in the menu. In previous versions, when the image was positioned within an item, the image moved as well. In Version 3.09, the image remains stationary, because it exists outside the items.

What we need to do is position the image after the separator line has been defined, or rather we should define the separator line before the image is positioned. Therefore, the separator (border) styling needs to occur earlier for IE5:

function makeMenuIE(isChild,menuCount,parMenu) {
   ...
   while (menu.itemCount < menu.maxItems) {
      ...
      if(IE5) {
         newSpan = menuLoc.document.createElement("SPAN");
         with(newSpan) {
            id = itemName;
            with(style) {
               width = (menu.menuWidth-(borWid*2));
               fontSize = fntSiz + "pt";
               fontWeight = (fntBold) ? "bold" : "normal";
               fontStyle = (fntItal) ? "italic" : "normal";
               fontFamily = fntFam;
               padding = itemPad;
//3.10.1 added next 2 lines 
               borderBottomWidth = separator + "px";
               borderBottomStyle = "solid";
            }
            innerHTML = dispText;
         }
   
         newBreak = menuLoc.document.createElement("BR");
         menu.appendChild(newSpan);
         menu.appendChild(newBreak);
         if(hasMore) {
            newImage = menuLoc.document.createElement("IMAGE");
            with(newImage){
               src = imgSrc;
               with(style) {
                  position = "absolute";
                  width = imgSiz;
                  height = imgSiz;
                  left = (isRight) ? itemPad : (newSpan.style.pixelWidth - itemPad - imgSiz);
                  top = newSpan.offsetTop +itemPad + 2;
               }
            }
            newSpan.appendChild(newImage);
         }
      }
      else {
         ...
      }
      ...
   }
   ...
}
function itemSetup(whichItem,whichArray) {
   ...
   if (NS4) {
      ...
   }
   else {
      with (this.style) {
         if(!IE5) {
            fontSize = fntSiz + "pt";
            fontWeight = (fntBold) ? "bold" : "normal";
            fontStyle =   (fntItal) ? "italic" : "normal";
            fontFamily = fntFam;
            padding = itemPad;

//3.10.1 added next 2 lines (moved from below)
            borderBottomWidth = separator + "px";
            borderBottomStyle = "solid";
         }
         if (this.container.isTree && (IE5 || (!IE5 && !this.hasMore))) {
            if (isRight) paddingLeft = itemPad+fullImgSize;
            else paddingRight = itemPad+fullImgSize;
         }
         color = this.container.menuFontColor;
//3.10.1 next two lines moved above
//       borderBottomWidth = separator + "px";
//       borderBottomStyle = "solid";
         borderBottomColor = this.container.menuSeparatorCol;
         backgroundColor = this.container.menuBGColor;
      }
   }
} 

Now, the image positioning should be exact.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: June 30, 2000
Revised: June 30, 2000

URL: http://www.webreference.com/dhtml/column21/addendum10-1/3.html