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"
Related
I have made an email template that gets sent once the user completes the registration. The template contains some icons from font-awesome, images, and some imported Google fonts.
These items are getting rendered perfectly when I am viewing the HTML file on the browser but when this is sent as an email nothing is getting rendered other than the texts only.
I tried moving the CSS styling inline but that doesn't work either. I am unable to understand what the problem is. Below is the code.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--<link rel="stylesheet" href="{% static 'regd_success_email.css' %}">-->
<style>
#import url('https://fonts.googleapis.com/css2?family=Carattere&display=swap');
body
{
margin: 0;
padding: 0;
}
table
{
border-spacing: 0;
}
td
{
padding: 0;
}
.wrapper
{
width: 100%;
table-layout: fixed;
background-color: #cccccc;
padding-bottom: 60px;
}
.welcome
{
font-family: 'Carattere', cursive;
}
.main
{
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;
font-family: sans-serif;
color: #4a4a4a;
}
.email-body
{
font-family: 'Carattere', cursive;
font-weight: bold;
font-size: 25px;
padding: 5px 0 15px;
}
.button
{
background-color: #289dcf;
color: #ffffff;
text-decoration: none;
padding: 12px 12px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
}
.subs-and-pays
{
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 5px 0 5px;
}
#media screen and (max-width:600px) {
}
#media screen and (max-width: 400px) {
}
</style>
</head>
<body>
<center class="wrapper">
<table class="main" width="100%">
<tr>
<td height="8" style="background-color: #289dcf;"></td>
</tr>
<tr>
<td style="background-color: #001035;">
<a href="http://127.0.0.1:8000/">
<img src="{% static '../static/images/logo1.png' %}" alt="" width="600px" style="max-width: 100%;">
</a>
</td>
</tr>
<tr>
<td style="padding: 5px 0 50px;">
<table width="100%">
<tr>
<td style="text-align: center; padding: 15px">
<p style="font-size: 50px;" class="welcome"><strong style="color: #289dcf;">Welcome to Solve Litigation</strong></p>
<p class="email-body">Hello, {{name}}, you have been succesfuly registered with Solve Litigation.</p>
Go to Website <i class="fas fa-arrow-circle-right"></i>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="2" style="background-color: #a6d8ee;"></td>
</tr>
<tr>
<td style="padding: 5px 0 20px;">
<table width="100%">
<tr>
<td style="text-align: center; padding: 15px">
<p style="font-size: 20px;"><strong style="color: #289dcf;">Subscription and Payments</strong></p>
<p class="subs-and-pays"> For Subscription details and Payment methods click on the <strong> User Profile </strong> button after you login and then click on <strong>Payments</strong>. </p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="2" style="background-color: #a6d8ee;"></td>
</tr>
<tr>
<td style="padding: 5px 0 20px;">
<table width="100%">
<tr>
<td style="text-align: center; padding: 15px">
<p style="font-size: 20px;"><strong style="color: #289dcf;">Contact Us <i class="fas fa-envelope"></i> </strong></p>
<p class="subs-and-pays"> To contact us regarding more details, updation of the information provided during registration or any other queries, click on the <strong> User Profile </strong> button after you login and then click on <strong>Contact</strong>. </p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="8" style="background-color: #289dcf;"></td>
</tr>
</table>
</center>
</body>
<script src="https://kit.fontawesome.com/2b3aa8f23b.js" crossorigin="anonymous"></script>
</html>
This is a Django project so the image URLs I wrote are the convention of Django template language.
You need to host your images externally (and have them be publicly accessible) for them to be visible in an email or send them as an attachment.
Add your images to an image hosting service and replace your paths with absolute links to them.
You can also send your images as attachments but this is a less preferred option as it can increase the size of your email, which in turn can cause it to be blocked by email filters.
This answer has details on adding images as attachments in Django.
You can't use webfonts reliably in html emails. Some clients might respect and render them, but the majority don't.
You can use font awesome to png website to convert the icons into images, and Add it to an image hosting service to show them in email template
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.
So I need to change specific td elements font size through media queries.
EXCLAIMER *** Yes I know inline styles are horrible but I have to use them for this piece of work
I have two class .tbold and .tnormal which are for elements and I want to change their font size when the page because a mobile size e.g. 320px. I know how to do this if I was just using a normal class system or something like bootstrap but when using tables I am not sure how to do this
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audi MK Advert</title>
<style>
#font-face {
font-family: 'audibold';
font-style: normal;
font-weight: bold;
src: url('helper-files/fonts/AudiBold.otf') format('opentype');
}
#font-face {
font-family: 'audinormal';
font-style: normal;
font-weight:normal;
src: url('helper-files/fonts/AudiNormal.otf') format('opentype')
}
#media all and (max-width: 500px) and (min-width: 320px) {
table {
#tnormal {
font-size: 10px;
}
}
}
</style>
</head>
<body>
<!-- Audi Logo Top Right -->
<table style="float:right";
display:block;
margin-bottom: 10px>
<tr>
<td>
<img src="helper-files/imgs/logo.png">
</td>
</tr>
</table>
<br>
<br>
<!-- Grey Navbar -->
<table style="margin:auto">
<tr style="display:block; background-color:#858585">
<td><img src="helper-files/imgs/navbutton2.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton3.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton4.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton5.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton6.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton1.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton7.jpg" style="margin-bottom: 5px"></td>
</tr>
</table>
<!-- Audi Large Photo -->
<table style="width:100%">
<tr>
<td style=align:"center"><img src="helper-files/imgs/header.jpg" style="width:100%"></td>
</tr>
</table>
<!-- Body of text -->
<table style="background-color: lightgray; padding-bottom: 20px; color:grey">
<tr>
<td style="font-weight:bold; padding-bottom:15px; padding-top: 35px; font-size:35px; padding-left: 15px; padding-right: 15px;font-family: audibold">Whats in the name?</td>
</tr>
<tr>
<td class="tbold"; style="padding-bottom:15px; font-weight:bold; padding-right: 15px; padding-left: 15px; font-family: audibold">To reflect Ridgeway’s acquisition by Marshall Motor Holdings plc in May of this year, effective from the 1st of November, we have rebranded to Marshall.</td>
</tr>
<br>
<tr>
<td style="padding-bottom:15px; padding-left: 20px; padding-right: 15px; font-family: audinormal">Don’t worry – it’s not all change. Our excellent staff, standards and values will remain the same, ensuring that you receive consistently high levels of service.</td>
</tr>
<br>
<tr class="tnormal">
<td style="padding-bottom:15px; padding-left: 20px; padding-right: 15px; font-family: audinormal">The largest expansion acquisition that Marshall Motor Group has made to date, we are now part of a group that operates 103 franchise dealership businesses representing 24 different manufacturer brands across 25 counties in England, with
a turnover in excess of £2.1bn per annum and 3,500 colleagues; but you, the customer, are still our Number One!</td>
</tr>
<br>
<tr class="tnormal">
<td style="padding-bottom:15px; padding-left: 20px; padding-right: 15px; font-family: audinormal">With Marshall Motor Group (who are the 7th largest UK motor group in the UK), we are in a better position than ever to exceed expectations and adopt 106 years of dedicated Marshall expertise, with customer care and impeccable industry
knowledge at the heart of everything we do.</td>
</tr>
<br>
<tr class="tnormal">
<td style="padding-bottom:15px; padding-left: 20px; padding-right: 15px; font-family: audinormal">Just like always, we’re with you for the road ahead. Welcome to the next destination of our exciting journey. As part of the rebrand ridgeway.co.uk will redirect to our new online home of marshall.co.uk for all things Audi sales, service
and parts!</td>
</tr>
<tr class="tnormal">
<td style="font-weight:bold; font-size:35px; padding-left: 15px; padding-right: 15px; font-family: audibold">Marshall</td>
</tr>
<tr class="tnormal">
<td style="font-weight:bold; font-size:35px; padding-left: 20px; padding-right: 15px; font-family: audibold">The new name for Audi in Oxford and Newbury.</td>
</tr>
</table>
<!-- Red Labels -->
<table style="padding:20px; margin: auto">
<tr style= "display: block">
<td><img src="helper-files/imgs/visit.jpg"></td>
<td><img src="helper-files/imgs/about.jpg"></td>
<td><img src="helper-files/imgs/contact.jpg"></td>
<td><img src="helper-files/imgs/livechat.jpg"></td>
</tr>
</table>
<hr>
</body>
</html>
table {
#tnormal {
font-size: 10px;
}
}
You are not using SASS here, right?? This ain't work. Use:
table .tnormal {
font-size: 10px !important;
}
And change "#id" to ".class"
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.
I am designing an email in Convio and for some reason the header and footer images have extra padding on the left and top/bottom (respectively) in Outlook 2010 and 2013. Here is a screen cap of how it is rendering. I've googled this and used tricks from Email on Acid and Litmus... etc. and for the life of me I can't figure out where the padding is coming from. Thought it would be helpful to maybe get another set of eyes on it. Hopefully it's something stupid that I am just missing. Thanks for the help.
Here is the code. Since it is built in Convio, there is no head or body tags because Convio does not support a full HTML email, just content within it's template.
Here is my CSS. It is mainly to help render the email correctly in Yahoo.
<style type="text/css">
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
.ExternalClass img {line-height: 100%;}
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
body {margin:0; padding:0;}
table td {border-collapse:collapse;}
p {margin:0; padding:0; margin-bottom:0;}
h1, h2, h3, h4, h5, h6 {color: black; line-height: 100%;}
a, a:link {color:#2ba6cb;text-decoration: underline;}
span.yshortcuts { color:#000; background-color:none; border:none;}
span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus {color:#000; background-color:none; border:none;}
a:visited { color: #005581; text-decoration: none}
a:focus { color: #005581; text-decoration: underline}
a:hover { color: #82a535; text-decoration: underline}
table {margin:0; padding:0;}
img {display:block; margin:0; padding:0;}
#cv-poweredBy {visibility: hidden;}
</style>
Here is my HTML.
<div align="center">
<!-- BLUE BACKGROUND -->
<table style="background-color: #005581; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; table-layout: fixed; margin: 0 auto; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#005581">
<tr>
<td valign="top">
<!-- TOP LINKS -->
<center>
<table style="background: #005581; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px;" border="0" cellspacing="0" cellpadding="0" width="600" align="center" bgcolor="#005581">
<tbody>
<tr>
<td style="font-size: 14px; padding-top: 30px; padding-bottom: 30px;" align="center">
<a style="color: #ffffff; text-decoration: none;" href="http://[[S29:DOMAIN]]/site/TellAFriend">Forward to a friend</a>
<a style="color: #ffffff; text-decoration: none;" href="http://[[S29:DOMAIN]]/site/MessageViewer">View Web Version</a>
</td>
</tr>
</tbody>
</table>
</center>
<!-- END TOP LINKS -->
<center>
<!-- WHITE BACKGROUND -->
<table style="background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" width="600" align="center" bgcolor="#ffffff;">
<tr>
<td width="600" style="border-collapse:collapse;">
<a href="http://give.jhpiego.org/site/Donation2?df_id=1720&1720.donation=form1">
<img src="http://www.jhpiego.org/email-templates/2014-Holiday-Campaign/GivingTuesday/imgs/GivingTuesday-Header-rev.jpg" alt="Join the Fight Against Ebola This #GivingTuesday!" width="600" height="250" vspace="0" hspace="0" style="display:inline; padding:0; margin:0;" border="0"/>
</a>
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #101010; text-align:left;" width="600">
<p style="padding: 20px">Dear Friends,<br><br>
As we celebrate #GivingTuesday today, we are honoring four courageous nurses who are working tirelessly to keep women and families safe from a highly infectious disease devastating West Africa. <strong>Marion Subah, Comfort Gebeh, Varwo Sirtor-Gbassie and Nyapu Taylor </strong> are members of the Jhpiego family.<br><br>
As the Ebola virus swept through their native Liberia, they went to work day after day, redoubling their efforts to ensure that health care providers on the frontlines had the specialized skills in infection prevention and control to work <img style="float: right; padding: 10px;" src="http://www.jhpiego.org/email-templates/2014-Holiday-Campaign/GivingTuesday/imgs/GivingTuesday-CTA.jpg" alt="Help Stop The Ebola Epidemic! Donate Now" title="Help Stop The Ebola Epidemic! Donate Now" hspace="10" vspace="10" width="225" height="300" align="right" />confidently and safely in health centers and hospitals. They also dedicated themselves to helping health facilities restore critically needed maternal and child health services so pregnant women and mothers do not die giving birth.<br><br>
These four women are respected colleagues, who, along with our dedicated staff in Ebola-impacted Guinea, are doing their utmost to prevent the needless deaths of women and their families in these countries. They embody <strong>Jhpiego's commitment to West Africa</strong>, where we have had a strong presence in both Liberia (14 years) and Guinea (21 years). Working successfully with the Ministries of Health and partners to strengthen health care systems and save lives, Jhpiego is on the ground, updating the skills of nurses and midwives so they can continue to provide quality care to vulnerable women and babies during this emergency.<br><br>
On this #GivingTuesday, as we focus on what makes <strong>Jhpiego</strong> unique, I invite you to be part of this global effort to save lives and help Marion, Comfort, Nyapu and Varwo in their prevention work. <a style="font-weight: bold; color: #99c525; text-decoration: none;" href="http://give.jhpiego.org/site/Donation2?df_id=1720&1720.donation=form1">With your support, we can do even more beyond #GivingTuesday! Please help us contain this epidemic by investing in Jhpiego's work.</a> Thank you in advance for your serious consideration of this special request.</p>
<center>
<table style="background: #ffffff;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" width="400">
<tr>
<td width="130">
<img src="http://www.jhpiego.org/email-templates/2014-Fundraising-Emails/DayofGirl-LesliePhoto.jpg" alt="Photo of Leslie Mancuso" width="120" height="120" style="display:inline; padding-right: 20px;" />
</td>
<td width="270" font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #101010; text-align:left;"">
<img src="http://www.jhpiego.org/email-templates/2014-Fundraising-Emails/Leslie-Signature.gif" alt="Leslie Mancuso's Signature" width="200" style="display:inline; padding:0; margin:0;" border="0" /><br />
Leslie Mancuso, PhD, RH, FAAN<br />
President and Chief Executive Officer
</td>
</tr>
</table>
</center>
<br>
</td>
</tr>
<tr>
<td width="600" style="border-collapse:collapse;">
<a href="http://give.jhpiego.org/site/Donation2?df_id=1720&1720.donation=form1">
<img src="http://www.jhpiego.org/email-templates/2014-Holiday-Campaign/GivingTuesday/imgs/GivingTuesday-Footer.jpg" alt="Marion Subah, Comfort Gebeh, Nyapu Taylor and Varwo Sirtor-Gbassie" width="600" height="200" vspace="0" hspace="0" style="display:inline; padding:0; margin:0;" />
</a>
</td>
</tr>
</table>
<!-- END WHITE BACKGROUND -->
</center>
<!-- FOOTER -->
<center>
<table style="background: #005581; font-family: Arial, Helvetica, sans-serif;" border="0" cellspacing="0" cellpadding="0" width="600" align="center" bgcolor="#005581">
<tbody>
<tr>
<td style="background-color: #005581; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-align:left; padding-right:50px; padding-top:25px; padding-bottom:100px; width:376px" width="376">
You are receiving this email because you have made a donation to Jhpiego in the past.<br><br>
We hate to see you go, but you can
<a style="color: #fff; text-decoration: underline;" href="http://[[S29:DOMAIN]]/site/CO">unsubscribe</a> if you no longer want to receive these messages.
<br /><br />
<strong>Don't forget to connect with us on:</strong><br /><br />
<img style="display: inline;" title="Facebook" src="http://give.jhpiego.org/images/content/pagebuilder/alumni-facebook.png" border="0" alt="Facebook" />
<img style="display: inline;" title="Twitter" src="http://give.jhpiego.org/images/content/pagebuilder/alumni-twitter.png" border="0" alt="Twitter" />
</td>
<td style="background-color: #005581; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align:right; padding-top:25px; width:174px" width="174" valign="top">
<img src="http://give.jhpiego.org/images/content/pagebuilder/Jhpiego_logo_wh_PMS.png" border="0" alt="Visit Jhpiego's Website" width="174" height="73"/><br><br>
1615 Thames Street<br />
Baltimore, MD 21231<br />
410-537-1800
</td>
</tr>
</tbody>
</table>
<center>
<!-- END FOOTER -->
</td>
</tr>
</table>
<!-- END BLUE BACKGROUND -->
</div>