GMail forcing TD containing spacer.gif to be 16px high

Question

So I've just lost several hours of my life trying to win this battle, with no luck. In summary, I'm trying to fill a table with three 10px images, but GMail is forcing each cell to be 16px. Here's what I am working with:

<table border="0" cellpadding="0" cellspacing="0" width="550" style="height:10px !important">
    <tr style="height:10px" height="10">
    <td width="10" height="10" style="height:10px !important">
        <img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/corner_tl.gif" style="display:inline; padding: 0px; margin:0px" width="10px" height="10px"></td>
    <td width="531" height="10" style="height:10px !important; background-color:#FFFFFF;">
        <img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/spacer.gif" style="display:inline; padding: 0px; margin:0px" width="10px" height="10px"></td>
    <td width="9" height="10" style="height:10px !important">
        <img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/corner_tr.gif" style="display:inline; padding: 0px; margin:0px" width="9px" height="10px"></td>
    </tr>
</table>

My apologies that there are so many redundant attributes, because I've been trying everything. Basically, I'm trying to make the table exactly 10px high. No matter what, however, GMail makes it 16px high. If I use developer tools to delete all three images straight from the source code, then the table collapses to the 10px. Also, if I delete 2 out of the three images, it still stays 16px. It's almost as if the TD must be 16px if it contains an image, or the image has 3px of padding around it.

Has anyone experienced anything like this? And if so, any ideas? I'm running out of ideas, and sanity..

Answer 1

Like Herbie said, make sure you set the line-height on the TD.

Also make sure you have a font-size set, because gmail might be setting the minimum height of the TD based on a space character in that cell. In general, setting a font-size of 1px in cells where there isn't any text is good practice.

It looks like this is for html email creation, correct? Take a look at this for any other issues - it's helped me out a bunch of times http://www.emailology.org/#1 and http://www.campaignmonitor.com/resources/ for tips.

Answer 2

I can't comment yet, so I'll post as an answer...

16px sounds like a line-height value. Have you tried setting the line-height of each TD to 10px or changing each IMG from inline to inline-block?

Answer 3

I was trying to figure out your solution.

This is the literal solution, put this in your TD tag:

style="line-height:0"

Answer 4

In your <img> tag, you can put this:

 style="display:block;" 

... or you can make the height to max-height. It should solve your problem.