Form margins
Is there a way to get rid of the space margins around forms like drop-down menus?
Yes, CSS is one way, though not the best method. There are 2 things you should do to correct the problem properly. First, place the form within a table with border, cellspacing and cellpadding all set to 0. You should keep each element in it's own cell. This won't solve your problem completely, but it is a good habit to get into, forms are much better used when they are within a table.
To answer your question, when browsers interpret the <form> tags, they add an extra linebreak there. You should keep all your forms in one form, as opposed to separate forms, this keeps the individual elements from double-spacing. Next, place whatever text is above or below the form elements within the form tags. i.e.
<form>
Enter your name:<br>
<input type=text name="name">
Thanks for putting in your name.
</form>
To answer your question, when browsers interpret the <form> tags, they add an extra linebreak there. You should keep all your forms in one form, as opposed to separate forms, this keeps the individual elements from double-spacing. Next, place whatever text is above or below the form elements within the form tags. i.e.
<form>
Enter your name:<br>
<input type=text name="name">
Thanks for putting in your name.
</form>
ASKER
It IS in a table, but that doesn't solve my problem. I think the CSS way is the way to go, but I'm going to leave this question open, just in case. If no other answer presents itself, then I'll give points to nettrom.
The reason I don't want the extra linebreak is because the height of a table row depends on the form (i.e. the form is there, so the table row is taller because of the extra space below the form) and the table row is shaded in the background.
The reason I don't want the extra linebreak is because the height of a table row depends on the form (i.e. the form is there, so the table row is taller because of the extra space below the form) and the table row is shaded in the background.
did you do the second part? Please post the code of your form (or at least some of it), it shouldn't double-space if you do that. Make sure that each form element isn't in it's own form, it should be something like this:
<form>
<table>
<tr>
<td><input></td>
<td><input></td>
</tr><tr>
<td><input></td>
<td><input></td>
</tr>
</table>
</form>
I'd avoid CSS because it only works with newer browsers, and isn't perfectly cross-compatable either, so it is better to fix it using plain HTML.
Please post your code, or a link to your page, so we can see what your problem is. Thanks.
<form>
<table>
<tr>
<td><input></td>
<td><input></td>
</tr><tr>
<td><input></td>
<td><input></td>
</tr>
</table>
</form>
I'd avoid CSS because it only works with newer browsers, and isn't perfectly cross-compatable either, so it is better to fix it using plain HTML.
Please post your code, or a link to your page, so we can see what your problem is. Thanks.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Fixed the -1 problem on this question.
Escrow points corrected.
kb
Community Support Moderator
Experts Exchange
Escrow points corrected.
kb
Community Support Moderator
Experts Exchange
<style type="text/css">
select { margin-top: 0; margin-bottom: 0; }
</style>
should do the trick. only works in those browsers that support CSS well. don't think Netscape does it. IE4/5 does, from what I've been able to find out with tests.