Typical formatting of all HTML 4.0 FORM tag has a strange behavior when it contains a table cell inside. A strange vertical space appears after the FORM, even there is no <BR> or something else there.
Here is the a typical behavior:

Email:

and the code is:

<table style="text-align: left; background-color: #336699; width: 300px;" border="1" cellpadding="2" cellspacing="0">
    <tr>
      <td>
      <form name="example1">
        <table style="text-align: left; background-color: #ffffff; width: 100%;" border="1" cellpadding="2" cellspacing="0">
            <tr>
              <td><small><span style="font-family: Tahoma;">Email:</span></small></td>
              <td><input name="text1" value="just a test"></td>
            </tr>
            <tr>
              <td rowspan="1" colspan="2"><input name="Submit" value="Submit" type="submit"></td>
            </tr>
        </table>
      </form>
      </td>
    </tr>
</table>


This is a typical formatting of HTML 4.0 issue, as Appendix A. A sample style sheet for HTML 4.0 said:

FORM            { margin: 1.33em 0 }

so the left and right margins are set to 0 and the upper and lower margins are set to 1.33em. Almost all the browsers suppress the upper margin, but not the lower one.

To suppress the lower one, we have 2 approaches:
1. nesting the FORM tag (not the most elegant approach)
2. suppress the margin from CSS

1. Nesting the FORM tag

We can move the FORM tag between TR and TD, and the result is:

Email:

and the code is:

<table style="text-align: left; background-color: #336699; width: 300px;" border="1" cellpadding="2" cellspacing="0">
    <tr>
      <form name="example2">
      <td>
        <table style="text-align: left; background-color: #ffffff; width: 100%;" border="1" cellpadding="2" cellspacing="0">
            <tr>
              <td><small><span style="font-family: Tahoma;">Email:</span></small></td>
              <td><input name="text2" value="just a test"></td>
            </tr>
            <tr>
              <td rowspan="1" colspan="2"><input name="Submit2" value="Submit" type="submit"></td>
            </tr>
        </table>
      </td>
      </form>
    </tr>
</table>

2. Suppress the margin from CSS

We simply add style="margin-bottom: 0pt;" to the FORM tag, and the result is:

Email:

and the code is:

<table style="text-align: left; background-color: #336699; width: 300px;" border="1" cellpadding="2" cellspacing="0">
    <tr>
      <td>
      <form name="example3" style="margin-bottom: 0pt;">
        <table style="text-align: left; background-color: #ffffff; width: 100%;" border="1" cellpadding="2" cellspacing="0">
            <tr>
              <td><small><span style="font-family: Tahoma;">Email:</span></small></td>
              <td><input name="text3" value="just a test"></td>
            </tr>
            <tr>
              <td rowspan="1" colspan="2"><input name="Submit3" value="Submit" type="submit"></td>
            </tr>
        </table>
      </form>
      </td>
    </tr>
</table>

Conclusion:
The best method to suppress the vertical space after forms is to add style="margin-bottom: 0pt;" to the FORM tag.
However, other methods may apply for old browsers, such as Netscape 4 (I use to call this browser as “Site-breaker”).


Andrei
http://www.webxpert.ro


Leave a Reply