I found this really strange issue with Firefox today. After taking out all of the different variables I realized that when I set the width of a select control using inline CSS, the functionality gets buggy.

Here is the code to generate a normal (no css) select control along with the a screenshot of what gets rendered:

<select id="shipAccount" name="shipAccount">
<option value=" "> </option>
<option value="1">United Parcel Service Red: 045-056</option>
<option value="1">United Parcel Service Red</option>
</select>

And here is the code to generate a select control with the width set using inline CSS and a screenshot of what gets rendered:

<select id="shipAccount" name="shipAccount" style="width:175px;">
<option value=" "> </option>
<option value="1">United Parcel Service Red: 045-056</option>
<option value="1">United Parcel Service Red</option>
</select>

As you can see, the options are exactly the same for both select control. The difference is that the select control without CSS allows you to click anywhere on each row of the drop down. In addition, the entire row gets highlighted when your mouse is over that row. The select control that has the width set using inline CSS, though, that will only highlight and let you click on the characters of the actual option rather than anywhere on the row. I don't think I did anything wrong here.