I want to send an e-mail from our system to customers, where some tags should be hidden to them. I've set the following CSS:
.hidden { display: none; }
But this does not work. What solutions or alternatives are there for hiding elements in an e-mail?
Use mso-hide:all in a span surrounding the content, and on any other tags within the span.
The only working solution I've found is to use conditional formatting in the HTML source :
<!--[if !mso 9]><!-->
<div>This block of code will display <b>everywhere</b> except in Outlook 2007.</div>
<!--<![endif]-->
I did some quick testing, and found that Outlook (2000, 2003, 2007, 2010, 2013 and Outlook.com) supported several variations of display: none; as expected. On the other hand, Gmail in the browser and on Android failed miserably.
I tested the following:
<table>
<tr>
<td style="display: none;">01</td>
<td style="display: none !important;">02</td>
<td style="display: none; display: none !important;">03</td>
<td id="displayNone">04</td>
<td id="displayNoneImportant">05</td>
<td id="displayNoneDisplayNoneImportant">06</td>
</tr>
</table>
CSS inline, in the HEAD and in the BODY
Where there are IDs, I tested the follow CSS in the HEAD of one email and in the BODY of another email.
<style>
#displayNone {
display: none;
}
#displayNoneImportant {
display: none !important;
}
#displayNoneDisplayNoneImportant {
display: none;
display: none !important;
}
</style>
RESULTS: CSS Inline and in the BODY
Outlook (all) passed; Outlook.com Android failed, Gmail (all) failed
Outlook (all) passed; Gmail (all) failed
Outlook (all) passed; Gmail (all) failed
Outlook (all) passed; Gmail (all) failed
Outlook 2007, 2010 & 2013 failed; Gmail (all) failed
Outlook (all) passed; Gmail (all) failed
Outlook (all) = 2000, 2003, 2007, 2010, 2013, Android Outlook, Outlook.com (IE, Fx, Chrome)
Gmail (all) = Gmail in IE, Fx, Chrome and in Android
RESULTS: CSS Inline and in the HEAD
Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
Outlook 2007, 2010 & 2013 failed; Outlook.com Android failed; Gmail (all) failed
Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
LONG STORY SHORT
Outlook 2000+ supports display: none; fairly well. Gmail does not. It became difficult to discern what was failing or working in Gmail due to how much it failed. The screens even became cropped in certain situations.
I'll retest later and post screenshots if I can — right now my testing set up is taking too long to save out screen shots of each scenario and reader.
Outlook 2007 uses the Microsoft Word engine for rendering HTML which has very limited support for CSS. This page describes the kind of things you can expect to work (display is one of the "not supported" ones).
Unfortunately, there's not much you can do. You can enclose the element in HTML comments <!-- ... --> which would stop it from rendering, but that's about it.
Outlook 2007 has limited support for CSS and HTML. Read this article for more information.
If class-based CSS rules don't work, try ID-based CSS rules. Just try to keep your rules as simple as possible.
You can use this tool to validate your HTML and CSS for use in Outlook 2007.
Late, but, as general guidelines for e-mails:
1) Always use tables
2) Don't use following tags: div, p, i, or b (use em for italic, and strong for bolding.
3) Don't set font properties on body tag, or even on parent elements like table tags; you must set the font properties on every area where there is text displayed; however, you CAN set it on a tr tag instead of on each td tag. Just remember to do it on EVERY tr that has text displayed in its subsequent td's, unless the text is wrapped inside another or several other elements/tags.
4) Put "mso-hide:all;" as an INLINE style on parent element as well as the child elements. You can also try setting width and height to 1px (setting to 0 rarely works for many clients) and then set visibility to "hidden" and just in case, set opacity to ".0" or "0", just to cover your bases.
5) Do not use non-breaking space elements in empty td's where you're using them to create padding (which is better than using CSS padding in most cases). The nbsp element will force heights to be incapable of being less than a certain size, which is annoying when you're trying to create, say, a 2px vertacle spacing.
5) Using the "if lt mso9" trick works well, but avoid using it to "hide" things in desktop view & displaying them on mobile. It's less elegant and it also creates bloated code. Use the above method(s) instead if you can, if for nothing else, for future version compatibilty's sake.
<p style="color:#ffffff;width:0px;height:0px;display:none">
<!--[if !mso]><!-->
<p style="color:#ffffff;width:0px;height:0px;display:none !important;">
<!--<![endif]-->
I am not showing !!!
</p>
This works for me !
You can try to wrap around
<!--[if !IE]><!-->
<!--<![endif]-->
A bit too late but you can try for example:
<span style="font-size: 0px; color: White; display: none">Yada Yada</span>
This solution was tested on Outlook 2007 and works.
< td style="line-height:0; border:0; font-size:0px" >
how about remove the tags with "display:none;" with code.
i use string.split the html string String.split("<td ") and StringBuilder sb.
then if-else. if the split string does not .contains("display:none;") then append to stringbuilder sb.append(String). make sure to put back the "<td " , so sb.append("<td " + String). u might want to exclude several split string, such as null split string,or which contains tags("<h1 ","<table " ).
Try this — maybe it will work for you.
.hidden{visibility: hidden;}
Related
I want create outlook email by using the html format, but some of the html style can't work in outlook email.
I have a test code like below:
<dl><dt style="float: left">ColumnA: </dt><dd style="padding-left:30px">sahjdhsj; kahdjkshakjdhkasjhdkjshakjhdska; sa dsah ashkdj sadksajhd dksad asdhsahdsahodsad ashkjdhsa asd ipientList, string originalSubject, string recallLink</dd><dt style="float: left">ColumnB:</dt><dd style="Margin-left:30px">lack hot drink gjg daskahdkjahd asd gkashdksahdsakjhdsadsdsad</dd></dl>
When I test it in https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro, it can work as expected:
P1
but when I use it as the outlook email body, it will show like:
P2
Anyone know what caused the different behavior in outlook email? I just want it show as P1
Outlook uses Word as an email editor. Unfortunately not all CSS properties are supported in Word. For example, the float property is treated like unknown in Word. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
The only way to achieve that layout in Outlook for Windows is to use tables. It recognises dt and dl (https://www.caniemail.com/features/html-lists/) but not changes to display modes or floats (https://www.caniemail.com/features/css-display/ and https://www.caniemail.com/features/css-float/). Therefore, they will always both be stuck in their default display:block modes, that take the whole line.
You could use different code for Outlook on Windows by using their conditional code.
I have a very specific case where I'm trying to provide date-format hints for date-inputs, but remove those hints when the browser is going to provide a native date-picker. I tried this, which works on all modern browsers:
<style>
input[type="date"] + .date-format-hint { display:none; }
</style>
<form>
<input type="date" id="my-date" />
<span class="date-format-hint">Please use mm/dd/yyyy as your date format</span>
</form>
I tried testing in MSIE 8 (yes, I really do have to do this for #reasons) and the date-format-hint disappears. Checking the CSS style console, it appears that the CSS rule is applying and hiding the hint.
But the runtime type of the input element is actually text and not date. If I check it with javascipt, I can see it's text and can fix everything up, but the idea here was to avoid having to use javascript for something CSS could do.
I tried to create a js-fiddle, but MSIE8 totally chokes on that site so I hand-built a simple proof-of-concept which does not hide the hint element. I must have something subtly different between my real-world page and the test-page. Maybe I'm missing the DOCTYPE declaration (it's in real-world but not test) or any of several other CSS files being included in the real-world that aren't in the test.
But if MSIE 8 is evaluating the CSS selector based upon what's in the document "text" and not the runtime DOM data, then it might explain the behavior I'm seeing.
Are there other likely explanations?
I have found a potential workaround, which is to adjust the CSS style to:
<style>
input[type="date"] + .date-format-hint {
display:none;
display:inline\0/; /* Trick MSIE 8 into doing the right thing */
}
</style>
Note that display:initial\0/; doesn't work because MSIE 8 doesn't support initial.
When running MSIE 8 in MSIE 7 mode, the style doesn't apply at all which is ... something, I guess.
Is this the best I can do? Or am I missing something really fundamental, here?
Edit 2022-08-17
I forgot to mention that I had already tried something like this, and it did not seem to work:
<style>
input[type="date"] + .date-format-hint {
display:none;
}
input[type="text"] + .date-format-hint {
display:inline;
}
</style>
I was hoping that having two matching rules in the CSS would cause MSIE 8 to choose the latter, but it appears not to do that and prefers the former date-based rule.
I'm using the IE 11 (version 11.0.9431.0), to test our current website and see how it would work when IE 11 will be released with Windows 8.1 mid-October.
What I see on almost all pages is the following message:
HTML1514: Extra "<body>" tag found. Only one "<body>" tag should exist per document.
When I look through the source code, there is no second <body> anywhere. Is this a IE 11 bug? Is this something I should take seriously? The pages work fine btw...
Thanks.
EDIT:
I don't have access to that website anymore, therefore I can't try any new solutions you guys are posting.
If you placed some element (that should appear only inside body) before the <body> tag, the <body> is inserted automatically by the parser (the "Anything else" paragraph) - and this is still valid HTML because body has optional both opening and closing tags. That would mean that the actual <body> is the second one the parser sees. Couldn't this be your case?
My guess is you probably have if IE statements, something like:
<!--[if IE 9]> <body class="ie ie9 lte9"> <![endif]-->
They don't actually work in IE10, let alone IE11 so that's why you'd be getting the extra tag found.
The problem (which is present in IE 10, too) is caused by the element
<script type="text/javascript" src="/_clients/binck_nl/data/js/analytics.js?nl_1377516473" ></script>
It probably modifies the DOM so that IE gets confused.
it's probably your body tag in the css. Replace the body-tag in the css with a class for example .bodystyle {} and refere in your html to it with the tag. That should do the trick.
Hi this may be a very late for suggesting. But, just to help others the probable cause may be any iframe coming in the page which has body tag
I had this same effect showing up in IE10 and IE11 saying there was an extra body tag in the console. What fixed it for me was that I found an element outside of the body that was a div for a spinner while the page loads that should have been within the body.
My guess is that it may be content in the header part which Edge wants in the body part. (If you have a header part).
This works in any other browser but Edge.
I solved this by removing: <header><title>something</title></header> from the tag body. Now edge no longer complains.
I want to write an application that sends html formatted email. I have the css and html files as I want them. I'm trying to send the email with the embedded css using the style element like so:
<style type="text/css">
h1 {border-width: 1; border: solid; text-align: center}
</style>
<h1>Title</h1>
<p>Content of the email</p>
It works in some clients (e.g. it works on Mac OSX mail app) and not others (e.g. it doesn't work when reading the email in gmail). When I translate the above to:
<h1 style="border-width: 1; border: solid; text-align: center">Title</h1>
<p>Content of the email</p>
Then it works everywhere. What I'm looking for is a way to place the css as style properties on their corresponding dom elements according the css rules I defined. So for a given file.css and file.html I want to create a new file result.html which displays correctly but in which all the css is embedded as style properties in the dom elements. Any ideas?
This is what you're looking for:
http://www.mailchimp.com/labs/inlinecss.php
Hope this helps!
Drop the style tag, use inline styles.
I have the same issue - I have a php app that sends out a confirmation email once a customer has placed an order. In various email clients it's fine, but web based clients tend to strip out the HEAD tag, which includes the STYLE tag - so any style is lost.
While it's still a good idea, as #Zack mentions, to include a plain text version of what you wanted to say, nobody likes to read plain text. I doubt that Zack is reading Stack Overflow on Lynx, for example.
A quick Google search for 'CSS inliner php' brings up: http://classes.verkoyen.eu/css_to_inline_styles
Also it seems that this question has been asked before on stackoverflow (at least once), at least for php, and there was a Ruby answer given in php class to inline css styles?
I want to write an application that sends html formatted email
Never do this. Email MUST be plain text. You cannot even rely on attachments.
Since a lot of email clients ignore the HEAD tag, can I embed an inline stylesheet in the body?
The short answer is no. Gmail strips the tag and it's content.
Hotmail, Yahoo! Mail and Windows Live Mail does not strip style-tags in the body-element.
But take a look at "The Ultimate Guide to CSS" for HTML email over at Campaign Monitor.
Creating an HTML email that works in every email client is hard. I spent several months refining a good looking template.
http://commadot.com/the-holy-mail/ - original blog with my findings.
http://commadot.com/email-best-practices/ - latest greatest.
Specific answer to your question: Gmail will be ok with style="" but not with a <style> block.
You might want to check out the free html email templates that CampaignMonitor and MailChimp (EDIT: and Ink by Zurb) provide:
http://www.campaignmonitor.com/templates/
http://www.mailchimp.com/resources/templates/
http://zurb.com/ink/
There's an updated version of Campaign Monitor's helpful guide here:
http://www.campaignmonitor.com/css/
Unfortunately, the most reliable HTML to use in emails is totally stone age
EDIT: Ink has an "inliner" tool that takes the contents of style tags and inlines them onto the appropriate elements: http://zurb.com/ink/inliner.php
Most gmail clients now support embedded CSS as of September 2016, so it should be safe to do.
https://litmus.com/blog/gmail-to-support-responsive-email-design
Yes you can. However you have to keep in mind that few email clients respect css standards. Just stick to basic css properties like margin and padding, etc., and it should all be fine.
Also you can style your html elements inline (<div style="">) though it's not an elegant solution.
The top answer is outdated. Gmail now supports using media query's along with other css properties now - https://developers.google.com/gmail/design/css
As others have pointed out, the accepted answer is out of date.
In my own tests, as of 8/20/2022, Gmail supports elements with classes, and the use of the <style> tag, as long as it is in the <head>. Also, Gmail no longer strips out inline classes for elements.
Example email:
<head>
<style>
div.mydiv { background-color: blue; }
</style>
</head>
<body>
<div class='mydiv'>This is the contents of my email message! Thank you
google, for observing the style tag!</div>
</body>