CODEWITHSUNDEEP
cssinternet-explorerfirefoxhtml-table
Dan
Dan

Reputation: 3367

Table cells displaying unwanted padding in Firefox and IE

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?

Upvotes: 2

Views: 6148

Answers (3)

Max
Max

Reputation: 1

I had this issue with images in the bottom <td> elements of a table. With Firefox there was an additional 2px shown below the image. (IE was ok.)

Anyway, I landed on this interesting page: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

The image was sitting on the text baseline (apparently) and I added this tag to the image 

style="display: block;"

Upvotes: 0

L&#232;se majest&#233;
L&#232;se majest&#233;

Reputation: 8045

The problem is caused by the formatting of your HTML. The W3C specs are unclear on this issue, but inline elements don't always ignore white space elements that you might use for code formatting. They might collapse white spaces down to a single character (unless it's a non-breaking space), but it's still there.

Problem

Right now your code looks like this:

<a href="...">
  <img src="..."/>
</a>

You might think this should be the same as:

<a href="..."><img src="..."/></a>

but it's not; it's interpreted by Firefox as:

<a href="..."> <img src="..."/> </a>

Unfortunately, the W3C specs don't specifically require user-agents to either ignore or render white spaces immediately after a start tag or immediate before an end tag, so some browsers will render them, some will completely ignore them, and some will sorta ignore them but not completely.

In your case, it's the latter. The white space isn't really rendered (at least not horizontally), but the img tag is now treated as being rendered inside a block of text. The extra vertical space you see is caused by the vertical alignment of the img relative to the baseline of the text block.

Solution

Now, I've never been really good with vertical-align issues, but there are a few solutions to this problem:

  1. You can simply set vertical-align: top on the img tag.
  2. You can get rid of the code formatting and eliminate the white spaces on either side of img.
  3. You can change the font-size to something really small, like 1px.
  4. You can use a proper background-image on the container (i.e. table) instead of rendering the element in slices.

Personally, for stylistic and practical reasons, I would do both 2 and 4. For inline elements like a, it's just safer not padding the contents with white space. And using a proper background means you don't need to worry about pixel-perfect alignment, and you can reduce image sizes. Though I also wouldn't use a table in this case.

Upvotes: 10

Nick
Nick

Reputation: 8530

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>

Upvotes: 1

Related Questions