<TD> as checkbox label

[xn1]

Can anyone tell me why the following works in IE but nothing else?

 

<label><td>Clicking this cell selects the checkbox</td></label>

 

Consider me confused.

[BluB]

As to why it wont work I can't help you. It's just different browsers interpreting things differently.

After some testing, what I can tell is that the following works on Chrome, Firefox4, and IE8:

 

<td><label for="foo"><span style="display:block"><input type="checkbox" id="foo" name="option1" value="opt1">option1<br></span></label></td>

 

[cssfreakie]

or try this :

 

in case tables is the way you want to go

<style type="text/css">/* external stylesheets ftw */
#monkeys span{
    background:greenyellow;
    padding: 3px 0;
    display:block;
}
</style>

<form action="..." method="post">
<table id="monkeys">
  <tr>
    <td><label for="fname"><span>firstname</span></label></td>
    <td><input type="text" name="firstname" id="fname" /></td>
  </tr>
    <td><label for="lname"><span>lastname</span></label></td>
    <td><input type="text" name="lastname" id="lname" /></td>
</table>
</form>

[cssfreakie]

i changed the css a bit: might looks nicer this way

 

 

<style type="text/css">/* external stylesheets ftw */
#monkeys span{
    background:greenyellow;
    padding: 3px 0;
    display:block;
    width:80px;
    text-align: center;
}
</style>

<form action="..." method="post">
<table id="monkeys">
  <tr>
    <td><label for="fname"><span>firstname</span></label></td>
    <td><input type="text" name="firstname" id="fname" /></td>
  </tr>
    <td><label for="lname"><span>lastname</span></label></td>
    <td><input type="text" name="lastname" id="lname" /></td>
</table>
</form>

 

tested in IE 789 opera firefox chrome safari

[xn1]

Thank-you for the responses. I was aiming to have the label tags outside the table cell tags, so that clicking the cell checked the checkbox. But it only works in ie.

 

 

[BluB]

The methods mentioned above will actually do that, they allow checking the check box by clicking the cell. This is accomplished with styling of the span element. The reason why we do not put the label tag outside of the cell is exactly because of the reason that it only works in IE that way.