Hack 48 Deal with Design and Layout Issues

Embed the Button Factory code in a table to maintain the appearance of your web page's layout .

Browsers interpret HTML forms in different ways that can affect the appearance of your web page. Most browsers create unwanted spacing where HTML forms are inserted, similar to the effect of a line break tag ( <br> ). If your web page's design and layout is very precise, it can be negatively affected by PayPal's code, throwing your layout off by a few pixels. Avoid this effect by embedding the button code in an otherwise empty table.

Make a backup of your original file before trying this hack. It is easier to start from the original if you make a mistake.

Here is the familiar button code, generated at the PayPal site, surrounded by the table markup. The width , border , cellspacing , and cellpadding variables are all set to zero:

 <table width="0" border="0" cellspacing="0" cellpadding="0">   <tr>     <td> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="business" value="[e-mail]"> <!-- Other input elements here --> </form>     </td>   </tr> </table> 

However, this code will still cause shifting in the design. Avoid this shift by moving the opening and closing form tags outside of the opening and closing table data tags:

 <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <table width="0" border="0" cellspacing="0" cellpadding="0">   <tr> 1.  <td> 2.  <input type="hidden" name="cmd" value="_xclick"> 3.  <input type="hidden" name="business" value="[e-mail]"> 4.  <!-- Other input elements here --> 5.  </td>   </tr> </table> </form> 

Now, when the page is viewed in a browser, no shifting appears where the form has been inserted, as shown in Figure 5-3.

Figure 5-3. Cleaning up alignment problems

To perfect your table spacing, make sure to eliminate any extraneous spaces or line breaks between the <td> and </td> tags. For instance, if you put lines 1 through 5 all on one line, removing all spaces between the tags, you'll remove the last of the unsightly gaps from your tables.