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"
Related
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.
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>
Below is the code I have created. When a client opens the email on their end in Outlook 2010 The table width is changed from 356 to width="445" style="width:267.0pt
I have tried to change the below code to include the style width info but that didn't help. On the receive end the width was still changed to 445.
This is what is added specifically to the tables
<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="445" style="width:267.0pt">
This is my original code
<HTML><HEAD>
</HEAD>
<BODY style="FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Verdana" background="">
<table id="Table2" width="356" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p align=center>
<i><font face="Calibri" style="" color=#1f497d size="3">Click on my
business card and its tabs to learn more.<br><br>
</font></i></td>
</tr>
<tr>
<td>
<table id="Table3" width="356" height="37" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://www.wfasignatures.com/wayne.osher/Tab_1.php">
<img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_01.jpg" width="119" height="37" style=display:block alt="What’s Going on in Your Life?"></a></td>
<td>
<a href="http://www.wfasignatures.com/wayne.osher/Tab_2.php">
<img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_02.jpg" width="118" height="37" style=display:block alt="Investment Tools & Insights"></a></td>
<td>
<a href="http://www.wfasignatures.com/wayne.osher/Tab_3.php">
<img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_03.jpg" width="119" height="37" style=display:block alt="Make an Introduction"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td>
<img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_04.jpg" width="356" height="104" style=display:block alt=""></td>
</tr>
<tr>
<td>
<table id="Table4" width="356" height="101" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_05.jpg" width="11" height="101" style=display:block alt=""></td>
<td>
<img border="0" src="http://saf.wellsfargoadvisors.com/faphotos/Photos/68/373868.jpg" width="81" height="101" style=display:block alt=""></td>
<td>
<img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_07.jpg" width="264" height="101" style=display:block alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td>
<a href="http://home.wellsfargoadvisors.com/wayne.osher&cid=FA110031909">
<img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_08.jpg" width="356" height="131" style=display:block alt="Visit my webpage"></a></td>
</tr>
<tr>
<td>
<img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_09.jpg" width="356" height="34" style=display:block alt="Add me to your Contacts"></td>
</tr>
</table></BODY></HTML>
You need to clean up your code a bit and add a few Outlook fixes I think.
in your head add the following code:
<style type="text/css">
.ReadMsgBody, .ExternalClass { width: 100%;}
.ExternalClass * {line-height: 110%;}
body { width: 100% !important; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; margin: 0; padding: 0; }
table { border-collapse:collapse !important;
mso-table-lspace:0pt; mso-table-rspace:0pt; }
</style>
This will fix a number of known rendering issues.
close off your p tags. You seem to open them but not close them in your code. In fact, just avoid p tags altogether. Add your styles directly to the td and place your text straight inside
add quote marks around your style="diplay:block" on your images
add a doctype at the very top of the file: <!DOCTYPE html>
don't have line breaks between img and a tags inside the td
put a table around the whole email at 100% width:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.ReadMsgBody, .ExternalClass { width: 100%;}
.ExternalClass * {line-height: 110%;}
body { width: 100% !important; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; margin: 0; padding: 0; }
table { border-collapse:collapse !important;
mso-table-lspace:0pt; mso-table-rspace:0pt; }
</style>
</head>
<body bgcolor="#ffffff" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" style="margin:0; padding:0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="356" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="font-family:Calibri; color:#1f497d; font-size:3; font-style:italic; padding:0 0 15px 0;">Click on my business card and its tabs to learn more.</td>
</tr>
<tr>
<td align="left" valign="top"><table id="Table3" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_01.jpg" width="119" height="37" style="display:block;" alt="What’s Going on in Your Life?"></td>
<td align="left" valign="top"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_02.jpg" width="118" height="37" style="display:block" alt="Investment Tools & Insights"></td>
<td align="left" valign="top"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_03.jpg" width="119" height="37" style="display:block" alt="Make an Introduction"></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_04.jpg" width="356" height="104" style="display:block;" alt=""></td>
</tr>
<tr>
<td align="left" valign="top"><table id="Table4" width="356" height="101" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_05.jpg" width="11" height="101" style="display:block;" alt=""></td>
<td align="left" valign="top"><img border="0" src="http://saf.wellsfargoadvisors.com/faphotos/Photos/68/373868.jpg" width="81" height="101" style="display:block;" alt=""></td>
<td align="left" valign="top"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_07.jpg" width="264" height="101" style="display:block;" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_08.jpg" width="356" height="131" style="display:block;" alt="Visit my webpage"></td>
</tr>
<tr>
<td align="left" valign="top"><img border="0" src="http://www.wfasignatures.com/wayne.osher/wayne.osher_1_09.jpg" width="356" height="34" style="display:block;" alt="Add me to your Contacts"></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Table cell widths are staggered in iPhone Gmail.
Is there a way to force Gmail for iPhone to render table cells at their designated widths? Oddly, the multi-slice rows expand to the set 'width:650'. The single slice rows are narrower although they are also set to 'width:650'.
As far as I can tell, my emails look perfect in all desktop email clients - even Outlook! It also looks fine in Mail for iPhone.
I've tried using 'border-collapse:collapse', 'width:100%' on the tables and td's, and finally 'table-layout:fixed'.
This is the HTML:
`
<!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">
<title>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</title>
</head>
<body>
<img border="0" style="display:block;" src="spacer.gif" width="1" height="1" />
<table bgcolor="#fff" border="0" align="center" cellpadding="0" cellspacing="0" style="table-layout:fixed;width:650px;">
<tbody>
<tr>
<!--/*************** BEGIN LEAD ***************/ -->
<td align="left" valign="top" bgcolor="#fff" width="650"><span id="part1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
<!-- /*************** END LEAD ***************/ -->
</tr>
<!-- /*************** BEGIN HEADER INC ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><table width="650" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="650"><span style="font-family: Arial, Helvetica, sans-serif; font-size:10px; color:#666; line-height:13px;margin-top:2px;"><a style="color:#666; text-decoration:underline;line-height:13px;" href="">XXXXXXXXXXXXXX</a> iXXXXXXXXXXXXXXXXXXX<a style="color:#666; text-decoration:underline;font-size:10px;line-height:13px;" href=""> XXXXXXXXXXXX</a>XXXXXXXXXXXXXXXXX<br />
<span style="font-weight:bold;">XXXXXXXXXXXXXXXXX</span> XXXXXXXXXXXXXXXX</span></td>
</tr>
<tr>
<td width="650"><img src="spacer.gif" width="650" height="46" border="0" style="display: block;" /></td>
</tr>
<tr>
<td><table id="Table_01" width="650" height="47" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="280"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_01.gif" width="280" height="47" alt="Territory Ahead"> </td>
<td width="370"><img border="0" style="display:block;margin:0;padding:0;" src="spacer3_02.gif" width="370" height="47" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td><table id="Table_01" width="650" height="31" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="97"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_03.gif" width="97" height="31" alt="Men's"> </td>
<td width="90"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_04.gif" width="90" height="31" alt="Women's"> </td>
<td width="93"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_05.gif" width="93" height="31" alt="Isabella Bird"> </td>
<td width="132"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_06.gif" width="132" height="31" alt="Men's Clearance"> </td>
<td width="83"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_07.gif" width="83" height="31" alt="Women's Clearance"> </td>
<td width="155"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_08.gif" width="155" height="31" alt="eGift Cards"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border-top: solid 1px #b69358;" width="650">
<tr>
<td width="650" style="height:8px;" ></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- /*************** END HEADER INC ***************/ -->
<!-- /*************** BEGIN PROMO ***************/ -->
<!-- /*************** END PROMO ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><!-- /*************** BEGIN MAIN ***************/ -->
<table id="Table_01" width="650" height="1595" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_01.gif" width="650" height="352" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_02.jpg" width="650" height="405" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_03.jpg" width="650" height="408" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_04.jpg" width="650" height="430" alt=""></td>
</tr>
</table>
<!-- /*************** END MAIN ***************/ --></td>
</tr>
<!-- /*************** BEGIN FOOTER INC ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><table width="650" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="650"><table id="Table_01" width="650" height="32" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="125"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_01.gif" width="125" height="32" alt=""></td>
<td width="88"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_02.gif" width="88" height="32" alt=""></td>
<td width="158"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_03.gif" width="158" height="32" alt=""></td>
<td width="105"><img border="0" style="display:block;" src="spacer_04.gif" width="105" height="32" alt=""></td>
<td width="31"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_05.gif" width="31" height="32" alt=""></td>
<td width="31"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_06.gif" width="31" height="32" alt=""></td>
<td width="112"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_07.gif" width="112" height="32" alt=""></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td align="center" style="padding-top:20px;" width="650"><span style="font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#666; line-height:13px;"><a style="font-size:10px;color:#666; text-decoration:none;" href="">XXXXXXXXXXXXXXXX</a> | <a style="font-size:10px; color:#666; text-decoration:none;" href="">XXXXXXXXXXXXXXX</a><br />
<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
</tr>
<tr>
<td width="650"><span style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000;"><img src="spacer.gif" width="650" height="49" border="0" style="display: block;margin:0;padding:0;"></span></td>
</tr>
</tbody>
</table></td>
</tr>
<!-- /*************** END FOOTER INC ***************/ -->
<!-- /*************** BEGIN DISC ***************/ -->
<tr>
<td align="left" valign="top" bgcolor="#fff" width="650"><span style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#000;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
</tr>
<!-- /*************** END DISC ***************/ -->
</tbody>
</table>
</body>
</html>
`
Finally found the solution! For an image to render at full width in the Gmail mobile app, the img tag must contain the style property set to style="display:block;min-width:650px;. This forces the content to full width as the Gmail mobile app is programmed to 'auto-adjust' the size of elements within the email. Thanks for your help on this Jon!
In the sliced rows, you don't have width="" set in your <td> tags. I know it is in the image tags, but it might make a difference.
Also try using style="margin: 0; border: 0; padding: 0; display: block;" on your images, it may help.
Try those 2 things - if they don't help, update and re-post the code so we can eliminate those potential issues. A screenshot/image of the error might also help.
I will post my HTML, but I'm not sure how the first table (which contains all subsequent tables) is always an additional 2-3 pixels wider than the rest of the content. I have spent the last 2 hours troubleshooting what I believe should be an easy fix... but I can't seem to find any other areas that may be causing the problem. I apologize if the solution is obvious, I haven't designed a website since I was in high school so my skills are a little rusty/aged.
<html>
<head>
<title>Piedmont Wealth Solutions</title>
<style type="text/css"><!--
a:link {
color:000000; font-face:arial; font-size:10pt; text-decoration:none
}
a:visited {
color:000000; font-face:arial; font-size:10pt; text-decoration:none
}
a:active {
color:000000; font-face:arial; font-size:10pt; text-decoration:none
}
a:hover {
color:000000; font-face:arial; font-size:10pt; text-decoration:underline
}
body {
color:Body; font-size:10pt; font-family:Arial;
}
td {
color:Body; font-size:10pt; font-family:Arial
}
--></style>
</head>
<body bgcolor="e9e9e9" background="page_bg.gif" font face="arial" size="10" valign="top" topmargin="0" leftmargin="180">
<table width="537" cellspacing="0" cellpadding="0" valign="top" align="left" height="100%" border="0" bgcolor="265b78">
<tr width="537" valign="top" align="left">
<td valign="top" align="left" width="36" background="table_bg_left.gif">
</td>
<td width="501" valign="top" align="left">
<!------banner/nav----->
<table width="501" valign="top" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="c5c5c5">
<tr valign="top" align="left" border="0">
<img src="banner_nav.jpg" border="0" valign="top" align="left">
<img src="content_top_spacer.jpg" border="0" valign="top" align="left">
</td>
</tr>
</table>
<!------content------>
<table width="501" height="350" cellspacing="0" cellpadding="0" border="0" align="left">
<tr valign="top" align="left">
<td valign="top" align="left" width="356" bgcolor="f5F8Fa">
<img src="aboutus_header.jpg" border="0" valign="top">
<br>
<br>
Content
</td>
<td valign="top" width="144" bgcolor="f0f3f5">
<img src="news_header.jpg" border="0" align="left" valign="top"> <br><br>
google news feed
</td>
</tr>
</table>
<!------address/disclaimer------>
<table width="501" cellspacing="0" cellpadding="0" height="45%" border="0" valign="top" align="left" bgcolor="265b78">
<tr valign="top" align="left">
<td valign="top" align="left" height="15" bgcolor="aac6d5">
</td>
</tr>
<tr valign="top" align="left">
<td valign="top" align="left" height="15" bgcolor="7da6bc">
</td>
</tr>
<tr valign="top" align="left">
<td valign="top" align="left">
<img src="bottom_disclosure.jpg" align="left" valign="top" border="0">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Tables should not be used for layout purposes, that's what CSS is for. Tables are for tabular data. With CSS you have a very nice control over the positioning and dimensions of your content.
Here's a collection of reasons why you should opt for CSS.
This is (IMHO) the best book for a head start.