I'm trying to create a web-mail template with a zebra-striped style that looks the same on different clients. This template comes out from a third party application ( that I cannot control ) that iterates over candidates and the only thing that i can do is, for each candidate, to create a partial, something like this pseudo-code:
for(candidate of candidates) {
<table class="zebra" width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse">
<tbody>
<tr>
<td style="padding-left:28px;"> </td>
<td class="colored-dome" valign="top" width="600" style="text-align: left; font-family:Arial; text-transform:uppercase; color:#ffffff; text-decoration:none; font-size:18px; padding:5px 38px 5px 10px;">
<span>^candidate.role^</span>
</td>
<td style="padding-left:28px;"> </td>
</tr>
</tbody>
</table>
}
As you can see here i'm using a css class:
table.zebra:nth-child(odd) td.colored-dome {
background-color:#8274b6;
}
table.zebra:nth-child(even) td.colored-dome {
background-color:#9d9d9d;
}
because I can't use nth-child: selector inline. So I tryed:
<style> tag inside <head> ,
<style> tag inside <body> (as an attempt),
css file from working remote url,
but none of this solution works on outlook 2010, hotmail, gmail. So my question is: is there a way to create a working web-mail-zebra-striped for those clients? Can we say that these solutions will never work for Hotmail, Gmail or Outlook?
nth-child does not work in Outlook or Gmail and a few other clients.
https://www.campaignmonitor.com/css/selectors/nth-child/
The solution to ensure this always works is to inline the style you want for those email clients.
Related
I'm trying to make a signature for email (Lotus Notes). However, while it looks fine on Lotus (yay) I'm getting this space between the title and email address on Gmail.
And I have no idea why that is.
Picture of how it looks on Lotus Notes:
And how it looks on gmail:
Here link to a Fiddle Doesn't work properly as it does on email (don't know why):
<table border="0" cellpadding="6" cellspacing="0">
<tr align="left">
<td valign="top" width="100" ><img src="https://i.imgur.com/XCyNdd6.png" alt="logo" ></td>
<td valign="top" width="700" ><strong><span style=" display:table;font-family: Arial; font-size: medium; "><font size="3" face="Arial">John Doe Smith</font></span></strong>
<table align="left" width="100%" cellpadding="2", cellspacing="0">
<tr >
<td><span style="display:table; font-size:small; margin-top:0px; text-decoration:none; font-family: Arial; color:#16161D;"><font size="2" face="Arial" color="#16161D">https:/URL-example.eu</font></span></td>
</tr>
<tr >
<td><span style=" display:table; font-size: small; text-decoration:none; font-family: Arial;"><font size="2" face="Arial" color="#16161D";>email#URL-example.eu</font></span></td>
</tr>
</table>
<table align="left" width="100" cellpadding="2", cellspacing="" >
<tr align="left">
<td width="30"><img src="https://i.imgur.com/f6DwyDA.png" alt="Example Name Facebook Account"></td>
<td width="35"><img src="https://i.imgur.com/BDQERsI.png" alt="Example Name Instagram Account"></td>
<td width="50"><img src="https://i.imgur.com/Xx1atey.png" alt=Example Name Twitter Account"></td>
</tr>
</table>
</td>
</tr>
</table>
Thank you for all your help.
It probably has to do with how you're adding the signature in Gmail.
The simplest method is to open your HTML + CSS in a webpage (you can even use the Stack Snippet you shared just full screen it) and hit ctrl/cmd + A to select all the content on the page it should highlight all in blue including images. Then hit ctrl/cmd + C to copy it to clipboard and just paste it into the signature field in Gmail. Your code works fine if you do the above.
I couldn't replicate this in a Gmail test. Should be fine - but check #JHeth's answer.
Nevertheless, I also found a slight difference on Outlook iOS, as it added a line-height:150% to the <font> and <a> tags. There are often defaults like this, so it's best to always specify font-size and line-height for <font> and <p> and <a> tags, and there will also be colour and text-decoration defaults for <a>.
For block elements there are default margins and paddings.
So that's how you will get consistency, by adding a HTML-email equivalent CSS reset (note it has to be inline like you've done here, as opposed to <style>).
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 an email that is working properly in any other computer or mobile display, except the Gmail app and Gmail in laptop. 2 issues :
I added a #media code in the css in order for the images to be responsive when viewed on mobile (width:100%), but gmail app (tested both in a samsung phone and apple phone) seems to be ignoring it. So my images appear smaller, with the fixed width specified for big screens.
Here is the result : http://screencast.com/t/nm3jyc47K. The expected result, is to have the images filling 100% of the table (almost all the screen if we exclude the spacers), and obviously centered.
On the Gmail laptop website, my spacers between the tables seems to be ignored, therefore inline elements are touching each other. Here is the result : http://screencast.com/t/3D7H0Fqly. The expected result is a 24px spacer in between. (PD : Don't bother about the size, I was doing some testing, the size on desktop appear properly)
Here is the HTML code of the images, 3 images and 2 spacers in between.
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
<tbody>
<tr>
<td align="center">
<a href="img-1.png" style="border:none; display:block;height:136px" width="170px" /></a>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="24"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-24" style="max-width:24px;">
<tbody>
<tr>
<td height="1" style="font-size:1px;line-height:1px"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="170" valign="top"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
<tbody>
<tr>
<td align="center">
<a href="img-2.png" style="border:none; display:block;height:136px" width="170px" /></a>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="24"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-24" style="max-width:24px;">
<tbody>
<tr>
<td height="1" style="font-size:1px;line-height:1px"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="170" valign="top"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
<tbody>
<tr>
<td align="center">
<a href="img-3.png" style="border:none; display:block;height:136px" width="170px" /></a>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
And now the css code, in the head part of the email :
<style type="text/css">
body{width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;padding:0;background-color:#ffffff}
* {-webkit-font-smoothing:antialiased}
.ExternalClass * {line-height:100%}
table td {border-collapse:collapse}
.wlf {width:600px}
.w-420 {width:420px}
.w-170 {width:170px}
.w-120 {width:120px}
.w-24 {width:24px}
.w-15 {width:15px}
#media only screen and (max-width:590px) {
.full-width {width:100% !important}
.m-width {width:100% !important;max-width:100% !important;float:none !important}
.m-block {display:block}
.m-none {display:none}
.m-img-ft {width:100% !important;height:auto !important;max-width:250px !important}
div {box-sizing:border-box !important}
}
</style>
And again, I have no issue whatsoever with all the other email programs. Any idea what may be wrong in order to fixed these both issues ? (Without compromising the display in the others ?)
Thanks
Unfortunately you found the reason that most HTML email developers have very little hair and a slight twitch in their left eye. There is unfortunately no 'standard' for HTML for email across each email client, so you get a great diversity in not just what tags/styles are accepted, but also on what exactly each of those will do.
For your issue, the reason it seems to be ignoring it is because it is stripping your style tag out completely. (ref) Gmail app (on desktop and mobile) pretty much strips everything out of the head and Gmail web client has very limited 'hacky' support on stylesheets.
A great resource to see what is accepted by the major email clients: CampaignMonitor/CSS
Keep in mind, when you fix it on Gmail, it will likely wind up breaking it on a different email client. I would recommend getting an acid testing service like Email on Acid or Litmus, etc.
You will likely need to start designing for Gmail App first and then using CSS / 'Ghost tables' or MSO conditionals to make it work for desktop.
Sample places for Fluid Responsive templates:
http://tedgoas.github.io/Cerberus/
https://www.emailonacid.com/blog/article/email-marketing/our-gift-to-you-a-free-fluid-hybrid-email-template
http://labs.actionrocket.co/the-hybrid-coding-approach-2
Gmail doesn't support the <style> tag, so you have to inline all CSS. All other email clients support the <style> tag, so if it weren't for Gmail we'd be able to write html email like a web page. It's safest to inline CSS by hand, though there are a few CSS inlining tools that can speed things up.
Regarding spacers, something like this works across email clients:
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="40" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
Note: I wrote the first sample template referenced in Gortonington's answer (hello!) and can vouch that all CSS and spacers within that repo work in Gmail / Gmail app.
Does anybody know why the © and ® don't superscript nicely without affecting the leading (i.e. line-height) like ™ and ℠ do?
I've tried wrapping © and ® with <sup> and even <small> but I can't get it to work the way I need it to. Sometimes changing the font size helps but not always.
This is for HTML emails where we use it in <h1>, subheads, and body copy.
When I do wrap it in <sup> and apply CSS it just becomes difficult to control. It behaves differently from one email client to another, and one device to another (this is for responsive emails).
Here's the fiddle: http://jsfiddle.net/cy03eov1/5/
And of course position: and em don't work well in email and margin support is spotty.
body {
font-size: 26px;
line-height: 1em;
color: #ccc;
font-family: Helvetica, sans-serif;
background: lightslategray;
}
table {
width: 80%;
margin: 30px auto 0;
background: #fff;
padding: 5px 20px;
}
.copyright {
font-size:70%;
}
<table cellspacing="0" border="0">
<tr>
<td>
<p>Do you know that horrible fear when you’ve broken something on a client project and you have no idea how to fix it? I do… Sometimes I’ll have been<span class="copyright" style="color:red;"><sup>©</sup></span> wading through templates on a site, getting it all up to scratch, then suddenly I’m faced with a page of doom—a whole<span style="color:red; font-size: 70%; vertical-align:text-top;">®</span> page of garbled semi-English that sort of resembles an error<span style="color:red;">™</span> message, but nothing I’ve ever seen before.</p>
<p>As a freelancer, I’ve always been proud to have the time to dedicate to learning<span style="color:red;">℠</span>. Keeping up with the industry, and being able to level up my skills on each new project, is very important to me.</p>
<p>But sometimes I struggled when I pushed myself that little bit too far. A few times I’ve had to request a lifeline from kind people on Twitter to pull me out of a hole. And then I feel a bit daft, having to admit my inadequacies on a social network in order to save myself from a worse situation.</p>
</td>
</tr>
</table>
Unicode does not have superscript or subscript glyphs for these characters so you have to modify the font style separately
http://jsfiddle.net/cy03eov1/8/embedded/result/
I just added
p span { }
and made the font smaller and moved it up by 8 pixels.
I noticed you mentioned your doing this for an email. While the above mentioned solution would work fine for a webpage, it's best not to use CSS in email, especially positioning attributes like position:relative;
You can achieve the same affect with tables though (see demo)
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" style="font-size:18px;">Line of text followed by a </td>
<td height="20">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="10" style="font-size:9px;">©</td>
</tr>
<tr>
<td height="10"><table border="0" cellpadding="0" cellspacing="0"><tr><td><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table></td><!-- this is a standard table spacer alternative to email shim -->
</tr>
</table>
</td>
<td height="20" style="font-size:18px;">character.</td>
</tr>
</table>
Takes a lot more work but works across all email clients.
I wrote a php script to send a message, with html formatting and custom css styles,
to a facebook user. The message can be seen in his private message box.
it would be perfect if html formatting was kept on.
The only way I found to do that was to put the style inline (as a tag attribute)
instead of writing an internal style section or using an external css file.
ex: <div style="width:100px">
But I have two problems.
image in img tag does not display and I cannot insert a wrapper block to fit the whole message width.
How can I do that properly?
Not sure what quirks facebook has, but it is best practice to include inline styling and also using tables in html email. For your image to work, it probably needs to be hosted online, not embedded.
Assuming facebook doesn't strip any code out, a simple table like this should fit the width:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td style="padding:20px; padding-bottom:0;">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="http://lorempixel.com/400/200/sports/" width="400" height="200" alt="">
</td>
</tr>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; padding:20px;">
Content here.
</td>
</tr>
</table>
Note - this is not a full html email structure, just a table that should be placed inside your body section.