HTML table doesn't display correctly in Outlook - html

I am creating HTML table in Outlook email to make it look like a template example like this,
However the one I created isn't match like it should be. There are 3 issues,
first Manage Information Technology at top right is shift down instead of suppose to be equal position as black box logo like an example template from above.
Second, ServiceNow - Release Notes aligned on left instead of center even though I already have align="center" in <td>.
Third, the black border line locate below orange banner disappear but the snippet code and the outlook preview is showing it but the actual outlook is not.
Here is 2 images of incorrect outlook display,
<table style="height: 643px;" width="772" cellspacing="0" cellpadding="0">
<tbody>
<tr style="border-style: none none solid none;">
<td colspan="2"><span style="font-family: 'times new roman', times;"><img id="logo" style="float: left;" title="" src="toolbar-logo.png" alt="" width="127" height="44" /></span></td>
<td colspan="2">
<p style="text-align: right;"><font face="calibri, times"><span style="font-size: 18.6667px;"><font color="red"><strong>Manage Information Technology</strong></font></span>
</font>
</p>
</td>
</tr>
<tr style="border-style: none none solid none;">
<td colspan="4" align="center"><font size="7" face="calibri"><strong>ServiceNow - Release Notes</strong></font></td>
</tr>
<tr style="border-style: none none solid none;">
<td colspan="4" align="center"><img id="dss-banner" src="DSSbanner.png" alt="" width="100%" height="161" /></td>
</tr>
<tr>
<td style="background: none; border-bottom: 4px solid #000000; height: 2px; width: 100%; margin: 0px 0px 0px 0px;" colspan="4"><span style="font-family: 'times new roman', times;"> </span></td>
</tr>
<tr>
<td colspan="4"><span style="font-size: 12pt; font-family: 'calibri', times;">Team,</span></td>
</tr>
<tr>
<td colspan="4"><span style="font-family: 'calibri', times;"><span style="font-size: 12pt;">The following capabilities and improvements have successfully been promoted to the production ServiceNow instance through "${short_description}" on ${mail_script:release.stories.email.date}.<br />The release notes have also been added in the Release Notes Knowledge Article per standard process.</span></span>
</td>
</tr>
<tr>
<td>${mail_script:release.stories.email}</td>
</tr>
<tr>
<td colspan="4"><span style="font-size: 12pt; font-family: 'calibri', times;">Thank you,<br />Service Management</span></td>
</tr>
</tbody>
</table>
Can anyone point where where possible reason why it didn't match correctly?

Related

Image in HTML email signature varies in size

In the email signature I'm making for my company I have an embedded image on the left. When I preview the code in Chrome or my IDE the image is sized properly taking up the same height as the three lines of evenly-spaced text to its right. However, when others in my company receive emails from me, sometimes the image is significantly taller than the lines of text next to it. How do I ensure that my image stays a consistent size across devices and email clients?
<html>
<STYLE>A {text-decoration: none;} </STYLE><body>
<table data-mysignature-date="2019-09-17T19:52:14.752Z" data-mysignature-is-paid="0" width="500" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td
valign="center" width="0" style="padding:0 8px 0 0;vertical-align: middle;"><img alt="TETON Sports" width="100" style="width:67px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">
</td>
<td style="font-size:1em;padding:0 0 0 0;vertical-align: top;" valign="top">
<table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.4;font-family:Verdana, Geneva, sans-serif;font-size:90%;color: #000001;">
<tr>
<td>
<div style="font: 1.0em Helvetica, Geneva, sans-serif;color:#000001;">
[COMPANY NAME]
</div>
</td>
</tr>
<tr>
<td style="padding: 0px 0;">
<div style="color:#000001;font-family:Helvetica, Geneva, sans-serif;">
<b> Austin Berenyi </b>
<span style="color:#FF9E18;font-family:Helvetica, Geneva, sans-serif;"> <b>//</b> </span>
<span style="color:#54565A;font-family:Helvetica, Geneva, sans-serif;"> <i>Graphic Designer</i> </span>
</div>
</td>
</tr>
<tr>
<td>
<span style="font: 1.0em Helvetica, Geneva, sans-serif;color:#54565A;" <span><i>austin#company.com</i></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
It may sounds naive, but just try to specify height of your img:
<img alt="TETON Sports" style="width:67px; height: 48px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">
In addition try to always set font-size of text (px or em) and try to avoid these values as percents.

