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
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.
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
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.
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.
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.
You ignore style of im class on this way
<b style="color:black;">Some text</b>
Some text does not have purple color
You can use <br> tag in email html if it has style like: <br style="box-sizing:border-box">
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>
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
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.
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
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.
Please use styles on your page:
div.adm { display: none !important;}
div.h5 { display: block !important;}
Related
BACKGROUND: I have a set of webpages where clients can create their own emails (usually reminders for things) to be sent out to people. It uses ckeditor and I allow them to define their own style rules in a <style> tag. On another page, I show all of the emails they have drafted. (I basically just take what they made out of the database and output it into the page) I'm not asking about the security risks of this. I know perfectly well what they are and how to deal with them. That's not the question. The main problem is that if I have a class called .button that turns buttons to a navy color and they have some style defined for that same class in their css that makes the text black, then it leaks out and turns my button text black.
QUESTION: How do I let them preview what they wrote without letting their styles creep into my webpage and override my styles?
THINGS I'VE TRIED ALREADY: I've tried an iframe, but I can't totally figure out if it's possible to just embed code in it. I also have seen the <embed> and <object> tags, but I don't know if they could help either.
Thanks in advance for any help!
You could try wrapping each email html and css in its own Shadow DOM: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Shadow DOM is typically used just for this purpose, to help scope html and css. Popular frameworks like Angular make use of the Shadow DOM for this as well.
One way is using !important in your own CSS which makes your CSS codes default value which cannot be overridden. for example:
.button {
background-color: navy !important;
}
I've created a Mail-Template for a Sharepoint WebPart which includes a div element with inline style display: none. Like this:
<div style="display: none"> This Text should NOT be visible</div>
If I send the Mail-Template to a mail-address, then all will work correctly, that means, div above is not visible. But if I forward or reply the mail, then Outlook overwrites the inline-style and the div above is visible.
I've already tried to set "display: none !important" and "mso-hide: all" but that doesn't work for me.
I hope somebody have an idea to solve my problem.
I was struggling with the same thing, and I think the only answer is: There is no reliable solution. Even if someone manages to find a solution that works in all current Outlook versions, it might break with the next one.
I have tried opacity: 0, visibility: hidden, mso-hide: all, font-size: 0, etc. None of these work because they are stripped out by Outlook.
Hiding the text using conditional comments results in the text getting deleted when you are forwarding the email.
<!--[if !mso]><!-->
Hidden content
<!-- <![endif]-->
So, if your goal is to store metadata for email processing, I'd recommend to just add it to the bottom of the email with a smaller text size, and in a human readable format (something like Reference Nr.: 123456). This will not get deleted by Outlook and it would also survive a conversion to plain text in Outlook.
Instead of using display:none, Try to use font-size:0px or height:0px.
I am creating a HTML email currently and am having a hard time with what happens when I FORWARD the email. It comes through fine to the inbox, but then develops issues when forwarding. I have taken the source code of the forwarded item and it looks as though it is re configuring my tables so that they are in divs, and between each table there is a
<p>
tag with a
<span style="display: none">
inside it and
<p> </p>
inside that..
This would be absolutely fine if this was consistent, but instead I find that the middle
<p>
tag does not have the span, and therefore enters a
<p> </p>
between two of my tables, creating a big gap in my lovely border!
Does anyone know if this is either content related, or if my tables need to have specific attributes to prevent this from happening, I can see no difference between them and the first tables; which seem to work absolutely fine.
You mentioned that it added new <p> tags between, not too sure about that - there may be some spaces in your html content. Outlook is known to wrap <p> tags around elements in emails (usually class msoNormal, or something like that). This affects your email on forwarding and unfortunately there is no way to avoid it, only ways to minimize and hide it. If you zero out the margin and padding in your style tag, this should take care of it for most clients. For forwarding yo Gmail though, it is unavoidable as Gmail strips the style tag.
One way to minimize the gap is to use table rows instead of tables. The gap it creates is much smaller - something like a couple of pixels vs. about 20 pixels of unwanted space.
One way to hide it is to make sure you put all the areas that will separate into a parent container that has the same background color. This way when it does spread your email vertically, you won't get any horizontal bars of a different colors in your email.
yes same for me i created html and send it to outlook and outlook web mail same thing happen that p tag get
<p class="MsoNormal" style="/* margin-bottom:22.5pt; */"><b><font size="4" color="#4d5d68" face="Calibri"><span style="font-size:13.5pt;color:#4D5D68;text-transform:uppercase;font-weight:bold">NEW NOTES HAS BEEN ADDED.</span></font></b><b><font size="4" color="#4d5d68"><span style="font-size:13.5pt;color:#4D5D68;text-transform:uppercase;font-weight:bold"><o:p></o:p></span></font></b></p>
see this and anyone who bypass it on outloook?
it adds p style like this style="/* margin-bottom:22.5pt; *
I have a HTML fragment, a list item of a long ordered list
<li>
<p class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</p>
<p class="English">The elders discussed the matter.</p>
</li>
How do the CSS rules look like to keep the two paragraphs in the list item together when printing the document? This means that they either appear together at the end of a page or then are moved together to the next page.
How do I keep the paragraph <p class="nw"> and the paragraph <p class="English"> together so that no page breaks occurs?
I use
.nw {page-break-after:avoid;}
but does not work. There are in fact page breaks between the nw and English paragraphs. This should not be the case as far as I understand the rule. To check it I use the print preview function of Firefox.
The answer How do I avoid a page break immediately after a header was helpful to find a solution. It refers to this bug in the Mozilla bug database.
A solution is the following.
li {
page-break-inside: avoid;
}
It works fine in Firefox.
There are multiple factors in play, first in importance: The user's printer.
There is no bullet-proof way of achieving what you want (Notice how a printer will even cut images in two if it decides to).
You could use a query indicating that if it is on print, that particular piece of text moves somewhere safe on your page, but this could cause other problems, like breaking the normal flow of your layout, etc.
I suggest you read this: http://davidwalsh.name/css-page-breaks
And this :
http://www.w3schools.com/cssref/pr_print_pageba.asp
Do you mean to have no break between the p class?
You can try grouping everything in one <p> element, and then identifying each class with a <span> element. For example,
<li>
<p>
<span class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</span>
<span class="English">The elders discussed the matter.</span>
</p>
</li>
Or if you are trying to just remove the space between the two <p> elements, you can look here - remove spaces between paragraphs
Is this what you meant?
According to your edit, you mean in terms of printing. This removes the paragraph space in a web document, but not while printing - Just a note to anyone searching this question in the future. R Lacorne seems to know the answer to the edited question.
I am developing custom email signatures for a client of mine, I am now at testing stage for GMail, Hotmail, Brinkster and so on.
I'm having a hard time trying to remove the underline the anchor is displaying, I do have " text-decoration: none;" on the anchor itself and nothing is working for either client however, Outlook renders fine.
Can anyone help? :-)
I think your issue may be that certain clients move anchor styles and text into a span and apply the style definitions to that instead.
hello, world!
becomes
<span style="color:black;">hello, world!</span>
Not 100% sure why they do this, but it's annoying. Sometimes changing to something like this works:
<span style="color:black;">hello, world!</span>
But it's still a mixed bag and changing all the time. Unfortunately the only way to confirm that things always look right is to use an image.
You could also try adding !important to the style:
text-decoration: none !important;
link text
won't have an underline unless there is a higher priority css rule somewhere else.