[thelist] [thelist]Drop down form thing

Aylard JA (James) jaylard at equilon.com
Thu Jul 20 18:30:55 CDT 2000

> 	I am creating a page with three separate drop down form thingys
> 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 ;

	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.

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

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


James Aylard
jaylard at equilon.com

More information about the thelist mailing list