Form pushing everything apart...

[michaelwheaton]

The site I'm currently working on uses an image as a submit button. This button is functioning fine, but for some reason the table cell it is in has been stretched- causing everything in that row to line up incorrectly. A little hard to explain, it's probably easier just to view it at:

http://www.earspy.com

The button that says "Order" is the form. I have tried setting the table row and individual cell heights. All of the code for that table cell is on a single line, with no empty spaces. Here's the code for that particular area:

<table width="750" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="35">&nbsp;</td>
    <td width="20"><img src="images/7a.gif" width="20" height="60"></td>
    <td width="25" bgcolor="#FF9900">&nbsp;</td>
    <td width="235"><img src="images/7b.gif" width="235" height="60"></td>
    <td width="65" bgcolor="#FF9900">&nbsp;</td>
    <td width="170" height="60"><form method="post" action="https://www.2checkout.com/cgi-bin/sbuyers/purchase.2c"><INPUT type="image" src="images/7c.gif" width="170" height="60"><input type=hidden name=sid value=31581><input type=hidden name=product_id value=1><input type=hidden name=quantity value=1></form></td>
	<td width="115"><img src="images/7d.gif" width="115" height="60"></td>
	<td width="85">&nbsp;</td>
  </tr>
</table>

It looks fine in Opera, but not in Internet Explorer. Any suggestions would be greatly appreciated!

[Skunk]

That'll be the form tag trying to create it's own personal space. The easiest way to stop it doing that it to "hide" the <form> and </form> tags between table cells, like this:

<table width="750" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="35"> </td>
    <td width="20"><img src="images/7a.gif" width="20" height="60"></td>
    <td width="25" bgcolor="#FF9900"> </td>
    <td width="235"><img src="images/7b.gif" width="235" height="60"></td>
    <td width="65" bgcolor="#FF9900"> </td><form method="post" action="https://www.2checkout.com/cgi-bin/sbuyers/purchase.2c">
    <td width="170" height="60"><INPUT type="image" src="images/7c.gif" width="170" height="60"><input type=hidden name=sid value=31581><input type=hidden name=product_id value=1><input type=hidden name=quantity value=1></td>
</form>
	<td width="115"><img src="images/7d.gif" width="115" height="60"></td>
	<td width="85"> </td>
  </tr>
</table>

[jofa]

Put the <form> outside the <table>

<form method="post" action="https://www.2checkout.com/cgi-bin/sbuyers/purchase.2c">
<table width="750" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="35"> </td>
    <td width="20"><img src="images/7a.gif" width="20" height="60"></td>
    <td width="25" bgcolor="#FF9900"> </td>
    <td width="235"><img src="images/7b.gif" width="235" height="60"></td>
    <td width="65" bgcolor="#FF9900"> </td>
    <td width="170" height="60"><INPUT type="image" src="images/7c.gif" ... </td>
	<td width="115"><img src="images/7d.gif" width="115" height="60"></td>
	<td width="85"> </td>
  </tr>
</table>
</form>

[jofa]

Or add this:
<form meth........ style="margin:0px;">