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

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? — mrtsherman, Feb 12 '12 at 04:40

score 10 · Accepted Answer · answered Feb 12 '12 at 09:35

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.

We have a winner! Thanks Juan - I didn't even think about line-height. Hopefully my hair will regrow soon.. — Anthony, Feb 14 '12 at 02:38

score 4 · Answer 2 · answered Feb 12 '12 at 06:55

4

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?

answered Feb 12 '12 at 06:55

Herbie

141
2

score 3 · Answer 3 · edited Sep 28 '12 at 12:03

3

I was trying to figure out your solution.

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

style="line-height:0"

edited Sep 28 '12 at 12:03

Mihai Iorga

39,330
16
106
107

answered Aug 15 '12 at 20:18

Emmanuel

31
1

score 2 · Answer 4 · edited Nov 30 '12 at 11:23

2

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.

edited Nov 30 '12 at 11:23

Tim Post

33,371
15
110
174

answered Nov 30 '12 at 03:10

violinxliu

21
1

score 0 · Answer 5 · answered Nov 24 '15 at 06:19

0

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!

answered Nov 24 '15 at 06:19

Gaurav Aggarwal

9,809
6
36
74

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

5 Answers5