4

Ok, this is weird. I have an HTML email template that I am trying to adjust. In the template, I have a standard <ul>. But, the client has requested that there be no margin above the list. So, easy enough. I just added a `margin-top: -10px' as a style:

 <ul style="margin-top: -10px;">
     <li>....</li>
 </ul>

But then when I sent myself the email, that style had been stripped out. It showed up like this:

 <ul>
     <li>....</li>
 </ul>

I thought maybe it was cached. So I changed the text of the top list item:

 <ul style="margin-top: -10px;">
     <li>This is a test</li>
 </ul>

Then I sent myself the email, and I got this:

 <ul>
     <li>This is a test</li>
 </ul>

So, I made a class:

.UlNoTopMargin {margin-top: -10px;}

And did this:

 <ul class="UlNoTopMargin">
     <li>This is a test</li>
 </ul>

I sent myself the email, and I got this:

<ul class="m_4942690989181909996UlNoTopMargin">
     <li>This is a test</li>
 </ul>

What the $@#!@!! is going on here? I'm using gmail to view the emails. Is Gmail doing this? If not, then where on earth is this coming from?

1
  • Probably because Gmail does not allow negative CSS margin values. Commented Jun 22, 2017 at 16:05

3 Answers 3

6

Gmail absolutely changes classnames in your email. If you create a style sheet and send it out, it will change the classnames in the style sheet and in the email body. It will also strip out any styles that it doesn't support, sometimes the entire sheet.

These are the CSS properties and queries supported by Gmail:

https://developers.google.com/gmail/design/reference/supported_css

Good luck.

1
  • very interesting. Thank you! Commented Jun 23, 2017 at 11:20
3

For best support, you should probably use <table> and not <ul>. Also, margins aren't as widely supported as padding, so I'd try something like this:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="5">&middot;</td>
        <td align="left" style="padding-top: 10px;">This is a test</td>
    </tr>
</table>
2
  • Yeah, ok. (sigh) I was afraid I might have to go this route. Seriously annoying. But, thank you for confirming my fears. Commented Jun 22, 2017 at 15:24
  • Yup. All too often the only way to get an email looking the way you want it is to summon a sea of tables.
    – rideron89
    Commented Jun 22, 2017 at 15:29
1

To expand on the answer from @gwally, I believe the REASON Gmail does this is to avoid your email from affecting the outer DOM elements of Gmail itself. If you could do this, you could effectively craft a malicious email to steal information from users with some clever CSS trickery, or 'redress' Gmail's appearance to launch some pretty nasty phishing attacks. The limitation of CSS properties is likely also as much of a security decision as a UI/UX one.

Out of curiosity, i just spent an hour fuzzing class names in emails to myself, in an attempt to bypass this mechanism. It doesn't seem possible, although I wouldn't claim any solution is bulletproof.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.