CSS, JavaScript and XHTML Explained

IE6 & IE7 label bug (implicit label bug) September 10, 2009

HTML and XHTML specifications allow both implicit and explicit labels. However,  IE6 and IE7 do not correctly handle implicit labels. When including implicit labels, IE6 and IE7 treat the input as one label and the text within the element as a second label. In other words, if you include padding, margin, bakcground images, or, in the case of IEs, hasLayout like "zoom", the styles will be added to both the input part of the label and to the text part of the label.

For example, <label>First name <input type=”text” name=”firstname”></label>. IE6 and IE7 interpret the code as if you wrote <labe>First name</label><label><input type=”text” name=”firstname”></label>.

Generally, this isn’t a major issue, which is probably why I couldn’t find documentation on this bug. However, if you want to put a background image between the input and the text, if you want to put a border around the label, or if the label is floated left and you need to give "hasLayout" for IE6, that’s where it gets tricky.

(note: if you use zoom: 1 on your label, the label will display on two lines: one for the input, and the other for the text)

The implicit label is valid according to the w3c. See the W3C Label Specifications. The w3c states “To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.”

Some may argue “just use explicit labels”, and there are accessibility arguments around that. However, old versions of JAWS , in forms mode, did not read the label for implicit labels on checkboxes and radio fields. I believe that has been fixed.

My fix was inane, yet valid. I assume this is such an esoteric bug that I don’t need to create recommendations on fixing it. I just wanted to document it in case someone else comes across this bug