I'm coding an email for my place of work and because we are business to business, there's a lot of pressure for me to get emails to look nice in Microsoft Outlook. I originally had this set up as a 6 column table (I broke my first row into 6 empty divisions and used colspan), but reduced it to a 3 column table. I was sure that I had all my measurements right, but it seems that Microsoft Outlook is still breaking my table.
In Outlook, the right side of the 3rd, 4th and 5th rows jut out about 100px from the 1st and 2nd rows, and the 5th row, my footer, has the white text squashed into what looks like a 100px wide division and the button floats in the center of rest of the space.
I've quadruple checked my colspans and pixel measurements, as well as replacing my hr tags with .jpg images (but changed them back to hr tags when I found that that didn't make a difference), but it's still giving me Hell. I've been looking at this way to long, I must be missing the problem over and over again.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w31.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>2015 Outdoor Room Design Ideas Promo</title>
<style type="text/css">
.ExternalClass * {
width: 100%;
line-height: 100%;
margin: 0 auto;
}
body {
margin: 0 auto !important;
}
table.container {
width: 100% !important;
border-collapse: collapse !important;
mso-table-lspace:0;
mso-table-rspace:0;
table-layout: fixed ;
vertical-align: top !important;
}
table.layout {
width: 600px !important;
}
table.copy {
width: 550px !important;
}
</style>
</head>
<body style="background-color: #d1d1d1; font-family: sans-serif; font-size: 16px;">
<table class="container" cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="center">
<table class="layout" cellspacing="0" cellpadding="0" border="0" width="600px">
<tr><td width="200px" height="10px"></td><td width="200px" height="10px"></td><td width="200px" height="10px"></td></tr>
<tr><td colspan="3" width="600px" height="50px">
<img src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Header.jpg" width="600px" height="50px" alt="Hearth and Home magazine, the voice of the hearth, barbecue, and patio industries" /></td></tr>
<tr><td colspan="3" width="600px" height="5px"></td></tr>
<tr><td colspan="3" width="600px" height="347px">
<img src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Image.jpg" width="600px" height="347px" alt="David Thorne Landscape Architect" /></td></tr>
<tr><td colspan="3" width="600px" height="5px"></td></tr>
<tr><td colspan="3" width="550px" height="auto" style="background-color: #FFF; padding-left: 25px; padding-right: 25px;">
<h1 align="center" style="font-size: 22px; color: #477696;">We're Looking for a Few Great<br /> Outdoor Rooms</h1>
<hr width="550px" style="border: 1px #d1d1d1 solid;" />
<p style="color: #000000; font-size: 16px;">The August issue of <i>Hearth & Home</i> will feature Outdoor Room Designs. From spectacular, over-the-top showstoppers, to modest, small-scale spaces, we plan to showcase outdoor living areas that will delight and inspire you, and your customers, no matter their budget or vision.</p>
<p style="font-size: 16px; word-spacing: -1px; color: #000000">We hope this Special Section in <i>Hearth & Home</i> will be something you'll want to save for reference and share with your customers as a design resource and idea source while helping them create outdoor kitchens and living spaces in their backyards.</p>
<p style="color: #000000; font-size: 16px;">We invite you to share photos of outdoor projects you have worked on for possible inclusion in this section. Ideally, we would love to see projects that include outdoor kitchens, outdoor fireplaces or fire pits, AND outdoor dining and seating, but we'll gladly consider those that have only some of those elements.</p>
<p style="word-spacing: -1px; color: #000000; font-size: 16px;">Whether you or your business handled the entire project from inception to completion, or worked on just one aspect of it, such as the design, landscaping or supplying the outdoor kitchen appliances, hearth products, patio furniture or other products, we would love to see your photos and hear a little bit about the details.</p>
<p style="color: #000000; font-size: 16px;">Deadline for submissions will be <b>May 22, 2015</b>. All work will be properly credited to you.</p>
<hr width="550px" style="border: 1px #d1d1d1 solid;" />
<p style="font-size: 19px; color: #477696; font-weight: 600" align="center">Thanks! We can't wait to see<br /> your great Outdoor Rooms!</p>
</td></tr>
<tr><td colspan="3" width="600px" height="5px"></td></tr>
<tr><td colspan="2" width="350px" height="80px" style="background-color: #477696; padding-left: 25px; padding-right: 25px;"><p style="color: #FFFFFF; font-size: 14px; font-weight: 200">To submit your project for consideration, click the button to the right and fill out the submission form. When uploading your images, we encourage you to send <i>.zip files</i>. Not sure how to zip files? <a style="color: #FFF" href="http://www.wikihow.com/Zip-Files-Together" alt="How to zip files" target="_blank">Click here</a>.</p></td>
<td width="200px" height="80px" style="background-color: #477696;"><img style="vertical-align: center;" src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Button.jpg" width="167px" height="61px" alt="Click here to submit your outdoor room project" /></td></tr>
<tr><td colspan="3" width="600px" height="50px" style="vertical-align: center;"><p align="center" style="font-size: 14px; color: #000000"><i>Any questions, please contact<br />
</i></p></td></tr>
</table>
</td></tr></table>
</body>
</html>
Nevermind, I resolved my own issue.
It was the three empty cells at the top of the page, so I dropped from 3 columns to 2 columns. I've lost the nice spacing I had above the header, but it is no longer breaking in Outlook.
Related
Sample Code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
</head>
<body style="font-family: Arial; margin: 0; padding: 0;">
<table align="center" width="600" cellpadding="0" cellspacing="0" border="0" style="width: 600px; background-color: #000000; font-family: Arial; font-size: 15px;color: #ff0000;">
<tr>
<td style="padding:10px;font-weight: bold;font-size: 20px; color: #ff0000;">Header Title</td>
</tr>
<tr>
<td style="padding:10px;">Here is the content for this section.</td>
</tr>
<tr>
<td style="padding:10px">
<img src="LearnMore.png" width="170" height="38" border="0" alt="Learn More" />
</td>
</tr>
</table>
</body>
</html>
Output for Office 365 in windows 10
All other clients seem to be fine.
Attempted the fixes from here
Looks like if a font size of 12px or 16px doesn't show the line but the requirement is to use 15px
expected result
The problem is often due to a rounding error in the Outlook engine (MS Word) with odd numbers. In your case, you've already identified an even numbered font-size works. Seeing as that's the core error, and it's not a bug in your code, you have to weigh up whether the unsightliness of the line is worse than changing the size of the font.
If that's not acceptable, you may have luck by setting a line-height of 16px like so: font-size:15px; line-height:16px;.
If all else fails, you can set the font-size differently just for Outlook desktops: font-size:15px; mso-ansi-font-size: 16px;
I'm very very new to html. I'm mostly copy-pasting bits of code as my framework and customizing it to make my emails work. I have this bit of code for my email, but I can't seem to get the opt-in button to center. I've tried reading other similar questions, but my knowledge of coding is that of a beginner, and I can't understand how their coding solutions, in which the code is slightly different, relates to my code to find a solution. I was adding style=text-align: center; in a few spots, but it wasn't working. There were other solutions, but I didn't quite understand how they would work in my code. I've been trying to fix this things for hours now. So very frustrated.
Other than the centering it works in the email.
<td valign="middle" style="text-align: center; padding: 0px 10px 10px
0px;">You've previously contacted us at Business Name. <br>We
are <b>only sending this email once</b> to our current client list to
invite you to join our new free monthly e-newsletter. <br>
style="text-align: center;
<table width="100%" cellspacing="0" cellpadding="0"><tbody><tr>
<td>
<table cellspacing="0" cellpadding="0">
<tbody><tr>
<td style="border-radius: 2px;" bgcolor="#018736">
<a href="https://www.businessname.com/community-
newsletter.html" target="_blank" style="padding: 10px 32px; border: 1px
solid #018736;border-radius: 2px;font-family: Helvetica, Arial, sans-
serif;font-size: 24px; color: #ffffff;text-decoration: none;font-
weight:bold;display: inline-block;">
OPT-IN
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br>Grief is a difficult thing. If you choose not to join our free
monthly newsletter at this time we understand, but will not be sending
any other emails to you going forward. <br><br></td>
Use this code below:
<td valign="middle" style="text-align: center; padding: 0px 10px 10px
0px;">You've previously contacted us at Handsome Stitchery. <br>We
are <b>only sending this email once</b> to our current client list to
invite you to join our new free monthly e-newsletter. <br>
<table width="100%" cellspacing="0" cellpadding="0"><tbody><tr>
<td style="text-align:center;">
<table cellspacing="0" cellpadding="0" style="margin:0 auto;">
<tbody><tr>
<td style="border-radius: 2px;" bgcolor="#018736">
<a href="https://www.handsomestitchery.com/community-
newsletter.html" target="_blank" style="padding: 10px 32px; border: 1px
solid #018736;border-radius: 2px;font-family: Helvetica, Arial, sans-
serif;font-size: 24px; color: #ffffff;text-decoration: none;font-
weight:bold;display: inline-block;">
OPT-IN
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br>Grief is a difficult thing. If you choose not to join our free
monthly newsletter at this time we understand, but will not be sending
any other emails to you going forward. <br><br></td>
Going off what you have, I think throwing style="text-align: center; on the <td> that your link button is in should do the trick. Also you might want to get rid of the other style="text-align: center; that is floating above the first tag, it is code that is showing up as text on your page.
I have created a line of square , it works in modern browser such as Gmail in google, but for outlook , it show like this:
The 4 block combine together and also the div height is not honoured, any idea or workaround?
<tr>
<td colspan="2" style="text-align: center;padding: 10px 0px; font-family: Helvetica, Arial, Tahoma, 'SimHei','微軟雅黑', STXihei, '華文細黑', sans-serif;">
<h3 style="text-align: center;margin-top: 0px; color: #606060;">Have a Question?</h3>
<table align="center" cellpadding="0" cellspacing="0" width="700px" border="0" style="margin:auto;">
<tr>
<td style="width:25%;text-align: center;"><img width="150" style="width:150px" src="{img_dir}en/q1.jpg" /></td>
<td style="width:25%;text-align: center;"><img width="150" style="width:150px" src="{img_dir}en/q2.jpg" /></td>
<td style="width:25%;text-align: center;"><img width="150" style="width:150px" src="{img_dir}en/q3.jpg" /></td>
<td style="width:25%;text-align: center; font-family: Helvetica, Arial, Tahoma, 'SimHei','微軟雅黑', STXihei, '華文細黑', sans-serif;">
<div style="border: 3px solid #6C6E70; height: 144px; width:144px;">
<p style="color: #58595b; font-weight: bold; margin-top: 10px; margin-bottom: 0px; text-decoration: none; font-size: 16px;">Useful Links</p>
<p style="margin-top: 10px; margin-bottom: 0px; font-size: 15px;">My Account</p>
<p style="margin-top: 5px; margin-bottom: 0px; font-size: 15px;">Return Policy</p>
<p style="margin-top: 5px; margin-bottom: 0px; font-size: 15px;">FAQ</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
Thanks for helping.
In emails, particularly Outlook 7/10/13, it's better to define the td with a set width, rather than percentages. This then allows you to define the spaces properly (which I imagine Outlook is ignoring, and is mashing all of the td's together).
This is a great resource for how well supported some CSS is in various email clients. https://www.campaignmonitor.com/css/ Margin is one in particular you don't want to use, as it's not supported on Outlook.com.
Also, if this is for email, I'd recommend not using p tags (as they can render differently in different email clients), you could also center the text by adding a height to the td, rather than using nbsp's - see this previous answer for how to do that: How to writte text in the middle of an image without positioning and z-index?
Outlook doesn't support the margin property, or any of its variants: https://litmus.com/help/email-clients/outlookcom-margins/
You can use padding, but not on block elements. consider changing your p tags to a table and use padding to get the look you want.
I have clearly defined the width of my email to be 804px wide max. But within Outlook it will full screen width the whole thing, can't tell if it's a specific element somewhere not taking into account the max width. Trying to see if anyone can see an obvious reason for this.
It looks like the left content text is the issue but I have defined width for that too!
Looks fine within a browser of course! Dam email programs (Outlook).
Screenshot of what it looks like in Outlook.
HTML Email Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WYLES HARDY & Co</title>
<meta name="viewport" content="width = 483" />
<style type="text/css">
a {text-decoration:none; color: #004466; }
a img, img, .images, .images a, .images a img, .images img { border: 0; padding: 0; margin: 0; }
body {width: 100% !important; background-color: #fff; font-family: 'Arial'; }
p { margin: 10px 5px 0px 5px; line-height: 19px; font-size: 14px; font-family: 'Arial'; color: #004466; }
p.larger { margin: 5px 5px 8px 5px; line-height: 19px; font-size: 15px; font-family: 'Arial'; color: #004466; }
p a { color: #00A952; text-decoration: none; font-weight: bold; }
h1 { margin: 5px; color: #00405C; font-weight: bold; font-size: 18px; }
h2 { margin: 10px 5px 10px 5px; color: #00405C; font-weight: bold; font-size: 14px; }
.blue-table { background: #EAF0F4; margin: 0; padding: 0 10px 10px 10px; border: 0; }
.clear-table { background: #fff; margin: 0; padding: 0; border: 0; }
.grid-table { border: 1px solid #004466; margin: 5px; line-height: 20px; font-size: 11px; font-family: 'Arial'; color: #004466; }
.table-div { width: 96%; margin: 2%; height: 1px; border-top: 1px solid #004466; }
.left { text-align: left;}
.right { text-align: right; }
.main { border: 1px solid #444; margin-top: 10px; margin-bottom: 10px; padding: 5px; }
.content { background: #fff; }
</style>
</head>
<body style="margin:0;padding:0">
<a name="top"></a>
<table class="main" width="804px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="804px" class="images">
<tr><td><a target="_blank" href="http://www.wyleshardy.com/businesssales.asp?pge=3"><img style="border: 0; padding: 0" src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/header.jpg" /></a></td></tr>
</table>
<br />
<table width="804px" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td class="clear-table" width="20px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
<td class="clear-table" width="395px" valign="top" >
<table class="clear-table" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="http://www.wyleshardy.com/businesssales.asp?pge=3">
<!-- <ul width="405px">
<li>Company established over 30 years ago.</li>
<li>Trades from NW London from leased industrial premises.</li>
<li>Offers various printing products and services including office stationery, litho printing (44%), digital printing (22%), promotional products and mail fulfilment and dispatch services (34%).</li>
<li>The company has a diverse number of clients, together with a significant business relationship with a high profile client group, forged over many years.</li>
<li>It holds ISO 9001 Certification for quality management and also FSC and PEFC accreditations.</li>
<li>It has a dedicated and loyal workforce, with employees currently totaling 23, including 4 directors.</li>
<li>The business and assets include goodwill (name, web domains, client data base, telephone numbers etc.) Contracts, various items of plant & machinery (some subject to finance agreements), and minimal stock.</li>
</ul> -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>•</td>
<td> Company established over 30 years ago.</td>
</tr>
<tr>
<td>•</td>
<td> Trades from NW London from leased industrial premises.</td>
</tr>
<tr>
<td>•</td>
<td> Offers various printing products and services including office stationery, litho printing (44%), digital printing (22%), promotional products and mail fulfilment and dispatch services (34%).</td>
</tr>
</table>
</a>
<img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/frplogo.jpg" width="375px" alt="" title="" />
</td>
</tr>
</table>
</td>
<td class="clear-table" width="10px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
<td class="content" width="346px" valign="top">
<table class="blue-table" cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://www.wyleshardy.com/businesssales.asp?pge=3">
<p><strong>TURNOVER:</strong> Turnover totalled £2.8m per accounts to June 2013, and £ 1.9m for the 9 months to March 2014.</p>
<p><strong>OPPORTUNITIES:</strong> The Company offers an excellent opportunity to consolidate existing trade and exploit the contracts already in place.</p>
<br>
<h1>ENQUIRIES:</h1>
<p class="larger">All enquiries should<br>be directed to:<br>
<strong>Julie Gearing<br>Nigel Strike<br>FRP Advisory LLP</strong></p>
<p><strong>Tel:</strong> 01277 503 304<br><strong>Fax:</strong> 01277 503 300<br><strong>Email:</strong><br> Julie.Gearing#frpadvisory.com<br>Nigel.Strike#frpadvisory.com</p>
<br>
<p><strong>FRP Advisory LLP</strong><br>Jupiter House<br>Warley Hill Business Park<br>The Drive<br>Brentwood<br>Essex<br>CM13 3BE</p>
<br>
<p>A sales pack containing detailed information regarding the business for sale will be provided to interested parties following the signing and return of a Non-Disclosure Agreement.</p></a>
</td>
</tr>
</table>
<td class="clear-table" width="13px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
</td>
</tr>
</tr>
</table>
</table>
</body>
</html>
You have missed some closing tag and misplaced the closing tag in your HTML part.
I have modified your HTML part and it should be like below.
<table class="main" width="804px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="804px" class="images">
<tr><td><a target="_blank" href="http://www.wyleshardy.com/businesssales.asp?pge=3"><img style="border: 0; padding: 0" src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/header.jpg" /></a></td></tr>
</table>
<br />
<table width="804px" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td class="clear-table" width="20px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
<td class="clear-table" width="395px" valign="top" >
<table class="clear-table" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="http://www.wyleshardy.com/businesssales.asp?pge=3">
<!-- <ul width="405px">
<li>Company established over 30 years ago.</li>
<li>Trades from NW London from leased industrial premises.</li>
<li>Offers various printing products and services including office stationery, litho printing (44%), digital printing (22%), promotional products and mail fulfilment and dispatch services (34%).</li>
<li>The company has a diverse number of clients, together with a significant business relationship with a high profile client group, forged over many years.</li>
<li>It holds ISO 9001 Certification for quality management and also FSC and PEFC accreditations.</li>
<li>It has a dedicated and loyal workforce, with employees currently totaling 23, including 4 directors.</li>
<li>The business and assets include goodwill (name, web domains, client data base, telephone numbers etc.) Contracts, various items of plant & machinery (some subject to finance agreements), and minimal stock.</li>
</ul> -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>•</td>
<td> Company established over 30 years ago.</td>
</tr>
<tr>
<td>•</td>
<td> Trades from NW London from leased industrial premises.</td>
</tr>
<tr>
<td>•</td>
<td> Offers various printing products and services including office stationery, litho printing (44%), digital printing (22%), promotional products and mail fulfilment and dispatch services (34%).</td>
</tr>
</table>
</a>
<img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/frplogo.jpg" width="375px" alt="" title="" />
</td>
</tr>
</table>
</td>
<td class="clear-table" width="10px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
<td class="content" width="346px" valign="top">
<table class="blue-table" cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://www.wyleshardy.com/businesssales.asp?pge=3">
<p><strong>TURNOVER:</strong> Turnover totalled £2.8m per accounts to June 2013, and £ 1.9m for the 9 months to March 2014.</p>
<p><strong>OPPORTUNITIES:</strong> The Company offers an excellent opportunity to consolidate existing trade and exploit the contracts already in place.</p>
<br>
<h1>ENQUIRIES:</h1>
<p class="larger">All enquiries should<br>be directed to:<br>
<strong>Julie Gearing<br>Nigel Strike<br>FRP Advisory LLP</strong></p>
<p><strong>Tel:</strong> 01277 503 304<br><strong>Fax:</strong> 01277 503 300<br><strong>Email:</strong><br> Julie.Gearing#frpadvisory.com<br>Nigel.Strike#frpadvisory.com</p>
<br>
<p><strong>FRP Advisory LLP</strong><br>Jupiter House<br>Warley Hill Business Park<br>The Drive<br>Brentwood<br>Essex<br>CM13 3BE</p>
<br>
<p>A sales pack containing detailed information regarding the business for sale will be provided to interested parties following the signing and return of a Non-Disclosure Agreement.</p></a>
</td>
</tr>
</table>
</td>
<td class="clear-table" width="13px"><img src="http://www.mangemails.co.uk/wyleshardy/28th-May-2014/10px-spacer.jpg" /></td>
</tr>
</table>
</td>
</tr>
</table>
I've now fixed the issue, the changes required were to change the following:
Before
width="395px"
After
width="395"
I'm having an issue with my HTML email in Outlook 2013 only, it looks great in previous versions including 2007 and 2010.
I've added style="display:block;
My table and td have a black background color.
I tried specifying width and height on the td and the img
and a line-height style as suggested on a previous post here for the containing td.
Here's the code:
<table width="200" cellpadding="0" cellspacing="0" align="right" bgcolor="#000000"><tr><td width="156" height="158" style="background-color:#000000; line-height:13px;"><img src="http://identifix.skmgroupwork.com/email/iden074/images/JerryGTruglia.jpg" width="156" height="158" align="right" alt="Jerry G Truglia" style="padding: 0px 20px 0px 0px; width: 156px; height: 158px;display:block;"></td></tr></table>
Containing code:
<table width="510" align="center" cellpadding="0" cellspacing="0" style="" bgcolor="#000000">
<tbody>
<tr>
<td colspan="2" align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 12px; line-height: 20px; padding: 0px 30px 0px 40px; ">
<table width="180" cellpadding="0" cellspacing="0" align="right" bgcolor="#000000"><tr><td width="156" height="168" style="background-color:#000000; line-height:13px;"><img src="http://identifix.skmgroupwork.com/email/iden074/images/JerryGTruglia.jpg" width="156" height="158" align="right" alt="Jerry G Truglia" style="padding: 0px 0px 0px 0px; width: 156px; height: 158px;display:block;"></td></tr></table><span style="color:#feae38;font-size:16px;"><b>Don’t Miss Your Chance to Catch<br>Identifix’s Live Training, <span class="appleLinksWhite">3/12.</span></b></span><br><br>Seats are filling up quickly, so be sure to RSVP today for “Find and Fix Faster – Your Path to More Profits,” Identifix’s live training event. Held <span class="appleLinksWhite" style="color: #ffffff;">on Tuesday, March 12th,</span> the session will be conducted by nationally recognized automotive industry expert, Jerry “G” Truglia, president of Automotive Technician Training Services (ATTS).<br><br>
<span style="color:#feae38;font-size:14px;"><b>Learn how your shop can:</b></span><br><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Diagnose and repair vehicles faster</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Reduce non-billable work time</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Boost customer trust and satisfaction</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Increase tech confidence and productivity</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Stay profitable</b></span><br><br>
Join us <span class="appleLinksWhite" style="color: #ffffff;">from 7:30 – 9:00 p.m.</span> at <a style="color:#feae38;" target="_blank" href="https://plus.google.com/104076111016352099629/about?gl=us&hl=en">ATTS</a>, <span class="appleLinksWhite" style="color: #ffffff;">10 Lupi Plaza, Mahopac, NY 10541</span>. Pizza and soft drink will be provided, followed by a hands-on demonstration of Identifix’s award-winning online tool, Direct-Hit<sup>®</sup>.<br>
<br><strong><span style="color:#feae38;font-size:16px;"><b>Reserve your seat before it’s too late!<br>Call <span class="appleLinksWhite" style="color: #ffffff;">1.855.270.5855</span> now to RSVP.<span style="color:#feae38;"><b></strong><br><br></td>
</tr>
<tr>
<td align="left" valign="top" colspan="2" style="padding: 14px 0px; "><img src="http://identifix.skmgroupwork.com/email/iden045/images/iden045-divider.gif" width="550" height="1" alt="" border="0" style="background-color: #ffffff; width: 570px; height: 1px; display: block; "></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 11px; line-height: 16px; padding: 14px 0px 24px 40px;">
©2013 Identifix | <span class="appleLinksWhite" style="color: #ffffff;">2714 Patton Road | Roseville, MN 55113</span> | <span class="appleLinksWhite" style="color: #ffffff;">1.800.745.9649</span></td>
</tr>
</tbody>
</table>
Any suggestions appreciated. Thanks,
Douglas, I tried to add an image but it says I need at least 10 reputation to post it, and I only have 1 now. The link to it is this http://identifix.skmgroupwork.com/email/iden074/images/snip.JPG
In litmus tests only on Outlook 2013 a strange white, not even aligned gap, to the right of the image that is not supposed to be there appears.
Following worked for me :
<td style="line-height:0px; mso-line-height-rule:exactly;">
Is this problem specific to Microsoft e-mail clients?
How does the e-mail look on web clients?
I have had a wide range of problems with 2013 and sometimes 2007. These are usually remedied by using the clandestine mso-specific css rules.
For example; using mso-line-height-rule:exactly; in inline css will resolve the particularly aggravating problem of Outlook 2013 pushing all tds < 15px out.
It is hard to isolate the problem within your code without seeing the rest of the code.
You should try not to use colspans to make it work in all clients like lotus notes 6.5 and 7