I have a problem with select listboxes under Firefox 3.5.6.
When both the "size" attribute and "style:height" attribute are specified, the select control does not seem to process Page Up and Page Down key presses properly. They act strangely: first of all they scroll through the options one at a time, just like an arrow up or down key press. Second of all, the direction is reversed: Page Up moves the selection down while Page Down moves the selection up.
Here is some code that displays this behaviour:
<select size="9" name="lbTest1" id="lbTest1" style="height: 150px; width: 250px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="0">0</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">11</option>
</select>
Of course, I can fix this by removing the "height" option from the "style" attribute and it works, like so:
<select size="9" name="lbTest2" id="lbTest2" style="width: 250px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="0">0</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">11</option>
</select>
But I would like to know if this is a Firefox issue: I am about to fix the bug and I want to know what should I mention in the description.
In IE 8 the select behaves the same way with or without the "height" set. However, Chrome seems to ignore the Page Up or Down for the both examples above (Chrome is not an issue for me, but I just thought that it may be another example how browser behave in different manners).
Thank you in advance, Teo