How do I fix an html rendering issue in Google Inbox (not present in Gmail) that adds abbreviation points

I have created this email layout below, and cannot for the life of me figure out why Gmail renders it correctly, but Inbox renders it horribly.
Upon inspection, it is for some reason separating a bunch of stuff into their own table elements. Anyone see something I'm missing. I'm very new to html for email, and am constantly shocked at how bad it can be.
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="center"><span style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;">shift</span><span style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;">Swap</span></td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td>
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="padding: 35px;">
<h3>
Welcome <span style="text-decoration: none;"><%= #email %></span>!
</h3>
<div>
<span style="display: block;">You can confirm your account email through the link below:</span>
<br>
Confirm your account
<br>
<span style="display: block;">Or paste the following into the address bar: <%= confirmation_url(#resource, confirmation_token: #token) %></span>
<h3 style="padding-top: 20px;">Thanks for signing up. We're looking forward to seeing you on the site!</h3>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center"><td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td></tr>
</table>
</td>
</tr>
</table>
</body>
Here is what it looks like when Inbox for some reason hides the entire message, which seems to happen when I send a "reconfirm" message:
And Gmail:
I really recommend to take out all non table elements, since even if it is 2016, mail clients are way behind
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" width="50%" align="right" style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;padding-right: 0">
shift
</td>
<td valign="top" align="left" style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;padding-left: 0">
Swap
</td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td style="padding: 35px;background: #FFF">
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="text-decoration: none; font-size: 22px">
Welcome
# email !
</td>
</tr>
<tr>
<td style="padding-top: 20px; font-size: 22px">
You can confirm your account email through the link below:
</td>
</tr>
<tr>
<td>
Confirm your account
</td>
</tr>
<tr>
<td>
Or paste the following into the address bar:
confirmation_url
</td>
</tr>
<tr>
<td style="padding: 20px 0; font-size: 22px">
Thanks for signing up. We're looking forward to seeing you on the site!
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center">
<td style="color: #2b2b2b">Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©
<%=T ime.new.year %>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Knowing how "fussy" e-mail clients are, there's one thing that I see that may be causing unpredictable results. It's a long-shot that this will fix anything other than a typing error; but within that line of code, do you see what I see near 'color: 2b2b2b'?
<td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td>
The semi-colon is outside of the style attribute. Prolley just a foul ball, but you never know. ;)

HTML Emails: How to hide whitespace?

I'm building an email template. Part of the design involves using Georgia Italic as the font. The text only takes up the bottom 75% of the space allotted for the text. This means there's a sizable amount of whitespace above the text.
Here's the code:
<table width="660" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table style="border-collapse: collapse;">
<tr>
<td align="right" width="420" height="200" bgcolor="#FFFFFF" style="font-family: Georgia, Times New Roman, serif; font-size:300px; line-height:300px; color:#e47b5c; padding: 10px 0 10px 0; font-style:italic; line-height:300px; border-collapse:collapse;" >
<span>75</span>
</td>
<td align="right" valign="bottom" width="240" height="200" bgcolor="#FFFFFF" style="font-family: Georgia, Times New Roman, serif; color:#e47b5c;" >
<table align="left" style="border-collapse: collapse;">
<tr>
<td align="middle" style="font-size:150px; line-height:150px; color:#e47b5c; font-style:italic;">
<span>%</span>
</td>
</tr>
<tr>
<td align="left" style="font-size:80px; line-height:80px; color:#e47b5c;">
<span>OFF</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
http://jsfiddle.net/AEhy6/1/
(select the "75%" to see the extra space)
I'm looking for a way to cover up the whitespace.
I suspect the only way is to change the font. All ideas are welcome! Thank you.
In your example you can reduce the line-height to get rid of the undesired whitespace present above the letters....

