Home Forms Fonts Setting Fonts In A Drop-Down Menu
Search MS Office A-Z   |   Search Web Pages/ Design A-Z

Setting Fonts In A Drop-Down Menu

A drop-down menu is officially known as a SELECT list. Here's the code you might use:

<FORM METHOD=GET ACTION="something">
<SELECT NAME=my_menu>
 <OPTION>Red
 <OPTION>Green
 <OPTION>Blue
</SELECT>
</FORM>

This gives you the menu shown below:

Neither the SELECT nor the OPTION tags let you set the font for your menu, so you have little control over the style or width of your menu.

The solution that works in both I.E. and Netscape is to use a Cascading Style Sheet to fix the font:

<FORM METHOD=GET ACTION="something">
<FONT FACE="monospace" SIZE="2">
<SELECT NAME=my_menu
 STYLE="font-family : monospace;
 font-size : 12pt">
 <OPTION>Red
 <OPTION>Green
 <OPTION>Blue
</SELECT>
</FONT>
</FORM>

Now we've created an in-line style by adding the STYLE attribute to the SELECT tag. The style again defines the font to be a monospace type face, and this time defines the size to be 12 points.

Because of Netscape's weak support for style sheets, it doesn't understand this in-line style. However, since it allows the menu to inherit the properties of the FONT tag, we get nearly the same effect. The only difference is that we can define the exact font size we want using the style sheet, whereas Netscape has to use the old, abstract font sizes (1,2,3, etc.). So we end up with a menu that looks nearly identical under both major browsers.



Home Forms Fonts Setting Fonts In A Drop-Down Menu
Search MS Office A-Z   |   Search Web Pages/ Design A-Z