I have a condition in html which should show a specific td depending if its viewed via outlook desktop or others.
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
<tr>
<!--[if !(mso)]>
<td style="background-color: #4400c9; border-radius: 10px 10px 0px 0px;">
<![endif]-->
<!--[if mso]>
<td style="background: url('');">
<![endif]-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
Edit:
This is the result im getting.
Hope someone can point out whats wrong with my condition.
Thanks.
I see what you're trying to do there.
One thing to note, that code is Outlook specific, so your !mso is basically telling Outlook to ignore the code it's wrapped around, rather than show in other email clients.
Also, your non-Outlook conditional statement should be without the brackets around mso.
Like this: ...[if !mso]...
Your !mso is hiding the fallback, so you need to include a slight variation of the conditional code. You should note the extra <!--[if !mso]> <!----> at the beginning and the <!-- <![endif]--> at the end of the !mso conditional.
What this does is allow the non-Outlook content to display un-commented for all other email clients but at the same time hide that content in Outlook.
Here are some good resources to help get your head around this technique:
1 - https://stackoverflow.design/email/base/mso
2 - HTML Emails: fallback for mso conditional?
3 - https://litmus.com/community/discussions/396-conditional-code-for-outlook
Here is how your code should look:
<!-- ### RENDER EVERYWHERE ELSE ### -->
<!--[if !mso]> <!---->
<td>Non Outlook</td>
<!-- <![endif]-->
<!-- ### RENDER IN OUTLOOK ONLY ### -->
<!--[if mso]>
<td>Outlook only</td>
<![endif]-->
Related
I'm trying to create an HTML email that will display properly in all widely used email clients. I'm wrapping the whole email in a table, and I'd like it to have a width that is up to 98% of the available width, but no greater than 800 pixels. Like this:
<table style="width:98%; max-width:800px;">
But I'm not doing it that way, since according to this Outlook 2007 does not support the CSS width property.
Instead, I'm doing this:
<table width="98%">
Is there any way to also set a max-width without relying on CSS?
Yes, there is a way to emulate max-width using a table, thus giving you both responsive and Outlook-friendly layout. What's more, this solution doesn't require conditional comments.
Suppose you want the equivalent of a centered div with max-width of 350px. You create a table, set the width to 100%. The table has three cells in a row. Set the width of the center TD to 350 (using the HTML width attribute, not CSS), and there you go.
If you want your content aligned left instead of centered, just leave out the first empty cell.
Example:
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="350">The width of this cell should be a maximum of
350 pixels, but shrink to widths less than 350 pixels.
</td>
<td></td>
</tr>
</table>
In the jsfiddle I give the table a border so you can see what's going on, but obviously you wouldn't want one in real life:
http://jsfiddle.net/YcwM7/
There is a trick you can do for Outlook 2007 using conditional html comments.
The code below will make sure that Outlook table is 800px wide, its not max-width but it works better than letting the table span across the entire window.
<!--[if gte mso 9]>
<style>
#tableForOutlook {
width:800px;
}
</style>
<![endif]-->
<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
<table id="tableForOutlook"><tr><td>
<![endif]-->
<tr><td>
[Your Content Goes Here]
</td></tr>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
<table>
The short answer: no.
The long answer:
Fixed formats work better for HTML emails. In my experience you're best off pretending it's 1999 when it comes to HTML emails. Be explicit and use HTML attributes (width="650") where ever possible in your table definitions, not CSS (style="width:650px"). Use fixed widths, no percentages. A table width of 650 pixels wide is a safe bet. Use inline CSS to set text properties.
It's not a matter of what works in "HTML emails", but rather the plethora of email clients and their limited (and sometimes deliberately so in the case of Gmail, Hotmail etc) ability to render HTML.
Bit late to the party, but this will get it done. I left the example at 600, as that is what most people will use:
Similar to Shay's example except this also includes max-width to work on the rest of the clients that do have support, as well as a second method to prevent the expansion (media query) which is needed for Outlook '11.
In the head:
<style type="text/css">
#media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
In the body:
<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
main content here
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
Here is another example of this in use: Responsive order confirmation emails for mobile devices?
This is the solution that worked for me
https://gist.github.com/elidickinson/5525752#gistcomment-1649300, thanks to #philipp-klinz
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->
<!-- PLACE CONTENT HERE -->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
So I am testing out some emails that will be sent to customers/users and I am seeing that outlook doesn't render the background image well, its repeating it.
I have searched and tried certain things like:
https://backgrounds.cm/
I tryed to replace fill="f" & fill type="frame" to "t" & "tile" but still getting the same result.
I have changed the width & height to be the same as or or the picture itself.
Tried to change the CSS background-repeat:no-repeat; moved it around all the ways I know of
Tryed to replace the "v:background" to "v:rect"
Now I'm here :)
I'm seeing that this is a known issue but I can't seem to find a way that works for me.
I really appreciate any help or info in the right direction!
Here is the actual HTML I am using:
<body style="padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none" bgcolor="#ffffff">
<table align="center" cellpadding="0" cellspacing="0" width="100%" height="100%" border="0">
<tr>
<td background="http://i.imgur.com/uu9hFXR.png"
bgcolor="#E3E6C6"
valign="top"
style="background: url(http://i.imgur.com/uu9hFXR.png);
background-repeat:no-repeat;
background-color: #E3E6C6;
background-position: center;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="f">
<v:fill type="frame" src="http://i.imgur.com/uu9hFXR.png" color="#E3E6C6"/>
</v:background>
<![endif]-->
</td>
</tr>
</table>
</body>
Kind regards!
According to this list Outlook.com and Outlook 2007/2013 does not support background-repeat
It looks like you are calling the image in the background and then calling it again in style="background:...".
Have you tried removing one of those two ref'd images in the table?
I've recently started working on creating email templates, and have encountered some issues that I am not finding any explanation for.
I generated buttons from buttons.cm under the expectation that they would be bulletproof, and while they were great for most clients, they failed on web based outlook clients.
The results appeared like this (with slight modifications, explained later)
<table style="width: 100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td style="font-family: arial;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:30px;v-text-anchor:middle;width:150px;font-family:arial;background-color:#72BC00;color:#ffffff;" arcsize="14%" stroke="f" fillcolor="#72BC00">
<w:anchorlock/>
<center>
<![endif]-->
Learn More
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</td>
</tr>
</table>
What I am aiming for is this:
Screen shot of working version
But what I get for all browser based outlook clients is this:
Screen shot of failed version
The problem being that in the failed version
cell padding fails
the buttons are not links anymore, in fact all the styles are taken from the button and applied to the parent table.
the first item is actually supposed to be the last, but it is moved to the top, and stripped of all styles, for no apparent reason.
Is there a solution for this? I have yet to find anything. Thanks!
What I've added to the generated button is: Cell padding, changed display from inline-block to table (fixes the buttons from being 100% width and allows centered text in outlook), and made the containing element a table, not a div.
Buttons.cm was a good resource, but it's getting a little outdated.
I support Outlook but try to avoid VML whenever possible. I currently use something like this:
<!-- Button : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
<a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<span style="color:#ffffff">A Button</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
All the are messy, but it's something all clients universally understand.
A second, simpler option is to use border-width to fake padding, like so:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
I am a button →
</td>
</tr>
</table>
</td>
</tr>
</table>
Some email clients (mainly Outlook) don't allow a border-width more than 12 or 15 pixels, and this only works with solid colors, so this some have some drawbacks.
More options for bulletproof buttons are on Litmus.
For #2, are you updating the URL in the VML code as well as the anchor tag? Outlook uses the URL in the VML for the link, not the anchor tag.
This causes a problem for a lot of link tracking systems in email, which is one of many reasons I avoid using these kinds of buttons. We've convinced most clients to go with plain CSS styled buttons, with the understanding that Outlook will loose the rounded corners.
I've been looking for answer for this for ages, either I can make the box link or the word but never both, however I think this may be the answer. I have sent out a few emails using it and it seems to work fine.
<center>
<table align="center" cellpadding="20px" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" style="padding: 15px;height: 60px; width: 100%" class="" ><br>
<br>
Find out more <!--[if mso]> <![endif]--><br>
<br></td>
</tr>
</tbody>
</table>
</center>
I have been working in an html email template. And I am almost at the end of my work. The template looks pretty good in mayor email clients. But there is a problem with Outlook 2007/2010/2013. Those three guys do not respect the max width of my template. I do not really know why this happens.
Do you have any idea?
Any advice will be appreciated. Thank you.
<body style="margin:0; font-size:13px; font-family:'Trebuchet MS', Helvetica, Verdana, Arial;" bgcolor="#bb9dd8">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td bgcolor="#bb9dd8">
<!-- //Begin Main Container\\ -->
<table class="mainContainer" style="margin-top:20px;" width="640px" align="center" cellspacing="0" cellpadding="0" border="0">
<!-- //From here begin header and the layout structure\\ -->
That was the piece of code where the max width is defined. Thank you.
You are correct, PC versions of Outlook 2007+ do not support max-widths. You can take one of two approaches here to achieve a fluid width, though.
Use some Outlook conditional code to establish a fixed width table. This will be ignored by other email clients.
<table width="100%">
<tr>
<td>
<!--[if gte mso 9]>
<table width="640" style="width:640px">
<tr>
<td>
<![endif]-->
Put main content table here
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
Another approach involves using a media query, and a 3 column table. The outer columns will have non-breaking spaces, and the middle will be set to your Outlook width and contain your main table.
<style>
#media only screen and (min-width: 640px) {
.maxW {width: 640px !important;}
}
</style>
<table align="center" width="100%" >
<tr>
<td> </td>
<td align="center" valign="top" width="640" style="width:640px" >
<table align="center" style="margin: auto; max-width: 640px" width="100%" class="maxW">
<tr>
<td>Put your header image here</td>
just remove px from width and you can try using width="640" instead of width="640px"
Either wrap in a defined table in Mso conditional or set an ID with a defined width in style sheet that changes back to percent in media queries. Outlook does not respect max-width. See here for CSS compatability.
Also - you do not put the px when defining the HTML width. That is only in CSS. E.g. Width="640" not width="640px"
I'm creating a newsletter and set the background-color using a hexcode #25292C; When I send the newsletter out the message appears fine. When I forward the newsletter to someone else the newsletter background overlays the entire email. I want to prevent the email from getting the newsletter background color. I'm using lotus notes as my email client.
Is there any workaround ?
Here is what you are after:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title></head>
<body style="margin: 0px; padding: 0px background-color: #FFFFFF;" bgcolor="#FFFFFF"><!-- << bg color for forwarding // main bg color >> --><table bgcolor="#323232" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="padding:30px;"><tr><td>
<!-- CENTER FLOAT -->
<table width="600" border="0" valign="top" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="padding:30px;"><tr><td>
main panel
</td></tr></table>
<!-- /CENTER FLOAT -->
</td></tr></table></body></html>
When you forward the email to a second recipient, the background is white (or whatever you set it)
This worked for me
<body style="background-color:#333333; min-height:1000px;" bgcolor="#333333">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="bg.jpg" color="#333333"/>
</v:background>
<![endif]-->
......
</body>
Are you using Tables? I have done this and had no issues on FWD emails(well my focus was outlook/gmail/yahoo/aol)
<body bgcolor="#25292C">
<div style="background-color:#25292C;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#25292C">
<tr>
<td>
your stuff
</td>
</tr>
</table>
</div>
</body>
...but then again...a lot of email providers (not sure what you focus...Outlook iEX) are not capable of composing (or Forwarding) complex HTML messages in its message body. You can get around this by choosing "Forward as Attachment" or "Redirect" from the Message menu/bar, these will send the message intact (and display inline on some of your recipients' email programs).
Outlook user preferences can strip the body style right out of your email. It is usually a best practice to wrap your content in a tag and apply colors to EACH for maximum compatibility with email clients.
It's a pain but it works. Also remember don't use shortened colors like: #F00. Outlook makes these black.
simple email format:
<table>
<tr>
<td (width) (bgcolor) (style including font, font-size, color and if applicable, line height)> content </td>
</tr>
</table>