I'm trying to put together some email signatures but am running in to issues when sending from outlook to gmail. Sending the signature from gmail to outlook looks good - and the signature looks good in the outlook client. BUT as soon as the email is sent from outlook to gmail it adds spacing and messes things up a little. I've done some research and tried to implement fixes but no luck as of yet.
Here is the email displaying correctly in outlook: and here it is displaying incorrectly once recieved by gmail
Weird thing is it works fine when sending from gmail, so something must be happening when along the way from outlook > gmail. Any tips would be greatly appreciated! I know my code isn't great, just a graphic designer battling my way through email styling!
UPDATE: It seems that this code in gmail is the issue, is there any way of overwriting this?IMAGE
Code below:
<head>
<style>
span, p, td, tr {color:#24406d; line-height: 90%;mso-line-height: taro-papo; font-family: Helvetica, Arial, sans-serif;}
</style>
</head>
<html>
<body>
<table bgcolor="#ffffff" style="width: 320px; background: white;">
<tr><td><hr></td></tr>
<td><span style="font-size: 22px; font-weight: 600;">Name Nameson</span></td></tr>
<tr><td><span style="text-transform: uppercase; font-size: 14px;">Customer Service Manager</span></td></tr>
<tr><td><hr></td></tr>
<tr><td><span style="font-weight: 600;">P.</span> <span>07 1111 1111</span></td></tr>
<tr><td><span style="font-weight: 600;">M.</span> <span>0401 111 111</span></td></tr>
<tr><td><span style="font-weight: 600;">E.</span> <span>test#venetablinds.com.au</td></tr>
<tr><td><span style="font-weight: 600;">A.</span> <span>13/14 Argyle St, Albion QLD 4010</td></tr>
<tr><td><span style="font-weight: 600;">W.</span> <span>www.venetablinds.com.au</p></td></tr>
<tr><td><img src="https://drive.google.com/uc?id=1xze-aa3lvrf6Rrvl0Krb5G2sfVA2LZFm" width="320px"></tr>
<tr><td><span style="white-space: nowrap;">
<a><img src="https://drive.google.com/uc?id=1jiViwT0NnYrNSeUbfjh1RwbyMfL4IACa"></a>
<a><img src="https://drive.google.com/uc?id=1S1wRD6Fqx8MqDu0RlCYauhgWiBMVCLyo"></a>
<a><img src="https://drive.google.com/uc?id=18yiUbFJ4NAapVLkMBBrAvo-HrQFNZ6-e"></a></td></span></tr>
</span>
</table>
</body>
</html>
Can you please check the below code? Hope it will work for you. You have to give cellpadding="0" and cellspacing="0" in table and we have change your HTML structure for desired output.
Please refer to this link: https://jsfiddle.net/yudizsolutions/rhL0p7nw/3/
<html>
<head>
<style>
span,
p,
td,
tr {
color: #24406d;
line-height: 90%;
mso-line-height: taro-papo;
font-family: Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="width: 320px; background: white;">
<tr>
<td>
<hr>
</td>
</tr>
<tr>
<td><span style="font-size: 22px; font-weight: 600;">Name Nameson</span></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td><span style="text-transform: uppercase; font-size: 14px;">Customer Service Manager</span></td>
</tr>
<tr>
<td>
<hr>
</td>
</tr>
<tr>
<td><span style="font-weight: 600;">P.</span> <span>07 1111 1111</span></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td><span style="font-weight: 600;">M.</span> <span>0401 111 111</span></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td><span style="font-weight: 600;">E.</span> <span>test#venetablinds.com.au</span></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td><span style="font-weight: 600;">A.</span> <span>13/14 Argyle St, Albion QLD 4010</span></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td><span style="font-weight: 600;">W.</span> <span>www.venetablinds.com.au</span></p>
</td>
</tr>
<tr>
<td><img src="https://drive.google.com/uc?id=1xze-aa3lvrf6Rrvl0Krb5G2sfVA2LZFm" width="320px">
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td>
<a><img src="https://drive.google.com/uc?id=1jiViwT0NnYrNSeUbfjh1RwbyMfL4IACa"></a>
<a><img src="https://drive.google.com/uc?id=1S1wRD6Fqx8MqDu0RlCYauhgWiBMVCLyo"></a>
<a><img src="https://drive.google.com/uc?id=18yiUbFJ4NAapVLkMBBrAvo-HrQFNZ6-e"></a>
</td>
</tr>
</table>
</body>
</html>
Please check resulted image:
Related
Please provide any relevant solution hide br tag which is append after every html tag,i have tried but not fixed it,when using display none br tag it also append br tag in style,
how to display none br tag not append it any html tag,
writing this html in zoho invoice https://invoice.zoho.in editor
here is code:
<style>
<br>div br {
display: none
}
<br>
</style><br><br>
<div style="font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;"><br> <br><br><br>
<table style="width: 100%;">
<tbody>
<tr>
<td></td>
<td bgcolor="#FFFFFF "><br>
<div style="padding: 15px; max-width: 600px;margin: 0 auto;display: block; border-radius: 0px;padding: 0px; border: 1px solid lightseagreen;"><br>
<br><br><br><br><br><br>
<table style="width: 100%;background: #5d5657 ;">
<tbody>
<tr>
<td><br>
<div><br> <br><br><br><br>
<table width="100%">
<tbody>
<tr>
<td rowspan="2" style="text-align:center;padding:10px;"><br>
<img style="float:left; " width="111" src="https://wire-itsolutions.com/images/logo.png">
<br> <br> <span style="color:white;float:right;font-size: 13px;font-style: italic; padding:10px; font-size: 14px; font-weight:normal;"><br>
<div>Wire-IT Solutions </div><br>
<div>915 NW 1st Ave Apt H808,</div><br>
<div>Miami, FL 33136</div><br>
</span><br> </td>
</tr>
</tbody>
</table><br>
</div><br>
</td>
</tr>
</tbody>
</table><br> <br><br><br><br><br><br><br><br>
<table style="padding: 10px;font-size:14px; width:100%;">
<tbody>
<tr>
<td style="padding:10px;font-size:14px; width:100%;"><br>
<p>Hi [FIRSTNAME],</p><br>
<p><br> Your verification code for email verify is [VCODE] . [SITE]. </p><br>
<br>
<p> </p><br>
<p>Thank you regard </p><br> <br> <br>
</td>
</tr>
<tr>
<td><br>
<div align="center" style="font-size:12px; margin-top:20px; padding:5px; width:100%; background:#eee;"><br>
© 2018 <a href="#" style="color:#333; text-decoration: none;">Wire-IT
Solutions. All Rights Reserved.<br><br> </a><br> </div><br>
</td>
</tr>
<tr>
<td><small></small></td>
</tr>
</tbody>
</table><br>
</div>
</td>
</tr>
</tbody>
</table>
</div>
You can try this in css file and import that css file into HTML.
br {
display: none
}
I will suggest to use Visual Studio Code as editor it's a free and very good editor.
I'm thinking this should be simple but I'm having massive problems getting something to work.
I basically want to create a table with a cell of fixed width which brings in data from a database whilst preserving line breaks and wraps the text should it be wider than the table width. It's for a helpdesk notification so the text could be details or a request or a link to a particular website etc.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 14px">
<table style="width: 700px; border: 20px solid #00AB66;table-layout:fixed">
<tr>
<td style="text-align: center">LOGO</td>
</tr>
<tr>
<td bgcolor="#000000" style="text-align: center; color: #FFFFFF; font-size: 18px">
Review Request</td>
</tr>
<tr>
<td>Dear XXXX<br />
The Service desk have xxxxx</td>
</tr>
<tr>
<td bgcolor="#000000" style="color: #FFFFFF; text-align: center; font-size: 18px">
Request Summary</td>
</tr>
<tr>
<td>
<table style="width: 100%;table-layout:fixed">
<tr>
<td style="text-align: right; width: 158px">ID:</td>
<td>XXXXX</td>
</tr>
<tr>
<td style="text-align: right; width: 158px">Title:</td>
<td>XXXXX</td>
</tr>
<tr>
<td style="text-align: right; width: 158px"><strong>Description</strong></td>
<td>
<pre style="font-size:14px;font-family:'Trebuchet MS';word-break:break-all;white-space: pre; width:75%">
dfdsfdsfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
</pre></td>
</tr>
<tr>
<td style="text-align: right; width: 158px">Requested By:</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right; width: 158px">Review Instructions:</td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
The template should support outlook and web based email like office 365. This is what currently happens.
With the white-space:pre-wrap in as instructed, the preview in expression web is this. Could it be the tool which is the issue?
Removing the <pre> and moving the inline styling to the nested <td> fixed this for me as well as removing the inline styling white-space: pre; fixed this for me.
Testing this section with a 144 character fake word is also bound to cause issues when you test an email since some devices wont break that into hyphens for multiple lines.
You may also want to consider using spacers for the sides to maintain consistency.
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. ;)
Working with provided HTML and I'm looking to figure out why there is a gap in Outlook 07,10,13. Renders fine in other Outlook versions. The gap varies between outlook version, but a gap nonetheless
Screenshot:
HTML Email for review:
<!-- saved from url=(0062)http://nancydoyle.net/artpoint/Bengals_VIP/53_bengals-vip.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!-- .footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
text-align: left;
}
table {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: left;
}
td {
vertical-align: top;
}
body {
background-color: #CCC;
}
a:link {
color: #0018A8;
}
a:visited {
color: #0018A8;
}
a:hover {
color: #5B8F22;
}
a:active {
color: #0018A8;
}
-->
</style>
</head>
<body>
<table width="600" style="border:2px solid #CCC" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th scope="row">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" style="font-size:13px;"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tbody>
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th rowspan="2" valign="bottom" bgcolor="#FFF" scope="row">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{252633d5-413e-49d6-b98f-0d2a7a776bab}_image_top.png" alt="Bengals VIP-Sunday, Oct 11" width="600" height="324">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="90">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{ea46411e-9382-46a4-87c0-b741d0725209}_image_lt.png" width="89" height="293">
</td>
<td width="412" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="3" align="left" bgcolor="#FFFFFF">
<p style="font-size: 17px; color: #000; font-weight: normal; line-height:1.1"><b>Please join us for a Bengals VIP Party held in <br>
the Southeast Overlook at Paul Brown Stadium.</b>
<br> VIP Party includes food, beverages and Club tickets
<br> for you and a guest to attend the game.</p>
</td>
</tr>
<tr>
<td height="10" colspan="3">
<p style="font-weight:bold; color:#0018A8; font-size:13px">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="10" height="6">
</p>
</td>
</tr>
<tr>
<td width="7%"> </td>
<td width="19%">
<span style="font-weight:bold; color:#0018A8; font-size:13px">11:30 am</span>
</td>
<td width="74%">
<p style="font-weight:normal; color:#000; font-size:13px;">
<strong>Food and beverages will be provided in the Southeast Club Suite Overlook.</strong>
</p>
</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">
<span style="font-weight:bold; color:#0018A8; font-size:13px">1:00 pm</span>
</td>
<td>
<p style="font-weight:normal; color:#000; font-size:13px">
<strong>Kickoff.</strong> You will be escorted to your Club seats.</p>
</td>
</tr>
<tr>
<td height="32" colspan="3" align="left">
<span style="font-weight:bold; color:#000; font-size:12px;line-height:2.0">Spots are limited, so please RSVP on or before October 2, 2015.</span>
</td>
</tr>
<tr>
<td height="40" colspan="3" align="center">
<a href="//events.53.com/BengalsVIPEvent" target="_blank">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{4c656e9b-3bd4-4596-94e5-2d2da9d83737}_VC-0315-Register_A.jpg" width="89" height="27" alt="RSVP" style="border-style: none">
</a>
</td>
</tr>
<tr>
<td colspan="3" align="left">
<span style="font-weight:normal; color:#000; font-size:12px;line-height:1.2">If you have any questions please contact Megan Auer at 513-534-6439 or Megan.Auer#53.com. Directions and tickets will be provided upon RSVP.</span>
</td>
</tr>
</table>
</td>
<td width="98" align="right">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e86cc6a3-148f-4cc7-9dee-1b9c22af2a6e}_image_rt.png" width="98" height="293">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e58b7aa4-66b1-481f-b3cc-7c5559618fb0}_image_bottom.png" alt="Fifth Third Bank" width="600" height="132">
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="31" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="20" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" alt="" width="31" height="15">
</td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top" style="font-size:8pt">
<p class="footer">Fifth Third will never use a link in email to ask for User ID(s), password(s) or PIN(s), Social Security number(s), card or account number(s), cardholder verification value(s) (CVV2), or user defined challenge information (e.g., mother's
maiden name, place of birth, etc.) If such a message is received, please immediately forward it to 53investigation#security.53.com.</p>
<p class="footer"><b>To Unsubscribe:</b> This email was sent by Fifth Third Bank, 38 Fountain Square Plaza, Cincinnati, Ohio 45263. If you do not wish to receive future email solicitations or advertisements, please click here to manage your communications. This will allow you to select the communications you wish to receive from us.</p>
<p class="footer">Fifth Third Bank, Member FDIC.
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{a29b1016-66a2-4f46-a8d9-25342ff39a97}_Equal_Housing_Lender_No_Text.gif" width="16" height="13"> Equal Housing Lender.</p>
</td>
<td valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</body>
</html>
The pasted example shows the gaps more extremely than I even see in litmus tests, but not showing in Chrome when I test the HTML locally.
FIX was to add inline CSS to the images and remove the <tbody>
<!-- saved from url=(0062)http://nancydoyle.net/artpoint/Bengals_VIP/53_bengals-vip.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!-- .footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
text-align: left;
}
table {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: left;
}
td {
vertical-align: top;
}
body {
background-color: #CCC;
}
a:link {
color: #0018A8;
}
a:visited {
color: #0018A8;
}
a:hover {
color: #5B8F22;
}
a:active {
color: #0018A8;
}
-->
</style>
</head>
<body>
<table width="600" style="border:2px solid #CCC" align="center" cellpadding="0" cellspacing="0">
<tr>
<th scope="row">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center" style="font-size:13px;"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2" valign="bottom" bgcolor="#FFF" scope="row">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{252633d5-413e-49d6-b98f-0d2a7a776bab}_image_top.png" alt="Bengals VIP-Sunday, Oct 11" width="600" height="324" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="90">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{ea46411e-9382-46a4-87c0-b741d0725209}_image_lt.png" width="89" height="293" style="width:100%;padding:0;margin:0;display:block;">
</td>
<td width="412" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="3" align="left" bgcolor="#FFFFFF">
<p style="font-size: 17px; color: #000; font-weight: normal; line-height:1.1"><b>Please join us for a Bengals VIP Party held in <br>
the Southeast Overlook at Paul Brown Stadium.</b>
<br> VIP Party includes food, beverages and Club tickets
<br> for you and a guest to attend the game.</p>
</td>
</tr>
<tr>
<td width="7%"> </td>
<td width="19%">
<span style="font-weight:bold; color:#0018A8; font-size:13px">11:30 am</span>
</td>
<td width="74%">
<p style="font-weight:normal; color:#000; font-size:13px;">
<strong>Food and beverages will be provided in the Southeast Club Suite Overlook.</strong>
</p>
</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">
<span style="font-weight:bold; color:#0018A8; font-size:13px">1:00 pm</span>
</td>
<td>
<p style="font-weight:normal; color:#000; font-size:13px">
<strong>Kickoff.</strong> You will be escorted to your Club seats.</p>
</td>
</tr>
<tr>
<td height="32" colspan="3" align="left">
<span style="font-weight:bold; color:#000; font-size:12px;line-height:2.0">Spots are limited, so please RSVP on or before October 2, 2015.</span>
</td>
</tr>
<tr>
<td height="40" colspan="3" align="center">
<a href="//events.53.com/BengalsVIPEvent" target="_blank">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{4c656e9b-3bd4-4596-94e5-2d2da9d83737}_VC-0315-Register_A.jpg" width="89" height="27" alt="RSVP" style="padding:0;margin:0;display:block;border-style:none;">
</a>
</td>
</tr>
<tr>
<td colspan="3" align="left">
<span style="font-weight:normal; color:#000; font-size:12px;line-height:1.2">If you have any questions please contact Megan Auer at 513-534-6439 or Megan.Auer#53.com. Directions and tickets will be provided upon RSVP.</span>
</td>
</tr>
</table>
</td>
<td width="98" align="right">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e86cc6a3-148f-4cc7-9dee-1b9c22af2a6e}_image_rt.png" width="98" height="293" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e58b7aa4-66b1-481f-b3cc-7c5559618fb0}_image_bottom.png" alt="Fifth Third Bank" width="600" height="132" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
</table>
</th>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="31" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="20" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" alt="" width="31" height="15">
</td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top" style="font-size:8pt">
<p class="footer">Fifth Third will never use a link in email to ask for User ID(s), password(s) or PIN(s), Social Security number(s), card or account number(s), cardholder verification value(s) (CVV2), or user defined challenge information (e.g., mother's maiden
name, place of birth, etc.) If such a message is received, please immediately forward it to 53investigation#security.53.com.</p>
<p class="footer"><b>To Unsubscribe:</b> This email was sent by Fifth Third Bank, 38 Fountain Square Plaza, Cincinnati, Ohio 45263. If you do not wish to receive future email solicitations or advertisements, please <a href="http://payments.53.com/forms/SubscriptionManagement"
target="_blank">click here</a> to manage your communications. This will allow you to select the communications you wish to receive from us.</p>
<p class="footer">Fifth Third Bank, Member FDIC.
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{a29b1016-66a2-4f46-a8d9-25342ff39a97}_Equal_Housing_Lender_No_Text.gif" width="16" height="13"> Equal Housing Lender.</p>
</td>
<td valign="top"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</th>
</tr>
</table>
</body>
</html>
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/