Weird dropdown behavior in FF

[garann]

I've never seen this one before. I'm wondering if it has something to do with how I'm using the label?

I have three dropdowns in a row. In Firefox, I can click on and expand the first one, but to expand the second and third, I have to click and drag. The last two dropdowns close onmouseup. I can tab into them and use the arrows, but onmouseup, focus returns to the first dropdown.

Here's code:

<label>test date
<span>
<select id="_id1_month" name="_id1_month">
<option value="6">6</option>
<option value="7">7</option>
</select>
<select id="_id1_day" name="_id1_day">
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
...
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="_id1_year" name="_id1_year">
<option value="2005" selected="true">2005</option>
</select>
</span>
</label>

Does anyone know what might be causing this?

Thanks!
g.

[encyclo]

Firstly you have validation errors as your

id

attributes cannot start with an underscore. The other error is that the

selected

attribute value should not be true - it should read

selected="selected"

.

However the problem is, as you guessed, in the way you are using the

label

. The specification is clear in that a

label

related to one form control, and you should use the

for

attribute to identify the related control rather than enclosing the form control itself. For example:

<label [b]for="id1_month"[/b]>test date</label>

You will need a label for each

id

.

[garann]

Yeah, I'm aware of the problems with ID and selected. This is server-generated code, so I didn't take time to fix it before getting this figured out.

As for the label, would it be valid to change that containing span to a fieldset and assign the label to its ID? Those three drop-downs only really function as a group, so I'd like to have a consistent way of grouping them.

Also, can you explain this?

you should use the for attribute to identify the related control rather than enclosing the form control itself

If it's strictly necessary, I can do it, but for styling the label makes an awfully good container for a form element and its label without introducing unecessary tags. Do I need to do it this way?

[garann]

I still don't know what to do about setting up this control so it's standards compliant, but for anyone wanting to fix the behavior problem, the solution is just to add a

for

attribute to the label.

[natty]

you tried the fieldset tag?
a even better way of grouping form elements together i find, and can be nicely styled with a legend tag..
just my 2 pence.