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

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

Logo

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


Image Positioning in IE5

In Addendum 9, we created our item elements (SPANs) and instances of the "more" image using the DOM for IE5. The images were created as positioned elements, to enable correct text wrapping within item elements. Follow the link above to Addendum 9 for details.

The functions affected were makeMenuIE() and itemSetup():

function makeMenuIE(isChild,menuCount,parMenu) {
   ...
   while (menu.itemCount < menu.maxItems) {
      ...
//3.09 items created with DOM for IE5
      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;
            }
            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) {
//3.09 properties created with DOM elsewhere hidden for IE5
         if(!IE5) {
            fontSize = fntSiz + "pt";
            fontWeight = (fntBold) ? "bold" : "normal";
            fontStyle =   (fntItal) ? "italic" : "normal";
            fontFamily = fntFam;
            padding = itemPad;
         }
//3.09 extra padding added for item with image as well as other items for IE5
         if (this.container.isTree && (IE5 || (!IE5 && !this.hasMore))) {
            if (isRight) paddingLeft = itemPad+fullImgSize;
            else paddingRight = itemPad+fullImgSize;
         }
         color = this.container.menuFontColor;
         borderBottomWidth = separator + "px";
         borderBottomColor = this.container.menuSeparatorCol;
         borderBottomStyle = "solid";
         backgroundColor = this.container.menuBGColor;
      }
   }
} 

Notice that, for IE5, some item styling is done in makeMenuIE() (width, font and padding) and some in the cross-version IE code in itemSetup() (color, backgroundColor and border).

Our current problem and consequently, the solution, lies with the decision we made as to which style properties to set where.

But we're getting ahead of ourselves.

Let's pause to demonstrate exactly how the image is positioned. We'll use a menu without separator lines, that has a single item requiring an image:

Expected MenuNS and IE4Win PositioningIE5 Positioning

In all menu versions up to 3.08a, the image was positioned within the item as in the second illustration above. With 3.09, we changed the positioning for IE5 only. The image, being a positioned element, is offset from the enclosing positioned element (the menu itself, since items are not positioned elements) as in the third illustration.

In our new code, however, we forgot to account for the separator lines!


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