androidhtmlgmailhtml-email

HTML Email: Padding, text alignment in Gmail for Android before version 13

I work with emails semi-regularly, so I am familiar with a lot of the common issues, such as Outlook in general and some Gmail stuff. However I am having trouble getting some text to align properly in the Gmail app. On Android 13, it is rendered correctly: enter image description here

Anything before 13 looks like this (this screenshot specifically is Android 8): enter image description here

The text is shifted upwards. I'm not sure if it is ignoring padding, line-height, or it's something else. It's small and ultimately not a huge deal, but it's bugging me.

Each text line is a table within one larger table (that I will omit since it contains everything else in the email). I'll provide a snippet of one of those tables:

<td>
    <table
        role="presentation"
        class="main"
        width="100%"
        cellpadding="0"
        cellspacing="0"
        border="0"
    >
        <tbody>
            <tr>
                <td class="numerical-image" width="200px" align="left">
                    &nbsp;<img
                        style="width: 36px !important"
                        width="36"
                        src="./step-1.png"
                    />
                </td>
                <td
                    width="100%"
                    align="left"
                    style="
                        text-align: left;
                        font-size: 16px;
                        padding-top: 20px;
                        margin-top: 20px;
                        padding-left: 16px;
                        padding-bottom: 20px;
                        line-height: 18px;
                    "
                >
                    <font face="arial, helvetica, sans-serif" color="#000">
                        Text line one
                    </font>
                </td>
            </tr>
        </tbody>
    </table>
</td>

I attempted to add margin-top: 20px; line-height: 18px; to fix it but it didn't change anything. These sections show correctly in other email clients, its just Gmail giving me problems.

Solution

  • It looks like the &nbsp; with the image is throwing the layout. Though I did try a few other things too (see below).

    This then showed up consistently with different Gmails and also Outlook android (which needed min-width:60px because they add max-width:100% to all images).

    <table
    role="presentation"
    class="main"
    width="100%"
    cellpadding="0"
    cellspacing="0"
    border="0"
>
    <tbody>
        <tr>
            <td class="numerical-image" align="left">
                <img style="width: 60px; min-width:60px;vertical-align: top;"  width="60" src="https://www-au.computershare.com/WebContent/doc.aspx?docid={4b3a4f90-89cb-4548-8315-5e966263be39}" />
            </td>
            <td width="100%" align="left" style=" text-align: left;   padding-top: 20px; padding-left: 16px; padding-bottom: 20px;   vertical-align: middle">
                <p style="font-family:arial, helvetica, sans-serif;margin:0;font-size: 16px;line-height: 16px;" color="#000">Text line one</p>
            </td>
        </tr>
    </tbody>
</table>