DHTML Lab: Cross-Browser Hierarchical Menus; The Item Stylesheet

Cross-Browser Hierarchical Menus
the item stylesheet

Webreference

Contents

The menu items associated with the links above have a "padding" value of 0 (zero).

In longer script listings, cross-browser code is blue, Navigator-specific code is red, and Explorer code is green.

If you have been following this column with Explorer 4, you will have noticed that when you mouseover an item, there are two differences from the Navigator version:

1. The font color, as well as the background color, changes.
   
   
2. The cursor assumes the "hand" shape if the item is a link. (Remember not all items are links. See example of defining non-link items on previous page.)

Neither font color changes nor cursor shape changes can be achieved dynamically in Navigator. We will, however, use these Explorer-specific capabilities for the benefit of Explorer users.

The mouseover font color is defined as the parameter variable, overFnt. To change the font color to blue on a mouseover, we include this variable assignment:

overFnt = "blue";

The cursor will be set dynamically in our script later.

The padding / background-color Problem

If you are using Explorer 4, you will notice that this page's left column menus seem a little "squashed" compared to the ones we've been using. This has to do with the CSS padding property.

The CSS1 specification defines padding as space added betwen the content of an element and any border that is defined:

Details can be found in the CSS1 Documentation. Unfortunately, the two browsers do not handle padding in the same way. Consider the following examples:

Padding Value	Navigator Rendering	Explorer Rendering
0 (zero) padding: 0;
3 (three) padding: 3;
6 (six) padding: 6;

Navigator seems to add some surrounding space (3 pixels) to its content by default and then adds the CSS padding to that. Explorer displays what is expected, according to the CSS spec.

The problem is a little more complex than that. Navigator actually adds space between the padding and the border. The following screenshot is from the Netscape documentation:

Notice the 3 pixel white space between the thick blue border and the light blue background of the content. Whenever a border is used, this 3 pixel addition cannot be avoided. But where is the white space in the menu screenshots in the table above, you ask?

The Netscape documentation screenshot is a demonstration of the padding and border CSS properties. The CSS background-color property is used to shade the content and padding. Our menus do not use the CSS background-color property to define the menu item background color for the simple reason that this property CANNOT be changed dynamically by Navigator, and we need a rollover effect.

Navigator can change a positioned element's background color dynamically, if it has been set using:

• the pseudo-CSS proprietary property, layer-background-color. We have used this property many times in our columns. Its first appearance and discussion was in Low Bandwidth Rollovers.
  eg. layer-background-color: blue;
• the BGCOLOR attribute of the LAYER tag.
  eg. <LAYER BGCOLOR = "blue">
• the JavaScript bgColor property.
  eg. elementReference.bgColor = "blue";

All these methods have two things in common:

1. They will get rid of the 3 pixel white space and color the element to the border.
2. They are not too compatible with the padding property, as we can see in our table above.

Solution:

To avoid lengthy workarounds, and to facilitate a straight-forward cross-browser script for hierarchical menus, we must:

1. decide that the rollover is essential and bgColor must be used for Navigator.
2. freeze the look of our menu items to 0 padding for Navigator and 3 pixel padding for Explorer.
3. avoid additional padding if we use borders.

For the script we are developing in this column, we will assume the Navigator-0, Explorer-3 padding. Since Explorer can set this property at any time, we will set it in our main script later.

The Parameter Variables

The parameter variables that must be set in our HTML page, to be used by our external script, are therefore:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
    menuWidth = 120;       // pixel integer only
    borWid = 2;            //         "
    fntCol = "black";      // CSS standard notation
    fntSiz = "12px";       //     (strings)
    fntWgh = "normal";     //         "
    fntSty = "normal";     //         "
    fntFam = "sans-serif"; //         "
    borCol = "#CC0000";    //         "
    borSty = "outset";     //         "
    linHgt = "normal";     //         "
    backCol = "#DDDDDD";
    overCol = "#FFCCCC";
    overFnt = "blue";
    imgSrc = "triangle.gif";"
    imgSiz = 10;
    childOverlap = 50;
    childOffset = 3;
    perCentOver = null;
    secondsVisible = .5;
//-->
</SCRIPT>

Now, let's move on to the main script.