nested - HTML tags inside <label>

Question

I have a table in a page that consists of checkboxes in the cells on the left and descriptions in the cells on the right. The "description" contains h4 headers and plain text. I want to make that whole description (everything inside <td></td>) a label.

So each row looks like this:

<tr><td><input type="checkbox" name="entiries[]" value="i1" id="i1"></td>
<td><label for="i1">
<h4>Some stuff</h4>more stuff..
<h4>Some stuff</h4>more stuff..
</label>
</td></tr>

This does not work however, the text does not act like a label and is not clickable. I'm using Firefox 3.6 to test it. If I remove <h4> tags it starts working, but that complicates formatting. Is there something about <h*> tags that prevents <label> from working correctly?

Answer 1

Block level elements (to which h4 belongs) are not allowed inside inline elements, and will cause undefined behaviour. You can use span elements instead.