DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum VIII (v3.08) | 6

Hierarchical Menus Ver. 3 - Addendum VIII (v3.08)
adjustments for five minor issues

Once more, pass your mouse over the link below left to display a menu.

Menu Example:     

The two browers give us two different results:

Navigator: The menu is exactly 150 pixels wide.

Explorer: The menu is wider than the specified 150 pixels.

If we look at the Explorer example closely, we see that the menu width is the specified width plus the border widths. The culprit is this statement, in the IE-only makeMenuIE() function:

menu.itemStr +=
 "<SPAN ID="+ itemName
 +" STYLE=\"width:"+ menu.menuWidth +"\">"+ htmStr +"</SPAN><BR>";

Recall that this statement creates the item element. We give it a width equal to the menu width (menu.menuWidth). By default, Explorer expands the width and height of an element to contain all child elements.

Aside:
This behavior can be overruled by the overflow property. If one sets the overflow property to hidden, then the element is clipped, and content outside the specified width and height is not visible. Setting the overflow property to scroll, applies scrollbars to the element. A value of auto causes scrollbars to appear only if the contained content is larger than the specified width and height. Explorer 5 has added the non-standard overflow-x and overflow-y properties to allow authors to specify element sizing behavior for either the width or the height.

In any case, the menu code is expanding the menu element, whenever a border is specified. In our in-page example, we have specified a menu width of 150 pixels, and a border width of 2 pixels. Since we give the item elements the same width as the menu, the final menu width is:

     2      +  150 +      2       = 154
left border + item + right border

We need item elements to have an assigned width of the menu width minus the border widths:

menu.itemStr +=
 "<SPAN ID="+ itemName
 +" STYLE=\"width:"+ (menu.menuWidth-(borWid*2))
 +"\">"+ htmStr +"</SPAN><BR>";

Now the width calculation becomes:

     2      +  (150-(2*2)) +      2 
     2      +     146      +      2       = 150
left border +     item     + right border

Try the menu again with the new calculations:

Menu Example:     

This solution is important for authors who are positioning their menus in a specific page location, and have applied widths that correspond to a dimension of the in-page link that displays the menus. Otherwise, the small discrepancy in menu width between the browsers is easily overlooked.

On to the child positioning problem.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Aug 24, 1999
Revised: Aug 24, 1999

URL: https://www.webreference.com/dhtml/column21/addendum8/col21addVIII4.html