Strange rendering in HTML forms

September 23, 2005 Link to post  Permalink

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.