Nothing is as much of a pain as having two colors divs sitting side by side that look great in one browser but have different heights in another browser. This can happen with callout boxes in the content of a page, or more commonly with a left- or right-hand sidebar that isn't the same height as the content column. Luckily, with jQuery fixing that kind of problem is easy.
For the longest while, I've known that it's possible to create form fields on the fly with JavaScript, say, for the purpose of offering as many file upload fields as a user needs in a form. I could always get the script to work, either with the appendChild() function or by writing to innerHTML. And though posting the dynamic form would work in IE, I could never get the form fields to POST to Firefox. Happily, I've just found out why it didn't work for me while other developers never seemed to mention the problem in their blogs.
It's my coding habits.
The more detailed reason is that because of a quirk of browser style history where form tags caused extra vertical "padding" in a web page, I've always embedded my form tags within table tags:
<table>
<form>
<!-- Table rows and cells -->
</form>
</table>
And the answer to the problem is to take my form tags out from inside the table. Voila! Any dynamic fields created in the form will now be posted correctly in any browser, including Firefox.
<form>
<table>
<!-- Table rows and cells -->
</table>
</form>
So I thought I'd share this in case anyone else shared this same habit. As for the extra whitespace, I'm advised you can just apply CSS to your form tag to get rid of the padding.
