Strange rendering in HTML forms
HTML forms have always had strange issues. Here’s one I came across today that I’ve not seen before.
I have some HTML that looks like this:
<p>
<label for="foo">Foo<label>
<div class="error">
<input type="text".... />
</div>
</p>
The Firefox browser renders this as if it was:
<p>
<label for="foo">Foo<label>
</p>
<div class="error">
<input type="text".... />
</div>
The div causes the p* element to be closed early. The Firefox DOM inspector shows this quite nicely.
This HTML was originally generated by Rails scaffold code, so I had to make changes to it to make it work with my styles.
My fix was to remove the *p tags and use CSS to get the layout the way I want.
