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>).
Related
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.
I am coding an html email template. I want to make it fully legal under XHTML rules. There is a button in my code made it with <table> tag and it is linked, of course, to an URL. For that reason I added an <a> tag before the <table>. The W3C validator tool says I cannot nest these elements. I added the code to make it more understandable.
Do you have any suggestion to avoid this issue?
I appreciate your help.
<a style="text-decoration:none; color:#660eaa; font-size:13px; line-height:125%;" href="http://google.com/" target="_blank" >
<table id="templateButton" style="font-size:15px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;" bgcolor="#ffd700" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" style="padding:16px 10px"><strong>Go to Google!</strong></td>
</tr>
</table>
</a>
You can't use an a tag like this.
The proper way is:
<table id="templateButton" style="font-size:15px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;" bgcolor="#ffd700" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" style="padding:16px 10px">
<a style="text-decoration:none; color:#660eaa; font-size:13px; line-height:125%;" href="http://google.com/" target="_blank" ><strong>Go to Google!</strong></a>
</td>
</tr>
</table>
You would style your a tag as a button, not the containers (td or table)
Also, make sure your HTML email is going to look the same or similar in the email clients you want to support. For example the border-radius you have set, will not work in a lot of email clients.
I encourage you to check out this site for more information regarding HTML email: https://www.campaignmonitor.com/dev-resources/will-it-work/
EDIT:
You can style the table and td by adding a background color.
Hello guys i am trying to send an email with HTML in it, and of course i know that the formatting and alot of CSS is not supported in Outlook, but i was wondering why this simple thing was showing broken, is there any quick fix or a workaround/alternative? look at how the buttons should appear:
http://puu.sh/84ijt.png
But they appear like this:
http://puu.sh/84ijA.png
Here is the code for it:
<tr>
<td style="display:block;min-height:38px;max-height:38px;">
<p style="margin-left:15px;">
<a style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;margin-right:10px;float:left;"
href="link here..">Enquire</a>
Full Details
</p>
</div>
</tr>
</td>
There is a bit of mis-information in this thread.
You can use an image for a button, however more advanced designers are trending towards "bulletproof" buttons these days. They display with images turned off. See this link: buttons.cm
Background images are supported in Outlook, but only in the <body> tag OR using VML, see the buttons.cm link above or backgrounds.cm for examples.
Back to your specific example, there are a few ways to accomplish it, but here is how I would do it:
<table width="300" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #000000;">
<tr>
<td style="padding-top:20px; padding-bottom:10px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Enquire
</td>
<td width="20">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Full Details
</td>
<td width="50">
</td>
</tr>
</table>
</td>
</tr>
</table>
On a side note, you need to use the 6-digit hex colors in html email, and don't waste your time with the following css properties as they have inconsistent support:
margin (use padding instead)
text-align (use align="" instead)
min-height & max-height
float (use align="" instead)
background-color (use bgcolor="" instead)
Also, avoid shorthand like padding:5px 5px 0px 5px;. Unfortunately you need to write it out padding:5px; padding-bottom:0;
As an email marketer I suggest you use an image for your button. Especially if it is a call to action. The one thing you don't want to be broken is that, and the only way you can trust it wont be and that is to use an image within a table cell.
I hope that helps!
Have you tried giving the <td> the background-color? (or another container)
You could also try
<a href="#">
<span style="display:block;background-color:red;color:white;width:100px;text-align:center;">link</span>
</a>
I haven't tested in Outlook but it might work.
Using images isn't the best solution, especially since most of the time emails are rendered without images until the user accepts to view images.
The way I do it is a table with in a table, so something like this:
<table width="outside container width here">
<tbody>
<tr>
<table style="apply your styles here, background colors, paddings etc (do not use margins, poorly supported.)" height="height of inner container" width="inner container width here" align="however you want it aligned">
<tbody><tr><td>Your button actually goes here</td></tr></tbody>
</table>
</tr>
</tbody>
</table>
I've been working on making a signature (CSS+HTML) work across multiple platforms, and have hit the wall when it comes to Hotmail.
For some reason, when sending this signature to my Hotmail address, it gets stretched vertically. It seems that Hotmail, for one reason or another, is adding a lot of white space below the text in each table cell?
The problem is clearly illustrated in this graphic: http://www.madculture.es/images/test.jpg
The first signature there, is the intended output. I added borders on #2, to better highlight the problem. Signature three is how it looks when received in Hotmail! :(
This signature works fine in Outlook 2003-2013, Gmail, Lotus Notes, but not in Hotmail.
Does anyone know what could be the reason? I'm clueless, having experimented with this for days now.
Here's the full code for the signature:
<div>
<table border="1" cellspacing="0" cellpadding="1" height="50" style="font-family: Verdana, Arial, sans-serif; font-size: 1em;">
<tr>
<td rowspan="4">
<img src="mc2.png" nosend="1" width="170" height="86" />
</td>
<td style="padding-top: 2px;">
John D. Doe
</td>
</tr>
<tr>
<td style="font-size: 0.85em; font-weight: bold; color: #932D1F; padding-bottom: 2px;">
Marketing & analytics
</td>
</tr>
<tr>
<td style="display: block;">
johnd#doe.com
</td>
</tr>
<tr>
<td style="font-size: 1.05em; font-weight: bold; color: #444; padding-top: 1px;">
Madrid
</td>
</tr>
</table>
</div>
I hope someone can help...
Try slowly removing elements and re-testing at every stage. As a start:
Your table has a height set that's less than your main image
Use nested tables, not rowspan for better email client support
Avoid padding and use set heights instead
Don't set your td to display: block
Add font styling directly to td s (not the table) to get Outlook working correctly