[thelist] [thelist]Drop down form thing

[Aylard JA (James)]

Elizabeth,
> 	I am creating a page with three separate drop down form thingys
...each
> with 8 or so menu items. ...all lined up nice and happy. Client wants
> them all to be the same "width" ...which seems to be determined by the
> length of the longest menu item within the drop down form thingy.  Anybody
> know of a way to get them all looking pretty and same size?

	Two ways:

1) Setting a width using style sheets, e.g.:

<style type="text/css">
  select {
    width: 150px ;
  }
</style>

	However, this has some serious downsides: IE sometimes won't render
the control properly, apparently due to some kind of bug, especially if
absolute positioning is used to place the <select>; and Netscape 4 totally
ignores the setting.

2) Plain old HTML. Determine how wide the widest option value will appear,
and then create an empty first option for each control with enough
non-breaking spaces (&nbsp;) to match or slightly exceed that longest value.
Apply that empty option element to each of your selects, and you'll be in
business. Should work cross-browser.

<select>
  <option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select>
  <option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
  <option value="A">Aay</option>
  <option value="B">Bee</option>
  <option value="C">See</option>
</select>

etc.

hth,
James Aylard
jaylard at equilon.com