HTML Emails - Outlook 2007/2010 border collapse/spacing issue

So, I'm having issues with Outlook 2007/2010 spacing (border collapse?) issue.
Here is an image as to what it is doing (the Hurry Now.. text gets pushed down)
Here is what it is supposed to look like & works fine in all other email clients.
Here is my snippet of code for the Hero section
<table cellpadding="0" cellspacing="0" width="561" align="center" bgcolor="#4b88cf" style="font-family: Tahoma, Arial, Verdana, sans-serif; font-size:40px; font-weight:normal; line-height:40px; text-align:left; color:#ffffff; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td width="561" height="37" style="font-size: 0; line-height: 0" bgcolor="#4b88cf"> </td>
</tr> <!-- end spacer -->
<tr>
<td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">Save 10% on all</font></td>
</tr> <!-- heading -->
<tr>
<td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">EasyACCT 2013 products.</font></td>
</tr> <!-- heading -->
<tr>
<td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">Only 4 days left!</font></td>
</tr> <!-- heading -->
<tr>
<td width="561" height="25" style="font-size: 0; line-height: 0" bgcolor="#4b88cf"> </td>
</tr> <!-- spacer here -->
<!-- start button -->
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="left" style="font-family: Tahoma, Arial, Verdana, sans-serif; font-size:14px; font-weight:normal; line-height:20px; text-align:left; color:#ffffff; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="border-collapse: collapse;"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/left-btn.png" border="0" style="display: block;" alt="left side button"/></td> <!-- left side button -->
<td align="center" style="font-weight: bold; border-collapse: collapse;" bgcolor="#f0640f"><font color="#ffffff" style="text-decoration: none;">Renew Now to Save 10%</font></td>
<td style="border-collapse: collapse;"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/right-btn.png" border="0" style="display: block;" alt="right side button"/></td> <!-- right side button -->
</tr>
</table>
</td>
</tr>
<!-- end button -->
<tr>
<td width="561" height="15" style="font-size: 0; line-height: 0; border-collapse: collapse;" bgcolor="#4b88cf"> </td>
</tr> <!-- spacer here -->
<tr>
<td valign="top" width="561" style="font-size: 18px; color: #ffffff; border-collapse: collapse;"><font color="#ffffff">Hurry, offer ends October 31!</font><sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></td>
</tr>
<tr>
<td width="561" height="23" style="font-size: 0; line-height: 0; border-collapse: collapse;" bgcolor="#4b88cf"> </td>
</tr> <!-- spacer here -->
</table>
This is a problem I've come across with Outlook 2007,2010 and of course 2013. They don't like small cells.
I've found this code has worked for me and gone through Litmus tests.
<tr height="1">
<td width="482" height="1" align="left" valign="top" background="#000000" style="background:#000000;font-size: 1px; line-height: 0px; mso-line-height-rule: exactly;"> </td>
</tr>
The mso-line-height-rule: exactly; is an outlook specific style. The font-size: 1px should match however much height you want your cell to be. The line-height: 0px; zero's out any line-height space.
HOWEVER, after testing your code snippet with the updated cells this doesn't seem to be the actual problem. I made the spacer cells black so I could better see what was actually going on.
The black spacer cell ends well above the copy, ie. it's not pushing your text down. The issue is actually the cell with the white copy in it.
I added a line height to the cell and removed the border-collapse:collapse; (you don't need it on individual cells. You may just want to double check your superscripts are all good.
<tr>
<td valign="top" width="561" style="font-size: 18px; line-height: 20px; color: #ffffff;"><font color="#ffffff">Hurry, offer ends October 31!<sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></font></td>
</tr>
This was the result:
Hope that helps.
Outlook has a minimum cell height of 19px, so the 15px cell you have as the spacer in seems to be expanding, evern though you have the font-size and line-height zero'd out.
An alternative way to do it, is instead of having your text sandwiched between two spacer rows, make 1 taller row and vertically center it instead:
<tr>
<td valign="middle" width="561" height="50" style="font-size: 18px; color: #ffffff; border-collapse: collapse;"><font color="#ffffff">Hurry, offer ends October 31!</font><sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></td>
</tr>
Throughout your whole email, you don't really need separate rows for each line of text, just use <br> instead to separate the rows.
I agree with John. Just use the breaks to create vertical whitespace. You're making it more difficult for yourself, without any reason :-)
Just put the right attributes at their right place: your use of the font-tag is overwhelming, as is the border-collapse:collapse and the font-size:0; line-height:0;.
If you want to create a whitespace, give a height at the TD (20px) and style="font-size:20px; line-height:20px;", with a BR-tag inside (no nbsp).
See my example:
<table cellpadding="0" cellspacing="0" border="0" width="561" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr><td bgcolor="#4b88cf" align="left" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:40px; line-height:46px; color:#ffffff;"><br />Save 10% on all<br />EasyACCT 2013 products.<br />Only 4 days left!<br /><br /></td></tr>
<tr><td bgcolor="#4b88cf"><table cellpadding="0" cellspacing="0" border="0" align="left"><tr>
<td width="12" height="50" bgcolor="#f0640f"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/left-btn.png" width="12" height="50" alt="" border="0" style="display:block;" /></td>
<td bgcolor="#f0640f" align="center" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:14px; line-height:20px; color:#ffffff;"><strong style="color:#ffffff;">Renew Now to Save 10%</strong></td>
<td width="14" bgcolor="#f0640f"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/right-btn.png" width="14" height="50" alt="" border="0" style="display:block;" /></td>
</tr></table></td></tr>
<tr><td bgcolor="#4b88cf" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:18px; line-height:20px; color:#ffffff;"><br />Hurry, offer ends October 31!<sup style="font-size:12px; line-height:0; vertical-align:8px">1</sup><br /><br /></td></tr></table>

Width issue in Outlook 2010

I have a fair bit of experience coding emails and am familiar with the nightmare that is Outlook but this is a new one for me and, what's more, it only seems to be affecting some users. Basically, in our newsletter templates there is a table designed to nest the content in. It has columns on the left and right with width attributes to act as margins. For some users of 2010, Outlook seems to collapse the columns, for others it doesn't.
Is anyone aware of a setting in Outlook that might cause this to happen?
Here's a version of the code, with the contents stripped out:
<table style="FONT-FAMILY: Helvetica Neue, Arial, sans-serif; COLOR: #4b4b4b; FONT-SIZE: 12px" border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#FFFFFF" align="center">
<tbody>
<tr>
<td rowspan="6" width="30"></td>
<td height="30"></td>
<td rowspan="6" width="30"></td>
</tr>
<tr>
<td style="PADDING-BOTTOM: 40px">
<table style="WIDTH: 540px">
<tbody>
<tr>
<td style="TEXT-ALIGN: right; PADDING-BOTTOM: 10px; FONT-SIZE: 10px"></td>
</tr>
</tbody>
</table>
<table style="WIDTH: 540px" border="0" cellspacing="0">
<tbody>
<tr>
<td width="340"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="PADDING-BOTTOM: 20px"></td>
</tr>
<tr>
<td style="PADDING-BOTTOM: 45px; FONT-SIZE: 10px; BORDER-TOP: #412878 4px solid; PADDING-TOP: 20px">
</td>
</tr>
</tbody>
</table>
Thanks,
M
My advice would be to look at Campaign Monitors CSS support list for email clients; positional CSS such as margin, padding etc. are completely ignored by Outlook '10. Stay as far away as possible from CSS when using Outlook '10, code like its the early 90's and use height attributes and extra elements if needed.
http://www.campaignmonitor.com/css/