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..

Behindhand

Can we get more context on this? How and where is this happening? At gmail.com you are dynamically inserting table code where? Or you are editing an existing table? This is through a Chrome Extension? – Closeknit

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.

Combs

We have a winner! Thanks Juan - I didn't even think about line-height. Hopefully my hair will regrow soon.. – Behindhand

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?

Diverge

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"

Hamadryad

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.

Deshabille

Answer 5

In html - <img> tag is not a block tag so we need to use following css to let it work like a block tag

style="display:block;"

with this css the your given height will perfectly work on your HTML page.

Try once!

Berseem