<FORM> tage in IE vs FF & Other Browsers

[Spoons]

I suspect this is either by design or a bug but i just thought it would be worth asking the question whether anyone knew a way around this slightly annoying problem.

Take the code below as a simple example, there will be a 20-30px gap between the form and the bottom table when viewed in IE. It also doesnt matter what comes after the 1st form, as it seems anything that comes after the </FORM> tag will be shoved down the page by again approx 20-30px. This doesnt happed in FF and any of the other browsers. Just IE. Makes formating forms and tables for different browsers almost impossible.

<FORM NAME="form1" METHOD="post" ACTION="">
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0">
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
</TABLE>
</FORM> <------ gap appears here
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0">
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
</TABLE>

[mwinter]

Take the code below as a simple example, there will be a 20-30px gap between the form and the bottom table when viewed in IE. It also doesnt matter what comes after the 1st form, as it seems anything that comes after the </FORM> tag will be shoved down the page by again approx 20-30px.

With the code you posted, I see a gap in both IE and Fx (I didn't check elsewhere).

The form element, like many block-level elements, has a bottom margin. This is what creates the gap. You can use a CSS declaration to remove it:

form {
  margin-bottom: 0;
}

Be aware that some elements have top margins, and other have both. Some may even have padding, and this can vary between browsers, too.

If you want precise control over this sort of behaviour, you can remove both margin and padding on all elements, then selectively add it with other rules. For example:

* {
  margin: 0;
  padding: 0;
}
p {
  margin: 0.5em 0;
}

Mike