Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gmail wraps certain HTML elements in a class called im

Tags:

html

gmail

I have been testing out an HTML e-mail process I've created recently. But as of lately, when I open the e-mail in Gmail, I'm noticing that certain elements are wrapped in a class that I know I didn't put in the original HTML layout. In fact I just triple checked! When viewing the HTML email in Gmail, random sections of my form are being wrapped with...

<div class="im">
....
</div>

As a result, some text turns purple, while other text does not. Why does this happen?

Thanks

like image 503
klewis Avatar asked May 22 '13 10:05

klewis


People also ask

Does Gmail strip style tags?

Gmail removes your entire <style> block if it encounters an error. Gmail strips HTML formatting entirely if it encounters even one error. For example, Gmail doesn't like an '@' declaration within an '@' declaration.

Does Gmail support embedded CSS?

You can style email sent to Gmail using inline <style> blocks and standard CSS. Most CSS selectors, attributes, and media-queries are supported.


3 Answers

Gmail seems to think that you are quoting other emails in a conversation and so is wrapping div.im around the sections of your code that it thinks are previous bits in a conversation.

This might happen if your code has a TABLE with more than one TR. To get around this, rather than several TRs in one TABLE, use several TABLEs with one TR in each.

This might also happen if you have multiple subject lines that are the same, causing Gmail to think this is a conversation. You can fix this by making each subject line unique.

like image 50
Derek Henderson Avatar answered Nov 06 '22 09:11

Derek Henderson


Separate style files do not work for emails. What you can do though is add style for this class in the html as follows:

  <head>
       <style type="text/css">
        .im {
           color: #000000 !important;
        }
    </style>
  </head>

This should give style to the class .im in case its found

like image 44
Zack Avatar answered Nov 06 '22 10:11

Zack


I also experienced this problem when using a paragraph with single line breaks in it like this:

<p>
   line 1<br>
   line 2<br>
   line 3
</p>

I was able to correct the problem from happening in Gmail from removing all the blank space from that specific part of HTML and bringing that entire paragraph and all it's contents back flush against the left edge of the screen. Sure it looks a little messy and you lose your proper indenting, but I think this helps Gmail not accidentally think you're quoting something inline.

like image 5
stevecomrie Avatar answered Nov 06 '22 09:11

stevecomrie