|
CSS Tip:
Setting Fonts in a SELECT List
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
Want to stylize the menus in your HTML forms? Here's a way you can do so in both Netscape and Microsoft browsers.
One of the frustrating things about HTML forms is the lack of control you have over their look-and-feel. Whereas other HTML elements, such as tables and frames, let you set their font, dimensions, and color, it's hard to get the same kind of control over forms.
For example, suppose you want to build a drop-down menu in your page. 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. When you're trying to set your page layout, this inability to control the width of the menu can be a real headache.
To get around this problem, you might try wrapping a FONT tag around the SELECT list, like this:
<FORM METHOD=GET ACTION="something">
<FONT FACE="monospace" SIZE="2">
<SELECT NAME=my_menu>
<OPTION>Red
<OPTION>Green
<OPTION>Blue
</SELECT>
</FONT>
</FORM>
|
This sets the menu's type face to be a monospace font, such as Courier, and sets its size to be "2." Of course, you could use any font name or size you want.
This works well under Netscape browsers, but has no effect at all under Microsoft Internet Explorer.
The solution is to use a Cascading Style Sheet to fix the font under MSIE, like this:
<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.
|
