Dynamic forms and tables in Mozilla

Published July 4th, 2005

After giving up trying to achieve what I wanted to using CSS, I resorted to using a table to lay out a form. So shoot me.

Anyway, out of force of habit, I wrote the table like this:

<table>
<form>
<tr><td>Name</td><td>[Form element]</td></tr>
...some more rows...
</form>
</table>

…note how the

tags are hidden ‘inside’ the table structure — this is an old workaround for the way browsers tend to add extra whitespace around forms.

Then today, I wrote a bit of Javascript that adds elements to a form dynamically and found that in Mozilla, these new elements weren’t being recognised. Very odd. I fiddled around a bit and then on a hunch, moved the form tags so that they were outside the table structure — so:

<form>
<table>
<tr><td>Name</td><td>[Form element]</td></>
...some more rows...
</table>
</form>

…and all of a sudden, everything was hunky-dory.

Presumably some sort of DOM validation problem?

Get a Trackback link

10 Comments

  1. John on July 12, 2005

    Putting the FORM tag in a space which is never actually rendered probably prevented it from being parsed by the browser. The only parts of a table which are actually rendered by the browser are TH and TD

  2. Stickman on July 12, 2005

    Indeed. It was never valid, I just found it slightly odd that it works as ‘raw’ HTML (ie as part of an html document), but not when used dynamically (using innerHTML). Really, it should never have worked.

  3. scudsucker on August 4, 2005

    I set Dreamweaver to open a new CSS file with this code already in it for that form extra whitespace bug:
    * form {
    /* For that evil IE layout bug */
    margin:0px;
    padding:0px;
    }

  4. Stickman on August 4, 2005

    Yeah that’s the smart way to do it :). In fact I have the same code in my CSS, it’s just force of habit that led me to code it this way.

  5. Roark on October 12, 2005

    Hey Stickman,

    Man that has been buggin the S**T outa me for weeks, I’ve been doin the same thing and thought it wasn’t possible to add fields dynamically to a form in FF, then as if guided by some strange force I get to this post and Wham! you’ve solved the problem.

    So just a big thanks, doubt I’d ever have gotten it!

    Thanks man

  6. eggsurplus on December 23, 2005

    Same thing here! Thank you very much for posting this thing that now seems so simple but was easy to over look! I was pulling my hair out trying to figure out why the dynamic fields weren’t posting in Mozilla.

  7. Mikael on April 6, 2006

    great! i also had the same problem. damn webdevelopers can’t follow the standards ;-)

  8. flykoo on October 20, 2006

    Nevertheles, Mozilla is cool thing! I use it instead of Opera. But I have no problems with it

  9. Overtonesinger on November 15, 2006

    Cool! Thanx.

  10. Shashi on July 9, 2011

    Bingooooooooo….it solved my problem… Had been struggling with this issue for almost a week now….. thank u so much for posting this…it helped me after been posted for more than 6 years now…thanks a ton

Leave a comment

Comment Policy: First time comments are moderated. Please be patient.

OpenID

Anonymous