Gmail wraps certain HTML elements in a class called im
Asked Answered
F

15

80

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

Fears answered 22/5, 2013 at 10:51 Comment(2)
It's because GMail thinks that parts of your message are inline replies to previous messages in a conversation. Can you put the markup online so we can see it? Sometimes mismatched tags or other errors in the HTML can cause this.Cistern
The HTML Form's subject line was the same, for every different message. As a result gmail thinks the new emails coming in where connecting to the original message, when they don't. Subject lines are now unique - thanks @greg84!Fears
C
83

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.

Chadwell answered 22/5, 2013 at 10:59 Comment(6)
I had Gmail thinking that every HTML form coming in was connecting to the original message by having my subject line the same. I just made the subject lines unique to avoid that confusion for Gmail, and the problem appears to be gone for now. thanks! So yes, I had Gmail thinking I was quoting other emails in conversation (in a way).Fears
Yes, I should have added that as another possible cause. I will edit my answer to reflect that.Chadwell
This solution mashes up my table, because each column has its own width for each row.. so the table isn't inlined for all rows..Acquah
Not sure I understand. Are you saying that your columns are not aligning between tables? If so, just specify their widths.Chadwell
Is there an option to turn this off for customers of paid G Suite?Milli
How can I solve this if I do not want to make the subject unique?Guimpe
B
17

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

Biisk answered 12/12, 2016 at 21:30 Comment(4)
They work if you have them in the html file, not in a separate css fileBiography
@wapmorgan It works the way zack/mrateb has described. I just tested it.Crumby
I would put color: inherit !important instead -- so that the text will still follow whatever text colour intended, and more importantly legible at all on "dark mode".Inclusion
I don't think this works anymore. GMail includes the styles from the HTML head in your email with something to namespace it away from its own styling, so your .im CSS entry shows up in the recipient's browser as something like .m_-1234567890123456789im.Christenson
H
8

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.

Hodgepodge answered 15/5, 2014 at 16:41 Comment(1)
I had p tags with br in them, no indentation, and I ran into this problem. changing the br to separate p tags fixed it for me.Childbearing
V
2

Gmail display feature added a span with .im class to some text. To solve this in the styles tag defined in the head of the email I added the following styles:

<head>
  <style>
.im {
    color: inherit !important;
  }
  div > span.im {
    color: inherit !important;
  }
  p > span.im {
    color: inherit !important;
  }</style></head>
Venery answered 17/5, 2022 at 13:2 Comment(0)
S
1

I had similar problems. I was sending emails from an application using templates. So, when I sent multiple emails to same address, lines that are exactly same in all of them got purple. Gmail added this tag automatically:

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

I do not know that for a fact, seemed to me Gmail wraps the common texts in a conversation with the this tag. Similar discussion here.

Skulk answered 10/1, 2015 at 2:31 Comment(0)
S
1

I have this issue too. And I just added a five-bit random char to every line end and set the color like the background. Then the issue got fixed.

It's not a good way, but if no another way, maybe you can try it.

Sauna answered 2/2, 2017 at 11:31 Comment(1)
to every line end. did you add it as a html comment?Inflexed
H
1

You can use <br> tag in email html if it has style like: <br style="box-sizing:border-box">

Helmet answered 18/9, 2020 at 2:12 Comment(1)
This strangely worked for me and allowed me to keep my br tag, thanks!Jeffryjeffy
E
1

So I had encountered this problem when designing a mailing system for a web application of mine. The solutions given here were a bit time-consuming to implement for me as the mail content was huge and in lots of places span tags were getting added. It's when I come across this document. It turns out Gmail adds the .im class span tags when Gmail client receives two or more emails with the same subject line. All emails are grouped in a conversation group based on the subject line. Gmail detects some of the parts of the second (third, fourth..) email as quoted from the previous email. I simply deleted the previous emails and the problem was solved for me as Gmail didn't group the mails together. The article which helped me =>

https://litmus.com/community/discussions/5189-gmail-changes-color-of-text-im-class

This solution worked for me as the intended behavior of my application was not to share multiple emails at once. Hope so this answer finds helpful

Enormous answered 3/3, 2022 at 12:7 Comment(0)
T
1

For me, I simply needed to prevent Gmail threading when sending out my email. This would then of course prevent any subsequent emails from getting purple text, as they are not thread children of the initial mail.

If that's your use case as well, you can simply set the SMTP header X-Entity-Ref-ID with any value. This is what Google+ notifications do.

I don't know exactly what this header does, but since it's marked with X at the beginning it means that it is a private header, and therefore shouldn't affect anything else apart from Gmail.

Found this answer here, and I was so happy I needed to share it on.

Thiazine answered 29/8, 2022 at 6:46 Comment(1)
Thank you so much this saved me some hours of research!Tver
B
0

You ignore style of im class on this way

<b style="color:black;">Some text</b>

Some text does not have purple color

Bounce answered 27/11, 2018 at 13:37 Comment(0)
B
0

Inside my main table I created, as the last child add:

<div style="display:none;">1</div>

and the number 1 increments each time. I am generating the content with js using a template string

`<div style="display:none;">${new Date().toString()}</div>`

You will also need to add style="color:#000;" to the parent. This will prevent the entire email as showing as quoted, and hence not color the text with the .im class

Beltane answered 8/6, 2020 at 20:23 Comment(0)
V
0

If you replay to an email Gmail automatically puts your content in a <div class="im">, that's why text colors turn purple.

Just try to compose a new email.

Vaishnava answered 17/4, 2021 at 9:29 Comment(0)
R
0

I have added color: initial as an inline style in the headers of the table (for me, it occurs in table headers). It overrides the purple color of the im class in the .

Reliquary answered 17/11, 2023 at 9:19 Comment(0)
N
0

i found the problem because of existence {{ $emailAddress }}.

i change to <?php echo $emailAddress; ?>

solved !!

Neiman answered 22/2 at 2:53 Comment(0)
O
-4

Please use styles on your page:

div.adm {  display: none !important;}
div.h5 { display: block !important;}
Ornelas answered 1/4, 2020 at 8:57 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.