This is a piece of code from my html email - in this section, the colour refuses to apply in outlook despite using bgcolor and the background style property
I have attached a screenshot of what it should look like
The td immediately above the title does not colour.
Any help would be great
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="fe513e" class="wrapper" style="margin-left:auto; background-color:#fe513e !important; font-size:1px; line-height:1px; margin-right:auto;" mc:repeatable mc:variant="Newsletter title">
<tr>
<td height="20" style="line-height:1px; font-size:1px; background-color:#fe513e !important;" bgcolor="#fe513e" class="fix_height"></td>
</tr>
<tr>
<td width="30" bgcolor="#fe513e" style="background-color:#fe513e !important;" class="hide"></td>
<td class="pad_side">
<table width="100%" border="0" cellspacing="0" style="background-color: #fe513e !important;" cellpadding="0" align="center" class="wrapper" bgcolor="#fe513e">
<tr>
<td class="black" align="center" bgcolor="#fe513e" valign="top" style="font-family:Arial, sans-serif;font-size:20px;font-weight:600;letter-spacing:0;line-height:25px;color:#ffffff; background-color:#fe513e !important;" mc:edit="newsletter_title_1">The Latest News for October 2018</td>
</tr>
<tr>
<td height="20" bgcolor="#fe513e" style="line-height:1px;font-size:1px; background-color: #fe513e;" class="fix_height"> </td>
</tr>
</table>
</td>
<td width="30" bgcolor="#fe513e" style="background-color: #fe513e !important" class="hide"> </td>
</tr>
</table>
You've missed out the # when you set the table bgcolor, so Outlook for Desktop will not pick it up.
So this:
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="fe513e" class="wrapper" style="margin-left:auto; background-color:#fe513e !important; font-size:1px; line-height:1px; margin-right:auto;" mc:repeatable mc:variant="Newsletter title">
Should be:
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#fe513e" class="wrapper" style="margin-left:auto; background-color:#fe513e !important; font-size:1px; line-height:1px; margin-right:auto;" mc:repeatable mc:variant="Newsletter title">
adding colspan="3" will make it perfect
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#fe513e" class="wrapper" style="margin-left:auto; background-color:#fe513e !important; font-size:1px; line-height:1px; margin-right:auto;" mc:repeatable mc:variant="Newsletter title">
<tr>
<td height="20" style="line-height:1px; font-size:1px; background-color:#fe513e !important;" colspan="3" bgcolor="#fe513e" class="fix_height"></td>
</tr>
<tr>
<td width="30" bgcolor="#fe513e" style="background-color:#fe513e !important;" class="hide"></td>
<td class="pad_side">
<table width="100%" border="0" cellspacing="0" style="background-color: #fe513e !important;" cellpadding="0" align="center" class="wrapper" bgcolor="#fe513e">
<tr>
<td class="black" align="center" bgcolor="#fe513e" valign="top" style="font-family:Arial, sans-serif;font-size:20px;font-weight:600;letter-spacing:0;line-height:25px;color:#ffffff; background-color:#fe513e !important;" mc:edit="newsletter_title_1">The Latest News for October 2018</td>
</tr>
<tr>
<td height="20" bgcolor="#fe513e" style="line-height:1px;font-size:1px; background-color: #fe513e;" class="fix_height"> </td>
</tr>
</table>
</td>
<td width="30" bgcolor="#fe513e" style="background-color: #fe513e !important" class="hide"> </td>
</tr>
</table>
Related
Running into my regular struggles with email template designs, in particular that Gmail removes classes and thus I can't center a td via any means. Is there any way at all to change the "align" from left to center on the td with the image? Maybe I can comment in additional TDs on sides to center it, if Gmail permits it. I'm at a loss.
Template is mildly frankensteined from a template block editor.
<table class="row" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="280" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td class="img-responsive" width="280" align="left">
<img alt="280x200x1" src="#" style="width:100%; height:auto;" width="280" height="200">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<table data-primary-order="1" data-primary-type="bgcolor" data-bgcolor="Columns" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center">
<tbody><tr>
<td align="center">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width:90%; width:90%;" width="90%" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
<tr>
<td>
<table style="width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td data-color="Titles" data-size="Titles" data-min="14" data-max="46" style="color: #333333; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; line-height: 22.1px;" align="left">text text<br>text text</td></tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I believe the following code should resolve your issue. When viewing the code you will see there is an element with an id of "I CHANGED FROM LEFT TO CENTER". This seemed to cause the issue, hopefully it works for you too!
<!DOCTYPE html>
<html>
<body>
<table class="row" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="280" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td class="img-responsive" width="280" align="left">
<img alt="280x200x1" src="#" style="width:100%; height:auto;" width="280" height="200">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<table data-primary-order="1" data-primary-type="bgcolor" data-bgcolor="Columns" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center">
<tbody><tr>
<td align="center">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width:90%; width:90%;" width="90%" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
<tr>
<td>
<table style="width:auto !important;" cellspacing="0" cellpadding="0" align="center" id="I CHANGED FROM LEFT TO CENTER">
<tbody><tr>
<td data-color="Titles" data-size="Titles" data-min="14" data-max="46" style="color: #333333; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; line-height: 22.1px;" style="text-align: right;">text text<br>text text</td></tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body>
</html>
I am creating a responsive email template for that I need 6 Books in a row.
The width of main table is 600px, books table width is 15% and red highlighted table (for space between tables) width is 2%. All tables are left aligned.
Email is working fine in browser but not rendering in properly in Outlook here is screenshot below.
There is 1px space around the red table, please suggest a fix so it renders in a row & works fine in outlook 2016 and also in other version.
Outlook 2016 Example
Note: I tried using single table with 6 <td> but it wasn't working in Andorid 4.4, so that is why I am using this table structure.
/* MOBILE STYLES */
#media screen and (max-width: 520px) {
/* FULL-WIDTH TABLES */
table[class="responsive-table"] {
width: 100%!important;
}
}
<table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table" align="center" bgcolor="yellow">
<tr>
<td>
<!-- TWO COLUMNS -->
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top" style="padding: 0;">
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<!-- RIGHT COLUMN -->
</td>
</tr>
</table>
</td>
</tr>
</table>
You can try the following code for table, I suggest you, not to use multiple tables inside a table, instead use TD.
It may resolve your issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#media screen and (max-width: 520px) {
/* FULL-WIDTH TABLES */
table[class="responsive-table"] {
width: 100%!important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table" align="center" bgcolor="yellow">
<tr>
<td>
<!-- TWO COLUMNS -->
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Snapshot 1
Snapshot 2
Snapshot 3
I am setting up an email newsletter template however the images at the top as well as the video link at the bottom are not aligned correctly.
When I preview the template/ code in sublime text as well as the email composition page the images look fine but once the email is sent the images bleed out the right-hand side. Help!
body {
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_white a {
color: #ffffff !important;
text-decoration: none !important;
}
.em_black a {
color: #000000;
text-decoration: none;
}
.em_green a {
color: #737f48;
text-decoration: none;
}
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="telephone=no" name="format-detection" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Our Preschool Program</title>
</head>
<body style="margin:0px; padding:0px;" bgcolor="#ffffff">
<table width="100%" border="0" align="center" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<!-- Emailer Starts Here-->
<td align="center" valign="top"><table style="table-layout:fixed;" width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td background="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_top.jpg" style="background-repeat:no-repeat;" width="313" height="451" valign="top" bgcolor="#4c6211"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:313px;height:451px;">
<v:fill type="tile" src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_top.jpg" color="#4c6211"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="313" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="80"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="313" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="106"> </td>
<td valign="top" align="center" width="105"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/logo_header.png" width="105" height="105" alt="PRIMROSE SCHOOL" style="display:block; font-family:Arial, sans-serif; font-size:15px; line-height:22px; color:#ffffff; font-weight:bold;" border="0"/></td>
<td width="102"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="61"> </td>
</tr>
<tr>
<td class="em_white" valign="top" align="center" style="font-family:UnitOT, sans-serif; font-size:43px; line-height:50px; color:#ffffff;">Our <br />Preschool<br/>Program</td>
</tr>
<tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
<td valign="top" align="left"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/banner.jpg" width="487" height="451" alt="Our preschool Program" style="display:block;" border="0"/></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="28" bgcolor="#f1f2f2"> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="36" bgcolor="#f2f2f2"> </td>
<td valign="top" align="center"><table width="728" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="18" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="728" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="18"> </td>
<td width="1" bgcolor="#737f48"></td>
<td valign="top" align="center"><table width="690" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1" style="font-size:1px; line-height:1px;" bgcolor="#737f48"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="690" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"> </td>
<td valign="top" align="center"><table width="645" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td class="em_black" valign="top" align="left" style="font-family:Arial, sans-serif; font-size:12px; line-height:15px; color:#000000;"><TemplateField Name="Message" Width="645" MinHeight="30" MaxHeight="1000" Height="30">Thank you for inquiring about the [{CenterName}] for your preschooler! We hope we have the opportunity to partner with you to provide an unparalleled early learning experience for your child and family.<br /><br />
<b>About <i>Primrose®</i> and <i>Balanced Learning®</b></i><br />
At Primrose, we believe who children become is as important as what they know. That's why our exclusive <i>Balanced Learning </i> approach emphasizes character development and life skills in addition to nurturing children's intellectual, creative and physical development.<br /><br />
<i>Balanced Learning</i> is created from the best early education wisdom to ensure we offer the highest quality early education and care possible. Meaningful daily classroom experiences weave learning and fun together for children, and a balance of purposeful play and nurturing guidance from teachers gives every child the opportunity to reach his full learning potential.<br /><br />
<b>About our Preschool Classroom</b><br />
Our Preschool classroom is part of our Venture Program for children ages 3 to 5, which focuses on building children's confidence and independence so they feel comfortable venturing out, exploring on their own and asking questions. We invite you to watch the video below for a glimpse inside our Preschool classroom and to learn more about the unique experiences designed to nurture curiosity, creativity, confidence and compassion.<br /><br />
We would love to speak with you more about what you are looking for in a child care provider. Please let us know a time that is convenient for you to visit our school and meet our School Leadership Team and teachers.<br /><br />
Thank you again for your interest in the [{CenterName}]. We look forward to meeting you and your child soon!<br /><br />
Sincerely,
</TemplateField></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, sans-serif;font-size:12px;height:19px;color:#231f20;text-align:left;">[{CenterName}]<br />
[{CenterAddress1}] [{CenterAddress2}] | [{CenterCity}], [{CenterState}] [{CenterZip}]<br />
[{CenterPhone}] | [{CenterWebsite}]</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</table></td>
<td width="20"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="1" bgcolor="#737f48"></td>
<td width="18"> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="18" height="182" bgcolor="#f1f2f2" valign="top"><table width="18" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="162" bgcolor="#ffffff"></td>
</tr>
</table></td>
<td valign="top" height="182" ><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" valign="top" bgcolor="#f1f2f2"><table width="1" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="145" bgcolor="#737f48"></td>
</tr>
<tr>
<td width="1" height="17" bgcolor="#ffffff"></td>
</tr>
</table></td>
<td valign="top" align="center"><table width="690" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center"><table width="380" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="144" align="center" valign="top"><table width="365" border="0" cellspacing="0" cellpadding="0">
<tr>
</tr>
<tr>
<td height="10" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td class="em_green" valign="top" align="right" style="font-family:'Unitot', Trebuchet MS, Arial, sans-serif; font-size:15px; line-height:18px; color:#737f48; font-weight:bold;">Learn more about our </td>
</tr>
<tr>
<td class="em_green" valign="top" align="right" style="font-family:'Unitot', Trebuchet MS, Arial, sans-serif; font-size:15px; line-height:18px; color:#737f48; font-weight:bold;">Preschool program.</td>
</tr>
<tr>
</tr>
<tr>
<td align="center" valign="top"><table width="365" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="5" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td align="right" valign="top"><table width="365" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="198"> </td>
<td align="right" valign="top" width="31"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/fb.jpg" width="31" height="31" alt="Fb" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/twitt.jpg" width="30" height="31" alt="Tweet" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/media.jpg" width="30" height="31" alt="YT" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/pinterest.jpg" width="30" height="31" alt="Pint" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
<td width="4"></td>
<td align="right" valign="top" width="30"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/blog.jpg" width="30" height="31" alt="Blog" border="0" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#000000;"/></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="5" style="font-size:1px; line-height:1px;"> </td>
</tr>
</table></td>
<td width="15"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1" style="font-size:1px; line-height:1px;" bgcolor="#737f48"> </td>
</tr>
<tr>
<td height="17" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td height="25" style="font-size:1px; line-height:1px;" bgcolor="#f1f2f2"> </td>
</tr>
</table></td>
<td valign="top" align="left" width="293"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/Video.jpg" width="293" height="187" alt="Video" style="display:block;" border="0"/></td>
<td valign="top" align="center" width="17"><table width="17" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="144" width="17"> </td>
</tr>
<tr>
<td height="1" width="17" valign="bottom" style="font-size:1px; line-height:1px;" bgcolor="#737f48"> </td>
</tr>
<tr>
<td height="17" width="17" style="font-size:1px; line-height:1px;"> </td>
</tr>
<tr>
<td height="25" style="font-size:1px; line-height:1px;" width="17" bgcolor="#f1f2f2"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="1" valign="top" bgcolor="#f1f2f2"><table width="1" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="145" bgcolor="#737f48"></td>
</tr>
<tr>
<td width="1" height="17" bgcolor="#ffffff"></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="18" height="182" bgcolor="#f1f2f2" valign="top"><table width="18" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="162" bgcolor="#ffffff"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="36" bgcolor="#f2f2f2"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" bgcolor="#f1f2f2"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td background="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_bottom.jpg" style="background-repeat:no-repeat;" width="800" height="135" valign="top" bgcolor="#4c6211"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px;height:135px;">
<v:fill type="tile" src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/bg_bottom.jpg" color="#4c6211"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="25"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="36"> </td>
<td width="320" valign="top" align="left"><table width="320" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td height="22"> </td>
</tr>
<tr>
<td class="em_white" align="left" valign="top" style="font-family:'Century Gothic', Arial, sans-serif; font-size:8px; line-height:10px; color:#ffffff;"><span style="font-weight:bold;">Confidentiality Notice:</span> This message (including any attachments) contains information that may be confidential. Unless you are the intended recipient(or authorized to receive for the intended recipient), you may not read, print, retain, use, copy, distribute or disclose to anyone the message or any information contained in the message. If you have received the message in error, please advise the sender by reply e-mail, and destroy all copies of the original message (including any attachments). </td>
</tr>
</table></td>
<td width="300" valign="top" align="center"><table width="300" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td height="57"> </td>
</tr>
<tr>
<td valign="top" align="right" style="font-size:0px; line-height:0px;"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/text_1.png" width="210" height="13" alt="The Leader in Early Education and Care." border="0" style="display:block; font-family:Arial, sans-serif; font-size:10px; line-height:22px; color:#ffffff;" /></td>
</tr>
</table></td>
<td width="5"></td>
<td width="91" valign="top" align="left"><img src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/logo_ftr.png" width="91" height="92" alt="PRIMROSE SCHOOLS" border="0" style="display:block; font-family:Arial, sans-serif; font-size:15px; line-height:22px; color:#ffffff; font-weight:bold;" /></td>
<td width="48"> </td>
</tr>
</table></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="line-height:1px; font-size:1px;" width="800"><img alt="" src="http://s3.amazonaws.com/ccmonlinelibrary/kpzhenqkmfqgjbaj/TemplateImages/424/spacer.gif" height="1" width="800" style="max-height:1px; min-height:1px; display:block; width:800px; min-width:800px;" border="0" /></td>
</tr>
</table></td>
</tr>
<!-- Emailer Ends Here //-->
</table>
<div style="display:none; white-space:nowrap; font:20px courier; color:#ffffff; background-color:#ffffff;"> </div>
</body>
</html>
I just need the image to fit within the box when sent and be justified with the rest of the template.
As Nisharg Shah said, use inline CSS instead of creating a style tag. Also, use of !important is usually frowned upon and candle make your CSS very confusing.
The below images (Scenario A, Scenario B) are taken from GMAIL app for same newsletter. The only difference is the highlighted portion in Scenario B is an image. Ideally I want scenario B (its properly aligned and takes 600 px width), but how can I achieve it with text itself (as shown in Scenario A)?
The problem I am facing is its getting wrapped like a mobile layout and because of that the whole template width is getting reduced.
Scenario A Scenario B
The difference in code for Scenario A & Scenario B
Scenario A:
<div style="background-color:#f6f4f5;padding:0;margin:0 auto;width:100%!important">
<div style="overflow:hidden;color:transparent;width:0;font-size:0;min-height:0">
</div>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f4f5" border="0" align="center" style="table-layout:fixed;font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td align="center">
<center style="width:100%">
<table width="580" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" style="margin:0 auto; max-width:580px; width:inherit; font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td width="100%" bgcolor="#F3F3F3" style="background-color:#f6f4f5;padding:12px;border-bottom:1px solid #ececec">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="font-weight:200;width:100%!important;font-family:Helvetica,Arial,sans-serif;min-width:100%!important">
<tbody>
<tr>
<td width="47%" valign="middle">
<div>
<a target="_blank" title="MyTechLogy" href="http://www.mytechlogy.com/"><img src="http://www.mytechlogy.com/view/images/MyTechLogy-Logo-TagLine-200.png" border="0" style="display:block;border:none;outline:none;text-decoration:none" title="MyTechLogy" alt="MyTechLogy"></a>
</div>
</td>
<td align="left" width="47%" valign="middle" style="padding:10px 0 10px 20px">
<div>
<img src="http://www.mytechlogy.com/upload/by_users/Bharath/241605103728ITcareerdevelopment.png" border="0" style="display:block; border:none; outline:none; text-decoration:none; height:60px;" title="Your Online Professional IT Career Development Platform." alt="Your Online Professional IT Career Development Platform.">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="30" style="padding-left: 20px; font-family:Helvetica,Arial,sans-serif; font-size:16px; color:#ffffff;line-height:20px;vertical-align:middle;text-align:left;"><strong><span style="text-align:left;">Weekly Highlights from the Analytics Corner</span></strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:20px; padding-bottom:5px;padding-left:20px; padding-right:10px">
<strong><span style="color:#29acc8;">Tips to ace your Data Analytics Interview</span></strong>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:0px; padding-left:20px; padding-right:10px">
I test drove the new Career Initiative feature at MyTechlogy and was pretty impressed by the kind of insights it threw up overnight. I think young professionals in data analytics or data science will find it helpful if they're looking for data that will help them make a decision about their own careers.. <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#29acc8;">Read more >></span>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:10px; padding-bottom:5px; padding-left:20px; padding-right:10px">
<strong><span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;">Career Switch to Analytics?</span> <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;"><span style="color:#29acc8;">See which IT skills can help you get there >></span></span></strong>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle; ">
<td width="100%" height="10" ></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-top:20px;">
<div align="center">
<table align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" width="560">
<tbody>
<tr>
<td width="560px" align="left" valign="middle" height="60" style=" text-align:left; background-color:#29acc8; font-size:21px; font-family:Helvetica, arial, sans-serif; color:#ffffff; font-weight: 300; padding-left:10px;">
<span style="color: #ffffff; font-weight: 400;text-align:left">
<strong>IT Career Progression made easier with MyTechLogy</strong>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle;">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:10px; padding-left:20px; padding-right:10px">
MyTechlogy provides personalized insights from industry data to help you stay relevant and to progress your IT career.
</td>
</tr>
<tr valign="middle" style="vertical-align:middle; ">
<td align="center" valign="middle" style="vertical-align:middle; ">
<a target="_blank" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><img width="540" border="0" height="163" alt="IT career progression has been made easier with MyTechLogy" style="display:block; border:none; outline:none; text-decoration:none;" src="http://www.mytechlogy.com/upload/by_users/Bharath/181605050426CareerProgression.png" class="bigimage"></a>
</td>
</tr>
<tr>
<td width="100%" height="10"></td>
</tr>
<tr>
<td>
<div align="center">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes">
<table height="60" align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
<tbody>
<tr align="center">
<td width="auto" align="center" valign="middle" height="60" style=" background-color:#FF6600; border-top-left-radius:2px; border-bottom-left-radius:2px;border-top-right-radius:2px; border-bottom-right-radius:2px; background-clip: padding-box;font-size:22px; font-family:Helvetica, arial, sans-serif; text-align:center; color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px; box-shadow: 1px 5px 5px #888888;">
<span style="color: #ffffff; font-weight: 400;">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><strong>Create your Career Initiative Now!</strong></a>
</span>
</td>
</tr>
</tbody>
</table>
</a>
</div>
</td>
</tr>
<tr>
<td width="100%" height="30"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#f6f4f5" align="center" width="580">
<tbody>
<tr>
<td align="left" valign="middle" style="font-family:Calibri,sans-serif;font-size:11px;color:#666666;line-height:15px; padding-left:10px;padding-right:10px;">
<div style="background-color:#f6f4f5;padding-top:20px;margin:0 auto;width:100%!important">
To unsubscribe from receiving this email into future, click <a target="_blank" style="text-decoration:none;color:#0db9ea" href="[UNSUBSCRIBEURL]">unsubscribe</a> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
Scenario B:
<div style="background-color:#f6f4f5;padding:0;margin:0 auto;width:100%!important">
<div style="overflow:hidden;color:transparent;width:0;font-size:0;min-height:0">
</div>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f4f5" border="0" align="center" style="table-layout:fixed;font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td align="center">
<center style="width:100%">
<table width="580" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" style="margin:0 auto; max-width:580px; width:inherit; font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td width="100%" bgcolor="#F3F3F3" style="background-color:#f6f4f5;padding:12px;border-bottom:1px solid #ececec">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="font-weight:200;width:100%!important;font-family:Helvetica,Arial,sans-serif;min-width:100%!important">
<tbody>
<tr>
<td width="47%" valign="middle">
<div>
<a target="_blank" title="MyTechLogy" href="http://www.mytechlogy.com/"><img src="http://www.mytechlogy.com/view/images/MyTechLogy-Logo-TagLine-200.png" border="0" style="display:block;border:none;outline:none;text-decoration:none" title="MyTechLogy" alt="MyTechLogy"></a>
</div>
</td>
<td align="left" width="340" valign="middle" style="padding:10px 0 10px 10px">
<div> <span style="font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#333333; line-height:28px; vertical-align:middle;">Your Online Professional<br />IT Career Development Platform.</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="30" style="padding-left: 20px; font-family:Helvetica,Arial,sans-serif; font-size:16px; color:#ffffff;line-height:20px;vertical-align:middle;text-align:left;"><strong><span style="text-align:left;">Weekly Highlights from the Analytics Corner</span></strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:20px; padding-bottom:5px;padding-left:20px; padding-right:10px">
<strong><span style="color:#29acc8;">Tips to ace your Data Analytics Interview</span></strong>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:0px; padding-left:20px; padding-right:10px">
I test drove the new Career Initiative feature at MyTechlogy and was pretty impressed by the kind of insights it threw up overnight. I think young professionals in data analytics or data science will find it helpful if they're looking for data that will help them make a decision about their own careers.. <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#29acc8;">Read more >></span>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:10px; padding-bottom:5px; padding-left:20px; padding-right:10px">
<strong><span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;">Career Switch to Analytics?</span> <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;"><span style="color:#29acc8;">See which IT skills can help you get there >></span></span></strong>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle; ">
<td width="100%" height="10" ></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-top:20px;">
<div align="center">
<table align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" width="560">
<tbody>
<tr>
<td width="560px" align="left" valign="middle" height="60" style=" text-align:left; background-color:#29acc8; font-size:21px; font-family:Helvetica, arial, sans-serif; color:#ffffff; font-weight: 300; padding-left:10px;">
<span style="color: #ffffff; font-weight: 400;text-align:left">
<strong>IT Career Progression made easier with MyTechLogy</strong>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle;">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:10px; padding-left:20px; padding-right:10px">
MyTechlogy provides personalized insights from industry data to help you stay relevant and to progress your IT career.
</td>
</tr>
<tr valign="middle" style="vertical-align:middle; ">
<td align="center" valign="middle" style="vertical-align:middle; ">
<a target="_blank" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><img width="540" border="0" height="163" alt="IT career progression has been made easier with MyTechLogy" style="display:block; border:none; outline:none; text-decoration:none;" src="http://www.mytechlogy.com/upload/by_users/Bharath/181605050426CareerProgression.png" class="bigimage"></a>
</td>
</tr>
<tr>
<td width="100%" height="10"></td>
</tr>
<tr>
<td>
<div align="center">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes">
<table height="60" align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
<tbody>
<tr align="center">
<td width="auto" align="center" valign="middle" height="60" style=" background-color:#FF6600; border-top-left-radius:2px; border-bottom-left-radius:2px;border-top-right-radius:2px; border-bottom-right-radius:2px; background-clip: padding-box;font-size:22px; font-family:Helvetica, arial, sans-serif; text-align:center; color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px; box-shadow: 1px 5px 5px #888888;">
<span style="color: #ffffff; font-weight: 400;">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><strong>Create your Career Initiative Now!</strong></a>
</span>
</td>
</tr>
</tbody>
</table>
</a>
</div>
</td>
</tr>
<tr>
<td width="100%" height="30"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#f6f4f5" align="center" width="580">
<tbody>
<tr>
<td align="left" valign="middle" style="font-family:Calibri,sans-serif;font-size:11px;color:#666666;line-height:15px; padding-left:10px;padding-right:10px;">
<div style="background-color:#f6f4f5;padding-top:20px;margin:0 auto;width:100%!important">
To unsubscribe from receiving this email into future, click <a target="_blank" style="text-decoration:none;color:#0db9ea" href="[UNSUBSCRIBEURL]">unsubscribe</a> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
Please help how can I solve this issue.
These td's should be placed within a table that's 600px wide and thát one should be placed within a table that's 100% wide.
Hope this helps. Otherwise, please post more of your code, so we can adjust it.
please use following code:
<table align=center" width="100%">
<td align="left" width="48%" valign="middle" style="padding:10px 0 10px 10px;font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#333333; line-height:28px; vertical-align:middle;">
Your Online Professional<br />IT Career Development Platform.
</td>
<td align="left" width="48%" valign="middle" style="padding:10px 0 10px 10px"><img src="http://www.mytechlogy.com/upload/by_users/Bharath/241605103728ITcareerdevelopment.png" border="0" style="display:block; border:none; outline:none; text-decoration:none; height:60px;" title="Your Online Professional IT Career Development Platform." alt="Your Online Professional IT Career Development Platform."></td>
</table>
I am experience a gap between the header and the body only in Outlook 2013. Below is a screen-shot to hot it looks in outlook:
Here is what it should look like:
My header HTML code:
<!-- start header -->
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" width="580" style="font-family:Arial,Helvetica,sans-serif" >
<tr>
<td width="241" height="51" valign="top" height="51" style="line-height: 51px;">
<img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/logo.png" style="display:block;">
</td>
<td width="179" height="51" valign="top" bgcolor="#00b0ed" style="background:#00b0ed;" style="line-height: 51px;" ></td>
<td width="1" height="51" valign="top" style="line-height: 51px;" ></td>
<td width="159" height="51" valign="top" style=" text-align:center; font-size:14px; " style="line-height: 51px;" >
<table cellspacing="0" cellpadding="0" width="159" style="font-family:Arial,Helvetica,sans-serif; text-align:center;" border="0" height="51">
<tr>
<td width="159" align="left" valign="top" height="12" style="line-height:12px;" ><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/invitation.png" style="display:block;" height="12"></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="5"></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="text-align:center; background:#00B0ED; " height="26" > <span style="color:#fff; text-decoration:none; font-weight:100; font-family:Arial,Helvetica,sans-serif; text-align:center; font-size:14px ">INVITATION</span></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="8"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="left" valign="top" colspan="4" height="1"><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford/images/blank.jpg" height='1' width="1" style="display:block;"></td>
</tr>
</table>
<!-- end header -->
This will probably help:
http://www.campaignmonitor.com/blog/post/3795/outlook-2013-says-no-to-empty-table-cells
Basically, it's a padding issue with outlook - and it's related to font sizing. That's quite an old problem from waaaay back in the day of table based website layouts and the old tricks of setting font size to 1px, or using nasty old 1x1px transparent gif files :)
Use this in your stylesheet
table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
table td {border-collapse: collapse;}
And inline for each table declare
table border="0" cellpadding="0" cellspacing="0"
To get the 1 pixel white space between each cell use nested tables. and declare the table like so
table border="1" border-color="#ffffff" cellpadding="0" cellspacing="0"