title: Select list shrinks in size horizontally when empty
body: <p>I have two select list boxes and i can move items back and forth between them using the forward (-->) and backward (&lt;--) button.
  However, if there are no items in a select list, it shrinks in size horizontally. Any way to keep the select list a fixed size, irrespective of whether it contains any options or not ?</p>
  
  <p>Below is the code:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;script language="JavaScript" type="text/javascript"&gt;
  &lt;!--
  
  var NS4 = (navigator.appName == "Netscape" &amp;&amp; parseInt(navigator.appVersion) &lt; 5);
  
  function addOption(theSel, theText, theValue)
  {
    var newOpt = new Option(theText, theValue);
    var selLength = theSel.length;
    theSel.options[selLength] = newOpt;
  }
  
  function deleteOption(theSel, theIndex)
  { 
    var selLength = theSel.length;
    if(selLength&gt;0)
    {
      theSel.options[theIndex] = null;
    }
  }
  
  function moveOptions(theSelFrom, theSelTo)
  {
  
    var selLength = theSelFrom.length;
    var selectedText = new Array();
    var selectedValues = new Array();
    var selectedCount = 0;
  
    var i;
  
    // Find the selected Options in reverse order
    // and delete them from the 'from' Select.
    for(i=selLength-1; i&gt;=0; i--)
    {
      if(theSelFrom.options[i].selected)
      {
        selectedText[selectedCount] = theSelFrom.options[i].text;
        selectedValues[selectedCount] = theSelFrom.options[i].value;
        deleteOption(theSelFrom, i);
        selectedCount++;
      }
    }
  
    // Add the selected text/values in reverse order.
    // This will add the Options to the 'to' Select
    // in the same order as they were in the 'from' Select.
    for(i=selectedCount-1; i&gt;=0; i--)
    {
      addOption(theSelTo, selectedText[i], selectedValues[i]);
    }
  
    if(NS4) history.go(0);
  }
  
  //--&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;form action="yourpage.asp" method="post"&gt;
  &lt;table border="0"&gt;
      &lt;tr&gt;
          &lt;td width="70"&gt;
              &lt;select name="sel1" size="10" multiple="multiple"&gt;
              &lt;option value="1"&gt;Left1&lt;/option&gt;
              &lt;option value="2"&gt;Left2&lt;/option&gt;
              &lt;option value="3"&gt;Left3&lt;/option&gt;
              &lt;option value="4"&gt;Left4&lt;/option&gt;
              &lt;option value="5"&gt;Left5&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td align="center" valign="middle"&gt;
              &lt;input type="button" value="--&amp;gt;"
               onclick="moveOptions(this.form.sel1, this.form.sel2);" /&gt;&lt;br /&gt;
              &lt;input type="button" value="&amp;lt;--"
               onclick="moveOptions(this.form.sel2, this.form.sel1);" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;select name="sel2" size="10" multiple="multiple"&gt;
              &lt;option value="1"&gt;Right1&lt;/option&gt;
              &lt;option value="2"&gt;Right2&lt;/option&gt;
              &lt;option value="3"&gt;Right3&lt;/option&gt;
              &lt;option value="4"&gt;Right4&lt;/option&gt;
              &lt;option value="5"&gt;Right5&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>