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:

The font color, as well as the background color, changes.

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;