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

Logo

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


IE5 Mac Positioning

In makeMenuIE(), the image is positioned vertically with this statement:

top = newSpan.offsetTop + itemPad + 2;

The 2 (two) value is almost arbitrary and has been included to account for extra leading vertical space that exists in IE5Win. This extra space does not exist in IE5Mac:

IE5 WinIE5 Mac

Notice how, on the Mac, the images are too low in the item. We don't need the extra two pixels, so we modify makeMenuIE() to add the extra pixels only for IEWin:

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;
               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);

//3.10.1 modified next statement to not add extra space for Mac
                  top = newSpan.offsetTop +itemPad + (isMac ? 0 : 2);
               }
            }
            newSpan.appendChild(newImage);
         }
      }
      else {
         ...
      }
      ...
   }
   ...
}

Pass your mouse over the link below to display a Version 3.10.1 menu:

Menu Example:
















The menu should have correctly positioned images for IE5 on both platforms:

v3.10.1 IE5 Winv.3.10.1 IE5 Mac

Version 3.10.1 of hierMenus.js is reproduced in full on the following page.

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