Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gmail Email Table Spacing

Tags:

email

gmail

I know this horse has just about been beat to death.. but I've got a Gmail table spacing issue that is just stumping me this morning.

<td valign="top">
        <img src="###/enewsletter_layout_v3_18.jpg" alt="" />
        <table cellpadding="0" cellspacing="0" style="background: #000; width: 700px; margin: 0 0 0 8px; text-align: center; color: #fff;">
            <tr>
                <td valign="top" style="background: #890000; height: 50px; padding: 10px 15px; font-size: 24px; font-weight: bold;">
                New Patient Special Offer <br/>
                Save $$$
                </td>                   
            </tr>
            <tr>
                <td valign="top" style="background: #000; height: 50px; padding: 5px 15px 15px 15px;">
                    <h1 style="font-size: 24px; font-weight: bold;">Do you have a question?</h1>
                    If you have read anything in this newsletter and have any questions or would like to 
                    discuss further, please contact <br/>
                    The Centre at (555) 555-5555 
                </td>                   
            </tr>           
        </table>

    </td>

No matter what I do, the first image in the table there (layout_v3_18) always has spacing under it. About 2-3 pixels of white space in Gmail. Happens on a couple other images in the email, but the rest work fine. No matter how many times I compare the tables, it won't work.

Thoughts?

like image 237
Craig Hooghiem Avatar asked Aug 05 '10 15:08

Craig Hooghiem


People also ask

How do I manage tables in Gmail?

Editing Tables Gmail doesn't have the ability to insert or delete rows or columns. To make these kinds of edits, paste the table into a blank worksheet using Microsoft Excel or Google Docs. After you get the table looking the way you want it, highlight the table, copy it and then paste it into your Gmail message.


2 Answers

I've actually run into this problem a lot recently. The code we found that works best (read: looks consistent in the most mail clients) is the following:

<img src="###" style="display: block;" />

Just add the display: block to every image and it fixes the problem.

like image 180
Stephen Walcher Avatar answered Oct 14 '22 22:10

Stephen Walcher


In answer to my own question (in case someone else has a similar issue), I finally found the issue (or a solution anyways).

I added a style="float: left" to the image itself, which magically fixed it. Alternatively, using "display: block" tends to have a similar result if used on all images, but the float seems to clear the spacing specifically for GMail when it's working perfectly fine elsewhere.

like image 42
Craig Hooghiem Avatar answered Oct 14 '22 21:10

Craig Hooghiem