LWD logoLori's Web DesignLWD logo

How to Design Forms and Buttons without Vertical Space Around Them




Tables and Form Tags

The HTML specifications automatically add vertical space before the opening form tag and below the closing form tag. If you're using a table layout for formatting then you just need to but the table inside of the form tags and that should eliminate the extra vertical space. You also need to make sure that the table tag has no cell padding or cell spacing (also see below re collapsing table tags).

CSS and Form Tags

Using CSS (Cascading Style Sheets) to eliminate space around form tags is often a better option because you can specify no margin or padding around the form tags. Use the following style tag within your form tag (or include it in your CSS file):

<FORM NAME="PutFormNameHere" STYLE="margin:0; padding:0;">

Also be sure to validate your code because a misplaced Div can also add extra space around a form tag.

Preventing Space Around Buttons or Images

Some browsers, like Windows, add extra margins underneath images because images are treated like text in HTML (called inline elements) and text needs a margin below it for letters that hang below the baseline, like y, g and J. In order to prevent this space (3 pixels) you just need to add a style to the image tag specifying it should be displayed as a block element, like this:

<img src="button.jpg" style="display:block;">

When setting up buttons as images in tables you also need to be careful that you collapse the table tags (or divs if you are using CSS) so there is no added space after each TD cell, i.e., do not hit the return key after you type in each TD cell because some browsers will add space around the button or image. Put them all on one line like this:

<td><img src="image1.gif"></td><td><img src="image1.gif"></td><td>

Preventing Space Around Forms with Buttons

The following design was the result of needing to put 2 buttons, surrounded by form tags to view cart and checkout for a shopping cart, in a very vertically narrow and specific width horizontal space with a background. This needed to be accomplished without causing extra vertical space below the buttons. The finished product is shown here:

form button with no space above or below the buttons

No space above or below the form buttons on Mac or Windows

HTML specifications naturally apply extra vertical space below a FORM tag called padding or margins. Sometimes this vertical space also appeares above the buttons in some browsers as shown below:

form button with space above and below the buttons

Space above and below the form buttons on Mac - Opera

form button with space below the buttons

Space below the form buttons on Mac - Firefox, Safari, Netscape and Windows XP IE 6 and Firefox

Every solution found on the internet using CSS to remove the padding and margins didn't work in all browsers. A lot of solutions offered for this problem also wouldn't validate so it was a challenge to find a design that worked in all browsers and was HTML compliant.

Setting up a class in CSS as instructed in various tutorials for removing the vertical space from FORM tags did not work but applying style tags to the various tags did. Some of the suggestions had no effect whatsoever on the various tags. Also putting a Form tag inside of Table tags just multiplies the problems so that option was eliminated.

This particular design required a colored background with a width the same as the main body of the page and height the same as the buttons with the buttons aligned to the right with specific space between the 2 buttons. Table tags couldn't be used so the Form tags were surround by Divs to control placement. One div was used to center the 2nd div, being as the main page content was centered, and the 2nd div was used to apply align right to the contents and to specifiy the width and color of the background. Two spacer gifs were used to provide space between and on the right of the buttons. The finished design validates and works perfectly in all the following modern browsers:

On the Mac: Safari 2.0, Firefox 1.0.5, Netscape 7.2, Opera 8.5.1

On Windows: Win XP IE 6, Win XP FIrefox 1.0.6; and Win 98 IE6.

The code in the following example is broken up to be viewed easily but should be
collapsed to prevent any space between tags before loading.

<div align="center">
<div align="right" style="background-color:#009933; width:760px;">
<form name="form1" style="display:inline; margin-top:0px; margin-bottom:0px;" method="post" action="http://www.YOURDOMAINGOESHERE.com/sc/cart.cgi">
<input type=hidden name=item2 value="cart"><input name=view type=image src="images/viewcart.gif">
<img src="images/spacer.gif" width="66" height="21" border="0" alt="spacer">
<input name=checkout type=image src="images/checkout.gif"> <img src="images/spacer.gif" width="148" height="21" border="0" alt="spacer">
</form>
</div>
</div>


Google


Return to HTML TIPS

Lori's Web Design
Copyright © 2-25-06 - updated 3-20-15
All Rights Reserved

Twitter     Google+     Facebook     linked in