How to get rid of padding around a form?

[Lorel]

I have two buttons inside a table cell to Check Cart an View Cart. I have them aligned to the right and using spacer gifs to get them aligned where I want inside the cell. The buttons are only 20 px high. However the Form code that surrounds the buttons must be adding extra padding because even though the cell contents are valign="middle" they are aligned to the top with about 15 px of space below the buttons. I want very little space around the buttons.

Do forms add their own padding automatically? I'm familiar with CSS, just never encountered this with a form. I have collapsed the TD cells as much as possible so that's not what is doing it.

This occurs on the following Browsers:

Newest Safari, Netscape, Firefox on the Mac (on Opera there is also padding above the button which makes it even larger space). On Win XP IE 6 and Firefox it has padding below the buttons.

Anyone know how to prevent the extra space?

<table align="center" width="760" border="0" cellpadding="0" cellspacing="0">
<tr><td bgcolor="#009933" align="right" valign="middle"><form name="form1" method="post" action="http://www.EXAMPLEserver.com/sc/cart.cgi"><input type=hidden name=item2 value="a-2817"><input name=view type=image src="http://www.example.com/images/jbviewcart.gif"><img src="images/spacer.gif" width="42" height="20" border="0" alt="spacer"><input name=checkout type=image src="http://www.example.com/images/jbcheckout.gif"><img src="images/spacer.gif" width="130" height="20" border="0" alt="spacer"></form></td></tr></table>

[sonjay]

In your style sheet:

form {
margin:0;
padding:0;
}

[Lorel]

thanks but this didn't work. I checked several browsers.

[encyclo]

You should also try making the form display as an inline element rather than a block element:

form {
margin:0;
padding:0;
[b]display:inline;[/b]
}

That may help. :)

[Lorel]

The margin:0px; padding:0px; display:inline; took out the extra padding around the buttons on all browsers but Win XP IE 6 where there is still excess padding under the buttons.

However now those two buttons are moved way over to the left when I have that cell "align="right" and the background color disappeared too which was set for that cell.

Anyone know why this would happen?

Maybe I need to set the image at 0margins also, however I've never had success loading two classes on the same cell.

[Lorel]

I figured out why the buttons were not aligned to the right. I actually had another row of cells above this one, I just didn't include them in this code. The two cells above were 500 px wide and 250 px.
The row where these two buttons reside had a colum span tag in there for two columns so these buttons should have been pushed to the right. However they stopped at the end of the first cell mentioned above at 500 wide. So, for some reason since putting in the form class it was not moving past the first cell.

I therefore made a table just for this cell and now the buttons move to the right and there is now a green background like it should be but they still have too much padding below the buttons.

Here is the new and improved code: (I changed the name of form class to formimg in case "Form" is one of the words I can't use and used vertical align bottom in case it's the images messing this up.

<table align="center" width="760" border="0" cellpadding="0" cellspacing="0" bgcolor="#009933"><tr><td align="right" valign="bottom" class="formimg"><form name="form1" method="post" action="http://www.DOMAINserver.com/sc/cart.cgi"><input type=hidden name=item2 value="a-2817"><input name=view type=image src="http://www.DOMAIN.com/images/jbviewcart.gif"><img src="images/spacer.gif" width="42" height="20" border="0" alt="spacer"><input name=checkout type=image src="http://www.DOMAIN.com/images/jbcheckout.gif"><img src="images/spacer.gif" width="138" height="20" border="0" alt="spacer"></form></td></tr></table>

and the css:

.formimg {margin:0px; padding:0px; display:inline; vertical-align: bottom; }

Can anyone tell why there is still about 15px of padding under the buttons?

[monkeythumpa]

Put the <form> tags outside of the data cell like this:

<table align="center" width="760" border="0" cellpadding="0" cellspacing="0" bgcolor="#009933"><tr><form name="form1" method="post" action="http://www.DOMAINserver.com/sc/cart.cgi"><td align="right" valign="bottom" class="formimg"><input type=hidden name=item2 value="a-2817"><input name=view type=image src="http://www.DOMAIN.com/images/jbviewcart.gif"><img src="images/spacer.gif" width="42" height="20" border="0" alt="spacer"><input name=checkout type=image src="http://www.DOMAIN.com/images/jbcheckout.gif"><img src="images/spacer.gif" width="138" height="20" border="0" alt="spacer"></td></form></tr></table>

Ugly but works. If you don't like that, you can remove the 20PX SPACER IMAGE and just center the button.

[Lorel]

Thanks Monkeythumpa That worked.

There was a space between the two tables in Opera but it looked ok on all other browsers. I then changed it back to one table and it worked on all browsers.

thanks much.