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.
Related
I've tried everything I can think of, but no matter what I do, MailChimp demands any <a> with an href has color: inherit !important; text-decoration: inherit !important and, because Outlook is absolute garbage, means all my links are coming up blue and underlined.
In this example, I can put in a link, and it'll just turn blue:
<td style="color:#27646a;font-family:Georgia, serif;font-size:16px;font-weight:bold;" mc:edit="button">
READ MORE
</td>
In this example, if I put in a link, it'll just ignore my <a> and add another one adjacent:
<td style="color:#27646a;font-family:Georgia, serif;font-size:16px;font-weight:bold;">
<a mc:edit="button" style="color: #27646a; text-decoration: none;">
READ MORE
</a>
</td>
I can put this in my CSS, but obviously MailChimp decides to ignore it:
td a {
color: #27646a !important;
text-decoration: none !important;
}
I don't really know what my other options are, and I swear I don't remember MailChimp arbitrarily deciding everything must look like crap in Outlook - is there something I'm missing?
In case others are finding this, it is possible to set hyperlink colours in Mailchimp templates that will be respected by Outlook without styling each link inline.
I'm using a custom HTML template in Mailchimp, using the classic builder.
It does seem like it's necessary to specify the link styling for each type of content block that you have in your template. In my case, my editable content blocks are always div tags. In my template code, within the body tag:
<style type="text/css">
div a{
color:#000000 !important;
text-decoration:underline !important;
}
</style>
The style would need to also be defined for all tables, p, or whatever else you are using to contain text. I've tested the result in Outlook 365 and it works.
I remember reading somewhere that mailchimp won't allow hyperlinks to be too similar to the background colour (because the unsubscribe link must remain visible) so that's a possible issue as well.
I have used two methods for generating emails in MailChimp: 1) Foundation For Emails and 2) a MailChimp drag and drop email template.
In Foundation, it takes my source CSS code:
.item-link {
color:#0C3C80;
font-family:Helvetica;
font-size:16px;
text-decoration:underline;
}
and generates the inline style like this for links with class "item-link":
<span style="font-size:12px">View this email in your browser</span>
This produces the correct color in Outlook.
In the drag and drop template, I use the "Design" tab -> "Body" -> "Body Link" of the editor to assign the link color. It also appears correctly in Outlook.
The difference may be that in two of your examples you assign the color in the td tag style, and in the third, you designate it as a button to the MailChimp editor, so the style for the button is probably overriding the style you want.
I hope this helps.
You should be explicitly declaring colours and text-decoration:none/underline on every single <a> tag. Mailchimp will then avoid adding these fallback styles.
I've always declared mc:edit on the table cell wrapping the <a> tag as that is the foolproof way of editing the url and keeping the styles.
Here is the code I use. There are a tonne of other styles added and that is simply because I use the border technique of building buttons, but the issue is the same. I have mc-edit on this tag and have made sure to declare text-decoration and colour and my client uses this every week without issue.
<td align="center" valign="middle" style="padding:14px 20px;" mc:edit="button">
Button
</td>
Try that. Hoping that will work out for you
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;}
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.
I want to send html body email like below with background-image css to my users :
<div style='width:500px;height:1000px;background-color:black;background-image:url(http://upl0ad.org/images/mylogo.gif) repeat scroll left top;'>
My Content
</div>
but as the link below says google does not support background-image css!
http://www.campaignmonitor.com/css/
what can I do about that?
Have you tried setting the background attribute of a table?
This is the recommended method detailed in the following Mailchimp blog post: Background Images and CSS in HTML Email.
Example (Tested in Gmail)
<table background="https://www.google.com/intl/en_com/images/srpr/logo3w.png" width="275" height="95">
<tr>
<td>
Email Content...
</td>
</tr>
</table>
You can't do anything about it. Using CSS to set background image is not supported in many web-mail application because of security reasons.
The only way to actually show background behind text is to create an image with text on it and display it using <img src="##" /> tag. Though, always remember to add link to text version of your email and/or link to web-page based copy of your newsletter.
Additoinally, you need to remember that newsletter design is very different to website design. You need to ignore all usual standards, you need to use tables, inline styles, img tags etc.
Check out this page for few good suggestions: http://www.sitepoint.com/code-html-email-newsletters/
Also MailChip (probably most popular Newsletter management system) has few very good suggestions on how to code HTML emails: http://kb.mailchimp.com/article/how-to-code-html-emails
Update as of 2019. While there are issues with adding background image from inline image on the email (at least I did not find a way to make it work). Actually css-background image works fine on at least some elements as long as they are absolute urls to resource, my snippet that works on gmail as of June 2019:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image:url('https://via.placeholder.com/30x300/09f.png');background-repeat:repeat-x">
This makes me wonder why it didn't work for the author. I have few theories:
a) back then it didn't work
b) it does not work on div elements
c) link was broken
d) missing single quotation mark
e) single and not double quotation mark around attribute style
f) despite the width and height on style, div was of 0x0 size
(Some of those above sound stupid)
What eventually worked for me is changing an image extension from .svg to .png
It seems Gmail doesn't support .svg images.
I know this kind of question must get asked all the time but I haven't found a solution for my problem yet.
Using FF, Opera and the IE that is on Windows 7 (can't remember what it is), the page looks exactly as it should, but using IE7 on Windows Vista, there is a gap between my navigation bar and the rest of the page which frankly makes it look stupid, and the illusion of tabbed pages is lost.
I have a reset stylesheet to reset all the elements to have no padding, margins etc and FF, Opera and the IE on Windows 7 produce the page as they should, it's only IE7 (and I'm guessing earlier versions of IE) that don't.
Here are 2 screenshots showing the problem, the first from FF/Opera/IE on Windows 7:
This one is from IE7 on Windows Vista:
alt text http://img43.imageshack.us/img43/7558/figarosiegap.jpg
And here is a link to the actual website in question: Figaro's Ristorante
Any ideas anyone?
Thanks for your time.
I've run into this problem a bazillion times. Add this to your CSS:
#header img { vertical-align: bottom }
There's a funny bug in IE up to and including version 7 where it will treat some whitespace (an empty text node, really) as a real text node, and align the image as if there was text in the element as well.
Another option would be to declare the image as a block level element:
#header img { display: block }
This CSS is safe to add to your global file, it will not interfere with how other browsers render the page.
The IE on windows 7 is IE8
I've taken a look at it using IE7, and the gap appears to be because of the image in the 'header' div. If you look at it with a tool like IE Developer toolbar you can see the boundaries around the objects on the page.
Sorry i cant paste an image but i'll try to describe it:
there is a #text element after the image which is being forced onto a new line by IE7.
if you change the style on the img to include
float: left;
This fixes the problem for me.
Hope this helps!
(Let me know if you need more clarity)
The gap is part of the text line where the menu image is, because the image is an inline element so it's placed on the baseline of the text line. The gap is the distance from the baseline of the text to the bottom edge of the line, i.e. the space used by hanging characters like 'g' and 'j'.
Simply adding display:block; to the style of the image solves the problem. It turns the image element from an inline element to a block element so that it's not placed on a base line of the text but as a separate element.
I've run into this problem a thousand times, and finally, after using overly complicated fix after fix, the answer is simple! (At least when <img>'s are involved.) In the div that is producing a gap under it, add 'overflow: hidden;' to its css; you will need to set its height, of course. So, if your div is 39px high, this will keep it at 39px high, ignoring the extra whitespace IE loves to put under <img>s
Hope it helps.
There's not much useful information (html or pictures that work) in this question. So, here's a random guess.
I've had situations where a line-break or spaces between elements can cause vertical space between elements. Try placing the closing and opening tags immediately next to each other and see if this corrects the issue.
Different browsers all have different default margins and padding. In this case, I'm guessing IE7s defaults are throwing you off. There are two general solutions to the problem. You can set your own margin and padding at the html, body level:
html, body {
margin: 0;
padding: 0;
}
or you can use IE conditional comments to load sepearte stylesheets for different versions of IE. Last I checked, the conditional comments were considered a better solution because browser defaults do provide some usefulness.
Jason is correct that it's a bug in how IE handles whitespace in the html... treating it as a text node. Though I don't think it's unique to images. I believe I've seen this behavior with divs as well. As a global change you may try applying vertical-align:bottom to both images and divs. Though I don't know what mayhem that may produce.
But the quick and dirty fix is to just remove the whitespace. Kinda sucks, but change stuff like this:
<img src="blah" alt="" width="5" height="5" />
<div>blorg</div>
To this:
<img src="blah" alt="" width="5" height="5"
/><div>blorg</div>
I warned that this is quick and dirty. But it works.