Reputation: 369

Gmail Android & iOS App. CSS styles (td and p elements) not working when sending from MS Outlook

I'm sending an email from MS Outlook (2013) and it's working perfectly, but in the GMail app for Android (it also happens for iOS) there is a gap between lines (rows).

As you probably know MS Outlook changes the HTML upon sending the email (you can see the HTML sent just saving the email as HTML).

For the sake of simplicity I've created a simple HTML template so you can help me to spot the problem here.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gmail APP issue</title>   
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <table style="border:0px;border-spacing:0px;border-collapse:collapse;">
        <tbody>
            <tr>
                <td>
                    <p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
                </td>
            </tr>
            <tr>
                <td>
                    <p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
                </td>
            </tr>
        </tbody>
    </table>  
</body>
</html>

I have tried the following with no luck so far:

Added line-height:0 to the <td> element and then my custom line-height to the <p> element. This is the closest I can get but that <td> is not displayed in MS Outlook since we need to use units. On the other hand, if we use units (i.e. 0px) then we have the same issue when receiving the email in the app.
Added a min-width to the table and table cells.
Added the cellspacing and cellpadding attrs to the table but there is no need to do that because MS Outlook adds them.

Nothing works for me.

I'm going to add a red background to the <p> element and a green one to the <td> element so you can see what's happening here.

This is how the email is rendered in MS Outlook:

and this is how is rendered in the Gmail APP:

You can see the gap that Gmail adds. Maybe the text is too long but it doesn't matter, just wanted to enter something descriptive.

I will keep trying until it's solved. If someone could help me I would really appreciate it.

EDIT: I'm going to paste the processed HTML generated by every client (from the above HTML template) in order to make easier to spot the problem. I'm going to paste only the table cell output:

This is the HTML sent by MS Outlook:

<tr>
  <td style="padding:0in 0in 0in 0in">
    <p class="MsoNormal"><span style="font-size:13.5pt;font-family:&quot;Times New Roman&quot;,serif;
  color:black">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING
  FROM MS OUTLOOK</span></p>
  </td>
 </tr>

As you can notice MS Outlook adds a <p> element to wrap the table content even though we are using another element (div, span) instead, as some users suggested.

Also notice that MS Outlook has stripped out the style="margin:0; we had inline in the <p> element but the class MsoNormal avoids the top and bottom margin so MS Outlook is not adding any gaps here.

This is how Gmail (Android) processes the HTML received from MS Outlook

<tr>
  <td style="padding:0cm 0cm 0cm 0cm">
    <p class="MsoNormal"><span style="font-size:13.5pt;font-family:&quot;Times New Roman&quot;,serif;color:black">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS
  OUTLOOK<u></u><u></u></span></p>
  </td>
 </tr>

And this style is being applied to the <p> element:

.msg-8292648110214437287 p {
    margin-right: 0cm;
    margin-left: 0cm;
    font-size: 12.0pt;
    font-family: "Times New Roman",serif;
}

msg-8292648110214437287 seems to be a autogenerated class by Gmail. As you can see only applies margin to left and right, however it's not appling to the top and bottom.

The margin-top and margin-bottom are being applied from default:

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

So the gaps are those margin-top and the margin-bottom.

What I have tried:

Added p { margin:0px!important; } in the <style> tag
Added font-size:0px to the <td> element, (and add the desired one in a span surrounding the text) that way we get rid of the margin but it doesn't work either.
Same for line-height, etc.

Hope this edit helps, some expertise in gmail is needed here. This is working in GMail (Web), that might be a hint.

Again, this is taking longer that I expected and I would appreciate your help very much. Thank you.

Upvotes: 1

Answers (3)

Samuel Souza

Reputation: 101

I managed to change this situation by changing the MsoNormal class

<style>
    td p.MsoNormal {margin: -4px !important}

    /* ou */

    .MsoNormal {
        margin: -4px !important;
    }
  </style>

Upvotes: 0

JCdotNET

Reputation: 369

This is the best I can get and I will follow this approach unless someone comes up with a better solution:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gmail APP issue</title>   
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        td p.MsoNormal {margin: 0.1px}
    </style>

</head>
<body>  
    <table style="border:0px;border-spacing:0px;border-collapse:collapse;">
        <tbody>
            <tr>
                <td>
                    <p class="MsoNormal">TABLE CELL 1</p>
                </td>
            </tr>
            <tr>
                <td>
                    <p class="MsoNormal">TABLE CELL 2</p>
                </td>
            </tr>
        </tbody>
    </table>  

</body>
</html>

What we are doing is removing the inline style from the p element, adding the MsoNormal class and applying the margin in the <style> tag.

MS Outlook will take that margin and will inline it in the <p> element, so Gmail / Gmail app will finally receive the margin set :)

Notice that we are setting a 0.1px margin, otherwise Outlook won't inline it in the <p> element.

Remember that some email clients don't recognize the style tag and some others don't apply the css from classes, so we should set margin: 0.1px in the p element as an inline style

Upvotes: 5

gwally

Reputation: 3527

You already identified your problem, the reason behind your problem and a solution, which is stop using Outlook to send emails. Use a service or a software program that doesn't alter your code when you do a send.

Outlook, Gmail and just about every single email client will change your code when it renders it. Outlook will strip out things that don't work in Outlook. The same with Gmail. The best known example of this is how Gmail will strip out a <style> sheet when it runs across an incompatible CSS value. You can use a service like Putsmail to test your work to see if the issue is Outlook or an issue with formatting.

If you are going to continue to pursue this path of frustration, at least use a properly formatted <table>.

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
  <tr>
    <td>
      <p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
    </td>
    <tr>
      <td>
        <p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
      </td>
    </tr>
</table>

I use this same table structure without fail to successfully send emails.

Good luck.

https://putsmail.com

Upvotes: 0

Gmail Android &amp; iOS App. CSS styles (td and p elements) not working when sending from MS Outlook

Answers (3)

Related Questions

Gmail Android & iOS App. CSS styles (td and p elements) not working when sending from MS Outlook