How to Design a Form around a Button without Vertical Space above or below the Button, Without using Tables, that works in all Browsers and Validates

HTML and CSS Design Tips by Lori's Web Design

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:

No space above or below the form buttons on Mac or Windows
(Click the image to see the original site)

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

Space above and below the form buttons on Mac - Opera

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.

Return to HTML TIPS