I am sending emails from the server to the customers and my html code works perfectly on every platform except Microsoft Outlook Desktop.
I am using html email templates with keys inside that I replace according to customers and email properties such as:
<tr style="display: {{displayProduct}};">
It turns into:
<tr style="display: none;">
There are product info under this such as productName. It does not display on other email clients but in outlook it looks like this:
I have used mso-hide attribute but it does not work. I placed it next to where display none is used. If display is none, also mso-hide:all. But it does not work.
I looked to the solutions in this entry, but none of them worked.
What can I do?
Use mso-hide:all; on the <td>(s) rather than the <tr>. Outlook for Windows is very specific about what can go where, and it's not intuitive.
Outlook uses Word as an email editor. Word considers the display cascading style sheet property as unsupported and unknown.
You can read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
Related
I have an email which is going out to a small team of people.
The email contains a table with each row having a "short description" column.
I would like to include the "full description", however but there is too much data to put this as a new column in the same table.
Ideally I would like to be able to hover over the row and view the "full description" as a tooltip.
I have tried using the title attribute, but it seems this is not supported.
Does Outlook support any method in which data is hidden initially, and some action of the user can display it?
The recipients of this are internal to the company I work for, so I only care about this working on Outlook 2016 under Windows.
Sounds like you just need a tooltip for your data in the table. See How To Create Tooltips in HTML for more information.
The Outlook extensibility model doesn't provide anything for that out of the box. Be aware, Outlook uses Word for rendering message bodies, so not all modern HTML markup could be working correctly. You can find the list of supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
This is not supported, as Outlook for Windows desktops is rendered almost as if it were for printing. There is basically no dynamic part to it.
When you hover your mouse over a link, it pulls the href out and displays that in a tooltip, along with "Click or tap to follow link", but that's all. That's not controllable except by changing the href.
Interestingly, it does support local anchors (with corresponding name attribute, not id): https://www.caniemail.com/features/html-anchor-links/
So the table could say "more" and link to a further description below.
Untested but I think this is the gist, for Outlook. Being Outlook-only, I've added conditionals so other email clients won't see a broken link:
<!--[if mso]>more<![endif]-->
<!--[if mso]><a name="description1">This is your in-depth description</a><![endif]-->
If you then wanted to show something else for non-Outlooks, you can use the "if not Outlook" conditional:
<!--[if !mso]><!-->
...
<!--<![endif]-->
I've created my own OneNote Add-in using Nodejs. I am having two issues. I've searched high and low and haven't found a solution.
My add-in adds a new outline to a OneNote page. This outline contains an HTML table with one column and multiple rows. I want set the background of some of the HTML table rows. I have tried everything I could think of, including:
Setting the bgcolor attribute of TR: <tr bgcolor='red'>
Setting the bgcolor attribute of TD: <td bgcolor='red'>
Setting the style attribute of TR: <tr style='background-color:red'>
Setting the style attribute of TD: <td style='background-color:red'>
Using a separate CSS file
Using the Hex value for the color (red) #FF0000
Exporting a OneNote 2016 page as "Single File Web Page (*.mht)", inspecting the contents and trying to replicate that myself.
Tried to view source on the OneNote web version of my page to inspect a table row that has the background color set. (The page content is buried in so many layers, I can't find the content page source).
I tried to figure out how to programmatically add HTML content to the page, but Microsoft's OneNote API doesn't specify how to insert a table.
Noting works. Additionally, I want one of the cells in my table to use   and not strip out extra white space.   doesn't work. Neither <pre> tag. OneNote just ignores my markup, except I was able to specify the thickness of the table border <table border=1>.
For reference, I cannabalized this sample code: Build your first OneNote task pane add-in
I used the above sample code to create this:
taskpane.js in my Github repo
To answer my own question...
I found this after posting the question:
OneNote API HTML tag support
It doesn't appear that Microsoft supports bgcolor, background CSS on tables/tr/td, nor CSS in general with respect to the OneNote API. The <pre> tag and   is not even listed.
Good morning,
I know that this is an old post relatively but I couldn't see many others asking the same question and I've just found a solution.
Essentially you can do normal inline styling but you need to use the backslash for the quotes inside the "var html =..." line.
For example.
var html = "<p style=\"color: blue;font-family:Courier;text-align:center;background-color:yellow;\"> This paragraph shows blue, Courier text</p><table><tr><td style=\"background-color: #D6EEEE;\">A light blue coloured table cell</td></tr></table>"
Hopefully I can now find a way to change the whole page colour programatically...
Chris
I have defined an HTML email template that has an anchor tag which its href attribute is assigned to a handlebars.js
Something like this:
<td class="body-text" align="left" class="padding">For the latest information on this order, please click here.<br></td>
I'm using Litmus to preview all the Email clients available but notice that in Outlook 365 it would show the content inside the email between brackets.
After some research, I came with this issue in their official repository. So, Outlook expects to add the full URL but I'm sending a handlebars.js variable instead. How could I solve this issue?
This may be related to this issue:
http://freshinbox.com/blog/outlook-com-removes-placeholder-links-in-email/
Outlook.com and Office 365 don't like dummy or empty links and subsequently you'll see broken templates in Litmus tests.
For testing purposes, it'll be best to follow the steps in the article I linked and test again.
For a Windows server (16) environment I push different HTML e-mail signatures (Outlook) to all users.
The issue: After adding the signature, Outlook sets an unwanted autospace after each paragraph (enter). I want to change the HTML, so that hitting enter does not result in extra whitespace (so similar to shift+enter).
Signature example
The signature works as it is supposed to. I have sent an e-mail to myself to take a look at the HTML body created by Outlook. As is known from previous posts, this is entirely different from the HTML which I've added.
Looking at the HTML created by Outlook, after manually changing the autospace to 0, Outlook has created many paragraphes, all containing the following statement: style='text-autospace:none'
Since hitting enter results in new paragraphes which do not contain this style-tag, this does not resolve my issue. Using this same style tag in an overarching div, span or table does not solve my issue. I've tried working with paddings and margins, but this has no effect on the paragraph autospace.
I'm sending an HTML mail from my app, this mail contains URLs, is there a way to prevents from mail clients to show these URLs as links?
for example:
<table>
<tbody>
<tr>
<td>http://www.google.com</td>
</tr>
</tbody>
</table>
will generate" http://www.google.com
instead I want it to generate a static text.
any thoughts?
This is a feature of some mail clients and there's no foolproof way to stop them from doing whatever they want with the message contents.
You could try to trick the mail clients by wrapping the addresses in empty tags and hope that they aren't smart enough to see through it:
<td><span>http</span><span>://</span>www.<span>google.</span>com</td>
Use a "zero width space" character:
It does as the name implies. It adds a space in your string but the space takes up zero width so instead of looking like two strings, it looks like one.
I have found the accepted answer doesn't work for Outlook 2013. I have had success with the following:
http<a href='#' style='text-decoration:none; color:#000;'>://www.google.</a>com
Setting the style cursor:default is not honored by Outlook 2013, but if you only make the middle of the url a hyperlink then a user can still select the link text without the cursor pointer appearing.
I'd say that largely depends on the mail client and thus is beyond your control. The only option would be to not make it a URL. E.g. write www.google.com (which the user can copy/paste just like the URL.
I didn't have any luck in preventing MacMail and Yahoo Mail from creating links out of any text string ending in .com (or other domain extension). After hours of testing (even 'href=""' and 'href="#"' did not work), I finally inserted my own URL and then manipulated the CSS and inline styles to remove the mail clients' link styling.
Adding in hidden line break elements in the right places seems to have fixed this for me (for now) in almost all clients, including desktop Outlook, according to Litmus's tests (Apple Mail desktop looks like the main exception).
https:<br style="display: none;"/>//www.w3<br style="display: none;"/>.org/TR/2020/WD-WCAG22-20200227/