issue with forms creating spaces in tables

[Wozzzzza]

i have a website design which i have put together and in the bar across the top i have a login box in a table within a table cell of the outer table and then i put the form tag in the inner table with the login boxes it makes spaces around because it expands the table for some reason and it looks awful and i cant work out how to get rid of it and the only way to do get rid of it is place the form tags at the beginning and end of the page and i dont want to do that cause i have another form on the page.
see pictures of problem below.

<Sorry, no urls for example pages.
See Forum Charter [webmasterworld.com]>

[edited by: tedster at 2:45 am (utc) on July 7, 2006]

[tedster]

Almost definitely a Standards Mode issue - where you are expecting the mark-up to render as it does in Quirks Mode.

Try this in the html:

<td class="special"><form>your form here</form></td>

...and then adjust the css:

.special form {margin:0;padding:0;}

Reference thread: Standards Mode and Quirks Mode [webmasterworld.com]

[Wozzzzza]

thanks heaps, i never thought of applying margins to a form, but it worked perfectly. im now a happy chappy and my site looks nice once again.

[rocknbil]

A similar solution,

.nospace {margin:0;padding:0;}
<td><form class="nospace">your form here</form></td>

If you ever move away from tabled layout, or put the form somewhere outside the table, this will still maintain the tight spacing on the form itself. Forms are generally the culprit of problem you describe, a forced space after the form. Additionally, naming the selector nospace is an indicator of what it does, and you can apply it to most other objects:

<p class="nospace">
<h4 class="nospace">

[tedster]

Because browsers use different default values for padding and margin on different elements, I find it helpful to begin my stylesheet with this line:

* {margin: 0; padding: 0;}

Then I must explicitly set every element I use to the margin and padding I require -- no cross-browser surprises. However, using that rule means I must remember to explicitly set elements such as <ul> or whatever else comes up in the mark-up. Still, I feel the final results are quite worth the obsessive precision.

[AWildman]

form {display: inline;} does the trick for me.