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>.
This is how IE6 and IE7 render:
This is how it should be rendered:
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
I am on a panel at
It´s even worse when it comes to functionality =P
http://twitter.com/anddoutoi/status/1037852048
Found out this when the CMS put a html comment before the input element =P clicking on the label element did nothing >.<
so how do u fix it? i’m running yahoo store which doesn’t let us modify the code but only style it with css. they have a strong tag and some text between the label and the input…need help!
Thanks for commenting. I didn’t think this bug ever had or would ever have impacted anyone else.
<li class=”has_bgImage”><label>
<i></i>My Text</li>
I stuck an empty <i> in there,
.iconography input {*background-color: #fff; *margin: 0; }
label i {*display: inline-block; *width: 16px;}
li label{*background-position-x: 20px;}
so, basically, i think i took the <i> and created a white shield to hide one of the background images.
the url for this example is http://hotels.uptake.com/california/san_francisco/863589679.html - the vacations theme in the search panel, if you want to see an example. Send me the url of your page so i can take a look and see if i can brainstorm a solution for you.