Home/ Questions/Q 7175119
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T16:12:55+00:00

I have two table cells. The first contains a link and an image (CollegiateLink).

  • 0

I have two table cells. The first contains a link and an image (“CollegiateLink”). The second contains a form with an image for the submit button (“Pay Dues”):

enter image description here

In Firefox and IE, the cells have unwanted padding as shown above. In Chrome they appear fine. Why is this?

Here’s the source for the table row:

<tr>
    <td>
        <a href="https://utsa.collegiatelink.net/organization/sigmakappaupsilonhonorsociety">
        <img src="http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/396010_343796938973248_154024167950527_1347540_1267421848_n.jpg" onMouseOver="this.src='http://a4.sphotos.ak.fbcdn.net/hphotos-ak-snc7/404415_343796945639914_154024167950527_1347541_548420198_n.jpg'" 
            alt="CollegiateLink" onMouseOut="this.src='http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/396010_343796938973248_154024167950527_1347540_1267421848_n.jpg'" />
        </a>
    </td>
    <td>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="UVBXKLNNGX8GL">
        <input type="image" src="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/382615_343796955639913_154024167950527_1347542_331738916_n.jpg" onMouseOver="this.src='http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/396479_343796968973245_154024167950527_1347543_1793145374_n.jpg'" 
            onMouseOut="this.src='http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/382615_343796955639913_154024167950527_1347542_331738916_n.jpg'" border="0" name="submit" 
            alt="PayPal - The safer, easier way to pay online!">
        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" style="position: absolute; bottom: 0; right: 0;">
        </form>
    </td>
</tr>

A (non)working example of the problem can be found here: http://www.facebook.com/sky.utsa

I can’t use an image map because the “Pay Dues” image is a form element, not an anchor tag. I’ve tried explicitly setting the td heights with no success. Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could merge the two <td> elements that are causing problems in Firefox and float the button and form alongside each other.

    Instead of:

    <tr>
   <td>
      <a href="#">
         <img src="image.jpg"/>
      </a>
   </td>

   <td>
      <form target="_blank" method="post" action="">
         <!-- form stuff here -->
      </form>
   </td>
</tr>

    Try this:

    <tr>
   <td>
      <a href="#" style="float:left;">
         <img src="image.jpg"/>
      </a>

      <form target="_blank" method="post" action="" style="float:left;">
         <!-- form stuff here -->
      </form>
   </td>
</tr>
    • 0