Ken Ward's Java Script Tutorial ...

Using Selects as Menus

When using selects as menus (or for other purposes) there may be an issue, especially with versions of Netscape, that the width of the select is inappropriate. One way to overcome this, is to have an initial option of sufficient length, for instance, "Your answer will appear here." Here is a simple (narrow) select (with no code and no text):

Select with no code:

You will notice it is rather narrow :-)

In modern versions of browsers, you can set the width of a select using simple code ( style="WIDTH: 500"):

<select name="MySelect" id="MySelect" size="10" style="width: 500" ondblclick="searchGo()">

Select Using New Code

Older versions of browsers (particularly Netscape), do not recognise the style attribute, and may produce an error if this is used (as above). The code for the Select Using Old Code is:

<style type="text/css"> <!-- .nsBrowser4 { WIDTH: 500px; FONT-FAMILY: tahoma, san-serif; FONT-SIZE:12px } .otherBrowser { WIDTH: 500px; BACKGROUND-COLOR:#00FFFF ; COLOR: #8000FF; FONT-FAMILY: tahoma, san-serif; FONT-SIZE: 12px } --> </style> <form method="post" action=""> <font class="nsBrowser4"> <select class="otherBrowser" name="selectOldCode"> <option> </option> </select> </font> </form>

The above code is used in the select below:

Select Using Old Code

The select below is directly from Search Engine Generator and does not use any style code. It may be necessary to modify it depending on your target browsers, etc.

If you are using a more modern version of Netscape, then you may find that all the code works fine. If not, you might notice that some selects produce errors or do not change their width.