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>
Hi I'm trying to resize the blue button in the header image, but I can't change its width. It's in a table format inside a <td> i tried using td width also it didn't work. It looks like its fixed to 640px. I tried with style width also but it still didn't work. How else can I edit the width of the blue button? See attached image
As you can see the header image is what im trying to achieve
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>You're Invited to the SAP SuccessFactors SuccessConnect in Las Vegas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Word.Document">
</head>
<body style="margin:0; padding:0;" bgcolor="#ffffff" link="#008cd2">
<style type="text/css">
* {
-webkit-text-size-adjust: none;
-webkit-text-resize: 100%;
text-resize: 100%;
}
</style>
<!-- main wrapper -->
<table data-section="body" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<!-- header -->
<tr>
<td>
<table data-section="header" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="font-size:1px;color:#FFFFFF;">
<font color="#FFFFFF" style="font-size:1px;color:#FFFFFF;line-height:0;">
<!-- inbox preview optimized text -->
<span class="appleLinksWhite">Join SAP in Las Vegas for SuccessConnect at the Aria Resort! Hear from HR industry thought leaders, experts, and special guests.</span>
</font>
</td>
</tr>
<tr>
<td>
<table class="container header-container" title="header-container" width="640" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" title="brand">
<tr>
<td valign="middle" width="414" style="line-height:1px; font-size:1px;"><img src="https://portal.thinkwgroup.com/html-email/sap/email/images/logo-carlyle-group.png" alt="" border="0"style="vertical-align:top; width: 201px; height: 36px;"></a></td>
<td valign="middle" align="right" width="104" style="line-height:1px; font-size:1px;"><a title="THE BEST RUN" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/TheBestRunLogo-64px-White-DG.png" alt="THE BEST RUN" border="0" hspace="0" vspace="0" width="104" height="32" title="tagline" style="vertical-align:top; width: 104px; height: 32px;"></a></td>
<td width="10" class="hide" style="line-height:1px; font-size:1px;"> </td>
<td valign="middle" align="right" width="72" style="line-height:1px; font-size:1px;"><a title="SAP" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/logo.png" alt="SAP" border="0" hspace="0" vspace="0" width="72" height="36" title="logo" style="vertical-align:top; width: 72px; height: 36px;"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- main -->
<tr>
<td>
<table data-section="main" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr data-section="hero">
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr class="motion-row">
<td width="100%" valign="top" bgcolor="#000000">
<table background="https://portal.thinkwgroup.com/html-email/sap/email/images/banner-lasvegas.jpg" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:1px; font-size:1px;" height="60"> </td>
</tr>
<tr>
<td style="font:36px/44px Arial, Helvetica, sans-serif; color:#ffffff;">
<span class="font22">Join SAP in Las Vegas for Success<span style='color:#f0ab00;'>Connect</span> at the Aria Resort!</span><br>
</td>
</tr>
<tr>
<td align="center" bgcolor="#008fd3" width="50" height="40"><a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a></td>
</tr>
<!-- main
<tr>
<td class="widthAuto mceEditable" style= align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
-->
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr data-section="subhead">
<td>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td align="left" style="font:22px/30px Arial, Helvetica, sans-serif; color:#444444;">
<span class="font19">Hear from HR industry thought leaders, experts, and special guests.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<!-- email body -->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr data-section="content">
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font:14px/21px Arial, Helvetica, sans-serif; color:#444444;">
<p>You are cordially invited to attend our annual SuccessConnec<u>t</u> event, held by SAP SuccessFactors this September 16–18 in Las Vegas. Regarded as one of the top HR events of the year, SuccessConnect brings industry <strong>thought leaders</strong>, current and prospective <strong>customers</strong>, <strong>technology partners</strong>, and <strong>solutions experts</strong> together to share their <strong>experiences</strong>, <strong>best practices</strong>, and <strong>innovations</strong>. The event offers more than 100 breakout sessions alongside many <strong>high-level networking opportunities</strong>.</p>
<p class="xmsonormal">The future workplace looks very different from what we see today. From technological advancements to the ever-changing nature of jobs, skills, and careers, businesses need to find ways to succeed in a world that’s being reshaped by continuous innovation and disruption. Learn how SAP SuccessFactors solutions can help your company right now and help <strong>plan for future initiatives</strong>.</p>
<hr>
<p></p>
<table class="template-2col image-l split50 mceNonEditable" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="hide-email mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" valign="top" width="50%">
<p><img class="photo" src="https://portal.thinkwgroup.com/html-email/sap/email/images/image-lasvegas.jpg" width="280" height="158" /></p>
</td>
<td class="mobile-block2 mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" width="50%">
<p>This event provides a fantastic forum to meet other HR professionals and find out how they’re using SAP SuccessFactors to help <strong>drive a digital HR strategy</strong>, transform talent, recruitment, and learning programs, as well as <strong>improve HR process efficiency</strong>.</p>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" height="10"> </td>
</tr>
</tbody>
</table>
<p class="xmsonormal">Enjoy a celebratory evening at KAOS nightclub in the iconic Palms Resort Casino, where you’ll get to network with your peers while enjoying great entertainment.</p>
<p><strong>Please register here.</strong></p>
<p>We look forward to seeing you in Las Vegas!</p>
<table class="mceNonEditable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr data-section="callout">
<td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">
<tbody>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width20 " width="42"> </td>
<td class="mceEditable" style="font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;">
<p><strong>SAP SuccessFactors SuccessConnect</strong></p>
<p><strong>Date:</strong><br />September 16–18, 2019</p>
<p><strong>Location:</strong><br />Aria Resort and Casino</p>
<p><strong>Address:</strong><br />3730 S Las Vegas Blvd<br />Las Vegas, NV 89158</p>
<table class="cta-button mceNonEditable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="widthAuto mceEditable" style="border-radius: 5px;" align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="15"> </td>
</tr>
</tbody>
</table>
</td>
<td class="width20 " width="42"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" class="height28" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="display:none; white-space:nowrap; font:15px/2px courier; color:#ffffff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You should change you code
From
<td align="center" bgcolor="#008fd3" width="50" height="40"><a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a></td>
to
<td width="50" height="40" bgcolor="#202020" align="center">
<a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;background: #008fd3;width: 20%;position: absolute;padding: 8px;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" rel="noopener" data-sap-hpa-ceimo-ioi-link="73554900100700000840" data-mce-href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" data-mce-style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" data-mce-selected="1">Register today</a>
</td>
Hope can help you
You need to remove display:block
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>You're Invited to the SAP SuccessFactors SuccessConnect in Las Vegas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Word.Document">
</head>
<body style="margin:0; padding:0;" bgcolor="#ffffff" link="#008cd2">
<style type="text/css">
* {
-webkit-text-size-adjust: none;
-webkit-text-resize: 100%;
text-resize: 100%;
}
</style>
<!-- main wrapper -->
<table data-section="body" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<!-- header -->
<tr>
<td>
<table data-section="header" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="font-size:1px;color:#FFFFFF;">
<font color="#FFFFFF" style="font-size:1px;color:#FFFFFF;line-height:0;">
<!-- inbox preview optimized text -->
<span class="appleLinksWhite">Join SAP in Las Vegas for SuccessConnect at the Aria Resort! Hear from HR industry thought leaders, experts, and special guests.</span>
</font>
</td>
</tr>
<tr>
<td>
<table class="container header-container" title="header-container" width="640" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" title="brand">
<tr>
<td valign="middle" width="414" style="line-height:1px; font-size:1px;"><img src="https://portal.thinkwgroup.com/html-email/sap/email/images/logo-carlyle-group.png" alt="" border="0" style="vertical-align:top; width: 201px; height: 36px;"></a>
</td>
<td valign="middle" align="right" width="104" style="line-height:1px; font-size:1px;">
<a title="THE BEST RUN" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/TheBestRunLogo-64px-White-DG.png" alt="THE BEST RUN" border="0" hspace="0" vspace="0" width="104" height="32" title="tagline" style="vertical-align:top; width: 104px; height: 32px;"></a>
</td>
<td width="10" class="hide" style="line-height:1px; font-size:1px;"> </td>
<td valign="middle" align="right" width="72" style="line-height:1px; font-size:1px;">
<a title="SAP" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/logo.png" alt="SAP" border="0" hspace="0" vspace="0" width="72" height="36" title="logo" style="vertical-align:top; width: 72px; height: 36px;"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- main -->
<tr>
<td>
<table data-section="main" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr data-section="hero">
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr class="motion-row">
<td width="100%" valign="top" bgcolor="#000000">
<table background="https://portal.thinkwgroup.com/html-email/sap/email/images/banner-lasvegas.jpg" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:1px; font-size:1px;" height="60"> </td>
</tr>
<tr>
<td style="font:36px/44px Arial, Helvetica, sans-serif; color:#ffffff;">
<span class="font22">Join SAP in Las Vegas for Success<span style='color:#f0ab00;'>Connect</span> at the Aria Resort!</span><br>
</td>
</tr>
<tr>
<td align="left" width="50" height="40">
<a class="font14" style="font: 18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; background:#008fd3; display: inline-block;
line-height: 40px;
padding: 0 1em;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off"
target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a>
</td>
</tr>
<!-- main
<tr>
<td class="widthAuto mceEditable" style= align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
-->
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr data-section="subhead">
<td>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td align="left" style="font:22px/30px Arial, Helvetica, sans-serif; color:#444444;">
<span class="font19">Hear from HR industry thought leaders, experts, and special guests.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<!-- email body -->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr data-section="content">
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font:14px/21px Arial, Helvetica, sans-serif; color:#444444;">
<p>You are cordially invited to attend our annual SuccessConnec<u>t</u> event, held by SAP SuccessFactors this September 16–18 in Las Vegas. Regarded as one of the top HR events of the year, SuccessConnect
brings industry <strong>thought leaders</strong>, current and prospective <strong>customers</strong>, <strong>technology partners</strong>, and <strong>solutions experts</strong> together to share their <strong>experiences</strong>,
<strong>best practices</strong>, and <strong>innovations</strong>. The event offers more than 100 breakout sessions alongside many <strong>high-level networking opportunities</strong>.</p>
<p class="xmsonormal">The future workplace looks very different from what we see today. From technological advancements to the ever-changing nature of jobs, skills, and careers, businesses need to find ways to succeed in a world that’s
being reshaped by continuous innovation and disruption. Learn how SAP SuccessFactors solutions can help your company right now and help <strong>plan for future initiatives</strong>.</p>
<hr>
<p></p>
<table class="template-2col image-l split50 mceNonEditable" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="hide-email mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" valign="top" width="50%">
<p><img class="photo" src="https://portal.thinkwgroup.com/html-email/sap/email/images/image-lasvegas.jpg" width="280" height="158" /></p>
</td>
<td class="mobile-block2 mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" width="50%">
<p>This event provides a fantastic forum to meet other HR professionals and find out how they’re using SAP SuccessFactors to help <strong>drive a digital HR strategy</strong>, transform talent, recruitment, and
learning programs, as well as <strong>improve HR process efficiency</strong>.</p>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" height="10"> </td>
</tr>
</tbody>
</table>
<p class="xmsonormal">Enjoy a celebratory evening at KAOS nightclub in the iconic Palms Resort Casino, where you’ll get to network with your peers while enjoying great entertainment.</p>
<p><strong>Please register here.</strong></p>
<p>We look forward to seeing you in Las Vegas!</p>
<table class="mceNonEditable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr data-section="callout">
<td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">
<tbody>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width20 " width="42"> </td>
<td class="mceEditable" style="font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;">
<p><strong>SAP SuccessFactors SuccessConnect</strong></p>
<p><strong>Date:</strong><br />September 16–18, 2019</p>
<p><strong>Location:</strong><br />Aria Resort and Casino</p>
<p><strong>Address:</strong><br />3730 S Las Vegas Blvd<br />Las Vegas, NV 89158</p>
<table class="cta-button mceNonEditable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="widthAuto mceEditable" style="border-radius: 5px;" align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019"
target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="15"> </td>
</tr>
</tbody>
</table>
</td>
<td class="width20 " width="42"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" class="height28" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="display:none; white-space:nowrap; font:15px/2px courier; color:#ffffff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>You're Invited to the SAP SuccessFactors SuccessConnect in Las Vegas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Word.Document">
</head>
<body style="margin:0; padding:0;" bgcolor="#ffffff" link="#008cd2">
<style type="text/css">
* {
-webkit-text-size-adjust: none;
-webkit-text-resize: 100%;
text-resize: 100%;
}
</style>
<!-- main wrapper -->
<table data-section="body" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<!-- header -->
<tr>
<td>
<table data-section="header" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="font-size:1px;color:#FFFFFF;">
<font color="#FFFFFF" style="font-size:1px;color:#FFFFFF;line-height:0;">
<!-- inbox preview optimized text -->
<span class="appleLinksWhite">Join SAP in Las Vegas for SuccessConnect at the Aria Resort! Hear from HR industry thought leaders, experts, and special guests.</span>
</font>
</td>
</tr>
<tr>
<td>
<table class="container header-container" title="header-container" width="640" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" title="brand">
<tr>
<td valign="middle" width="414" style="line-height:1px; font-size:1px;"><img src="https://portal.thinkwgroup.com/html-email/sap/email/images/logo-carlyle-group.png" alt="" border="0"style="vertical-align:top; width: 201px; height: 36px;"></a></td>
<td valign="middle" align="right" width="104" style="line-height:1px; font-size:1px;"><a title="THE BEST RUN" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/TheBestRunLogo-64px-White-DG.png" alt="THE BEST RUN" border="0" hspace="0" vspace="0" width="104" height="32" title="tagline" style="vertical-align:top; width: 104px; height: 32px;"></a></td>
<td width="10" class="hide" style="line-height:1px; font-size:1px;"> </td>
<td valign="middle" align="right" width="72" style="line-height:1px; font-size:1px;"><a title="SAP" href="https://www.sap.com" style="text-decoration:none;"><img src="https://fm.sap.com/images/2015/run-simple-email/logo.png" alt="SAP" border="0" hspace="0" vspace="0" width="72" height="36" title="logo" style="vertical-align:top; width: 72px; height: 36px;"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="17" class="height10" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- main -->
<tr>
<td>
<table data-section="main" class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr data-section="hero">
<td>
<table class="flexible" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important;">
<tr class="motion-row">
<td width="100%" valign="top" bgcolor="#000000">
<table background="https://portal.thinkwgroup.com/html-email/sap/email/images/banner-lasvegas.jpg" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:1px; font-size:1px;" height="60"> </td>
</tr>
<tr>
<td style="font:36px/44px Arial, Helvetica, sans-serif; color:#ffffff;">
<span class="font22">Join SAP in Las Vegas for Success<span style='color:#f0ab00;'>Connect</span> at the Aria Resort!</span><br>
</td>
</tr>
<tr>
<td align="center" bgcolor="#008fd3" width="50" height="40" style="width: 20%;display: block;"><a class="font14" style="font: 18px Arial, Helvetica, sans-serif;color: #ffffff;text-align: center;text-decoration: none;display: block;width: 100%;padding: 10px 0px;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a></td>
</tr>
<!-- main
<tr>
<td class="widthAuto mceEditable" style= align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
-->
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px;" height="40"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="line-height:1px; font-size:1px;"> </td>
</tr>
<tr data-section="subhead">
<td>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<tr>
<td align="left" style="font:22px/30px Arial, Helvetica, sans-serif; color:#444444;">
<span class="font19">Hear from HR industry thought leaders, experts, and special guests.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto !important; padding:0 20px;">
<!-- email body -->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr data-section="content">
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font:14px/21px Arial, Helvetica, sans-serif; color:#444444;">
<p>You are cordially invited to attend our annual SuccessConnec<u>t</u> event, held by SAP SuccessFactors this September 16–18 in Las Vegas. Regarded as one of the top HR events of the year, SuccessConnect brings industry <strong>thought leaders</strong>, current and prospective <strong>customers</strong>, <strong>technology partners</strong>, and <strong>solutions experts</strong> together to share their <strong>experiences</strong>, <strong>best practices</strong>, and <strong>innovations</strong>. The event offers more than 100 breakout sessions alongside many <strong>high-level networking opportunities</strong>.</p>
<p class="xmsonormal">The future workplace looks very different from what we see today. From technological advancements to the ever-changing nature of jobs, skills, and careers, businesses need to find ways to succeed in a world that’s being reshaped by continuous innovation and disruption. Learn how SAP SuccessFactors solutions can help your company right now and help <strong>plan for future initiatives</strong>.</p>
<hr>
<p></p>
<table class="template-2col image-l split50 mceNonEditable" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="hide-email mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" valign="top" width="50%">
<p><img class="photo" src="https://portal.thinkwgroup.com/html-email/sap/email/images/image-lasvegas.jpg" width="280" height="158" /></p>
</td>
<td class="mobile-block2 mceEditable" style="vertical-align: top; font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;" width="50%">
<p>This event provides a fantastic forum to meet other HR professionals and find out how they’re using SAP SuccessFactors to help <strong>drive a digital HR strategy</strong>, transform talent, recruitment, and learning programs, as well as <strong>improve HR process efficiency</strong>.</p>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" height="10"> </td>
</tr>
</tbody>
</table>
<p class="xmsonormal">Enjoy a celebratory evening at KAOS nightclub in the iconic Palms Resort Casino, where you’ll get to network with your peers while enjoying great entertainment.</p>
<p><strong>Please register here.</strong></p>
<p>We look forward to seeing you in Las Vegas!</p>
<table class="mceNonEditable" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr data-section="callout">
<td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">
<tbody>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width20 " width="42"> </td>
<td class="mceEditable" style="font: 14px/21px Arial, Helvetica, sans-serif; color: #444444;">
<p><strong>SAP SuccessFactors SuccessConnect</strong></p>
<p><strong>Date:</strong><br />September 16–18, 2019</p>
<p><strong>Location:</strong><br />Aria Resort and Casino</p>
<p><strong>Address:</strong><br />3730 S Las Vegas Blvd<br />Las Vegas, NV 89158</p>
<table class="cta-button mceNonEditable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="widthAuto mceEditable" style="border-radius: 5px;" align="center" valign="middle" bgcolor="#008fd3" width="250" height="40"><a class="font14" style="font: 18px/18px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; text-decoration: none; display: block;" href="https://events.sap.com/successconnect/en/las-vegas-2019" target="_blank" data-sap-hpa-ceimo-ioi-link="73555000100800000773">Register today ›</a></td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="15"> </td>
</tr>
</tbody>
</table>
</td>
<td class="width20 " width="42"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="16"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="35" class="height28" style="line-height:1px; font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="display:none; white-space:nowrap; font:15px/2px courier; color:#ffffff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<td align="center" bgcolor="#008fd3" width="50" height="40" style="width: 20%;display: block;">
<a class="font14" style="font: 18px Arial, Helvetica, sans-serif;color: #ffffff;text-align: center;text-decoration: none;display: block;width: 100%;padding: 10px 0px;" href="https://events.sap.com/gb/cx-live-2019-london/en/registration.aspx?cid=10902&autoplay=off" target="_blank" data-sap-hpa-ceimo-ioi-link="73554900100700000840">Register today</a>
</td>
simple My code Replease To Your Code
My email HTML sets widths for Tables / inside content, and it works well on Mac & Mobile; Windows Outlook, on the other hand, has the Header/Footer content at one width, and the Body Content at another (wider) width.
I've been banging my head trying to figure this out - and am at a loss.
I've searched through S.O. to see if others figured this out, but haven't had any luck there, either.
Any help would be appreciated.
Code below:
<body style="padding:0; margin:0;" bgcolor="#dadada">
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"> Focus on what really matters at work and don't give your feet a second thought when wearing our most popular professional styles: flats, heels and more. </div>
<!-- END PREVIEW TEXT -->
<!-- header wrapper -->
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;table-layout:fixed;">
<tr>
<td align="center">
<table width="600" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" border="0" class="width320" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#ffffff;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:14px;min-width:300px !important;">
<tr>
<td>
<table width="2" align="left" cellpadding="0" cellspacing="0" border="0" class="hide" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#ffffff;font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Trebuchet MS', sans-serif;font-size:14px;">
<tr>
<td height="5" valign="middle" style="color:#808080;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;line-height:15px;" mc:edit="preheader"></td>
</tr>
</table>
<table width="100%" align="right" cellpadding="0" cellspacing="0" border="0" class="preheader" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#ffffff;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:14px;text-align:left;">
<!-- preheader -->
<tr>
<td height="30" valign="middle" style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;color:#808080;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;line-height:15px;"> <b>Look forward to Spring with these hot new styles!</b>
<br> Can't see images? <span style="color:#808080; text-decoration:none;">View this in your browser</span>.</td>
</tr>
<!-- end preheader -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<tr>
<td align="center">
<table bgcolor="#ffffff" width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" class="width320">
<tr>
<td height="20" width="100%" colspan="3"></td>
</tr>
<!-- spacing -->
<tr>
<td width="2" style="color:#ffffff;font-family:'Gotham A', 'Gotham B', Helvetica, Arial, sans-serif;font-size:14px;" valign="middle" align="center">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" class="width280">
<!-- logo -->
<tr>
<td align="center" mc:edit="logo"> <img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/eee1454a-c0ce-4029-8047-8a13eb4811c3.gif" width="240" border="0" style="max-width:600px;" class="width280" alt="Vionic®">
</td>
</tr>
<!-- end logo -->
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- header nav -->
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" style="height:50px;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;color:#ffffff;">
<tr>
<td width="37" class="hide"></td>
<td align="center" width="525" class="nav-block">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="height:25px;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-color:#ffffff;" bgcolor="#000000" class="width320nav">
<tr>
<td align="center" style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-family:'MrsEavesOT-Roman', 'times new roman', serif;color:#ffffff !important;padding:10px 0;" class="nav-block"><span style="color:#ffffff; text-decoration:none;">SHOP WOMEN</span>
</td>
<td class="hide"> </td>
<td class="nav-block show" width="1" bgcolor="#FFFFFF" style="font-size:0px;line-height:0px;display:none;height:0px;width:0px;max-height:0px;max-width:0px;"></td>
<td align="center" style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-family:'MrsEavesOT-Roman', 'times new roman', serif;color:#ffffff !important;padding:10px 0;" class="nav-block"><span style="color:#ffffff; text-decoration:none;">SHOP MEN</span>
</td>
<td class="hide"> </td>
<td class="hide" width="1" bgcolor="#FFFFFF" style="font-size:0px;line-height:0px;display:none;height:0px;width:0px;max-height:0px;max-width:0px;"></td>
<td align="center" style="mso-line-height-rule:exactly;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;font-family:'MrsEavesOT-Roman', 'times new roman', serif;color:#ffffff !important;" class="hide"><span style="color:#ffffff; text-decoration:none;">SUPPORTIVE TECHNOLOGY</span>
</td>
</tr>
</table>
</td>
<td width="37" class="hide"></td>
</tr>
</table>
<!-- end header nav -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /header wrapper -->
<!-- body wrapper -->
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;"><!-- table-layout:fixed;
--> <tr>
<td align="center">
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;min-width:300px !important;" bgcolor="#ffffff" class="width320">
<!-- full-width copy -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<p style="margin:25px auto 0px;padding:0;font-family:'SackersGothicStd-Medium', sans-serif;font-size:22px;line-height:140%;letter-spacing:1px;color:#000000;text-align:center;text-transform:uppercase;font-weight:500;width:95%;">Step out in subtle chic</p>
<p style="margin:0px auto 15px;padding:0;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:14px;font-style:normal !important;line-height:150%;letter-spacing:1px;color:#000000;text-align:center;width:76%;">Available in bright colours and warm neutrals, our new sandals go everywhere you do, from sunrise to sunset.</p>
</td>
</tr>
<!-- end full-width copy -->
<!-- full-width cta -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320nav" align="center" border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td align="center" style="color:#ffffff;padding:15px 0 0;text-align:center;" mc:edit="herbutton">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:200px;min-width:200px;" width="200">
<tbody>
<tr>
<td align="center" style="max-width:300px;display:block !important;background-color:#ffffff;border:1px solid #000000;padding:10px;font-family:'SackersGothicStd-Medium', sans-serif;font-size:12px;font-weight:500;line-height:105%;letter-spacing:1px;text-align:center;">SHOP SANDALS
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!-- end button -->
</td>
</tr>
<!-- three-column content -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center">
<img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/4f936c5d-aec4-407b-bc0e-a6b668abc01f.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Coming Soon: Lorne">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center">
<img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/95cd618b-6e44-4879-9f3b-fad394664080.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Kirra">
<!-- <p style="margin:10px auto;padding:0;font-family:'MrsEavesOT-Italic', 'times new roman', serif;font-size:12px;line-height:120%;letter-spacing:1px;color:#000000;text-align:center;"><a href="https://vionicshoes.ca/products/kirrasandal" style="font-size:12px;color:#ff4621;text-decoration:none;"><span style="font-size: 12px; color: #ff4621; text-decoration:none">
<i>NEW! <span style="color: #000">Kirra</span>
</i></span></a>
</p>-->
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center">
<img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/ecc64309-c40e-407d-af58-62b95e975d2b.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Catalina">
</td>
</tr>
</table>
</td>
</tr>
<!-- end three-column content -->
<!--
<tr>
<td height="10" colspan="2">
</td>
</tr>
-->
<!-- end spacer -->
<!-- Full width image-->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="96%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/0f605e1b-bdfc-43fb-9736-c9774b41cc78.jpg" style="max-width: 96%; width: 588px; margin: auto; padding: 0" alt="Bella">
</td>
</tr>
</table>
</td>
</tr>
<!-- three-column content -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/218d016f-850b-4484-be39-812c898b9de2.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Bella">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/a9f43d2c-aaeb-4128-906c-22c2ec0e7f13.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Bella">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/4cf6b46c-208b-4497-bca1-44c3c6418808.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Bella">
</td>
</tr>
</table>
</td>
</tr>
<!-- end three-column content -->
<!-- three-column content -->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/2d57acb7-f623-4f49-90ab-0250e704a248.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Midi Perf">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/b885ec53-341d-4018-8e73-f097c3ec682a.jpg" style="max-width: 196px; margin: auto; padding: 0" width="195" alt="Joey">
</td>
</tr>
</table>
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="32%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/7bc1b19f-f704-458a-8869-9c20b5b2f4dd.jpg" style="max-width: 196px; margin: auto; padding: 0" width="196" alt="Edie">
</td>
</tr>
</table>
</td>
</tr>
<!-- end three-column content -->
<!-- Full width image-->
<tr>
<td colspan="2" style="min-width:300px !important;">
<table class="width320" align="left" border="0" cellpadding="0" cellspacing="0" width="96%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/9a07d8b5-7e12-4540-b882-007774b799bd.jpg" style="max-width: 96%; width: 588px; margin: auto; padding: 0" alt="Bella">
</td>
</tr>
</table>
</td>
</tr>
<!-- <td height="30" colspan="2">
</td>-->
<!-- end spacer -->
</table>
</td>
</tr>
</table>
<!-- /body wrapper -->
<!-- footer wrapper -->
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;table-layout:fixed;">
<tr>
<td align="center">
<table width="600" bgcolor="#373131" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;text-align:center;" class="width320">
<tr>
<td colspan="2" class="width320">
<table width="600" bgcolor="#000000" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#444444;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;text-align:center;" class="width320">
<tr>
<td height="20" width="100%"></td>
</tr>
<!-- spacing -->
<!-- footer nav 1 -->
<tr align="center">
<td>
<table align="center" width="320" border="0" cellpadding="0" cellspacing="0" style="color:#ffffff;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:12px;">
<tr>
<td align="center"><span class="block"><span style="color:#ffffff; text-decoration:none;">30-DAY WEAR TEST</span> | <span style="color:#ffffff; text-decoration:none;">FIND A STORE</span></span>
</td>
</tr>
</table>
</td>
</tr>
<!-- end footer nav 1 -->
<tr>
<td height="5" width="100%"></td>
</tr>
<!-- spacing -->
<!-- footer nav 2 -->
<tr>
<td width="100%">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" class="width320nav">
<tr>
<td align="center" style="color:#ffffff;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;text-align:center;"><span class="block"><span style="color:#ffffff; text-decoration:none;">FAQ</span> | <span style="color:#ffffff; text-decoration:none;">CONTACT US</span> | <span style="color:#ffffff; text-decoration:none;">UNSUBSCRIBE</span></span>
</td>
</tr>
</table>
</td>
</tr>
<!-- end footer nav 2 -->
<!-- social -->
<tr>
<td width="100%" class="width320">
<div align="center" mc:edit="socialicons" style="margin:10px auto;padding:0;">
<img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/4f0797d7-defb-47de-a41d-7f5da63c3274.png" width="20" border="0" title="Facebook" alt="4f0797d7-defb-47de-a41d-7f5da63c3274.png"> <img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/b94436f2-347d-4781-bcfa-7f51c0e7460f.png" width="20" border="0" title="Instagram" alt="b94436f2-347d-4781-bcfa-7f51c0e7460f.png"> <img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/4d973ac0-a4a5-42a4-963d-7deddc0b127f.png" width="20" border="0" title="Twitter" alt="4d973ac0-a4a5-42a4-963d-7deddc0b127f.png"> <img src="https://gallery.mailchimp.com/f65fdf760c91701e37252f426/images/1b8863d9-8cce-46f3-8fce-aeb3281581b6.png" width="20" border="0" title="Youtube" alt="1b8863d9-8cce-46f3-8fce-aeb3281581b6.png">
</div>
</td>
</tr>
<!-- end social -->
<tr>
<td height="10" width="100%"></td>
</tr>
<!-- spacing -->
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="600" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#444444;font-family:gothamy, 'helvetica neue', helvetica, arial, sans-serif;font-size:10px;text-align:center;" class="width320">
<!-- company info -->
<tr align="center">
<td width="600" align="center">
<br><span style="color:#000000">© *|CURRENT_YEAR|* *|LIST:COMPANY|*. All rights reserved.</span>
<br><span style="color:#000000; text-decoration:none;">*|HTML:LIST_ADDRESS_HTML|*</span>
</td>
</tr>
<!-- end company info -->
<tr>
<td height="20" bgcolor="#ffffff"></td>
</tr>
<!--spacer -->
</table>
</td>
</tr>
</table>
<!-- /footer wrapper -->
<!-- gmail ios fix -->
<div style="display:none !important;white-space:nowrap;font:15px courier;color:#ffffff;"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </div>
</body>
I managed to fix a few things but you will have to work on it more. The easy fixes are:
The image with lady and 30 day wear test didnt have a width on the img tag. Outlook doesnt like retina images so always use image widths for those that will extend beyond your template width.
Lady image fix:
<table class="width320" align="center" border="0" cellpadding="0" cellspacing="0" width="96%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/0f605e1b-bdfc-43fb-9736-c9774b41cc78.jpg" style="max-width: 96%; width: 588px; margin: auto; padding: 0; display:block;" alt="Bella" width="588">
</td>
</tr>
</table>
Bottom image fixed:
<table class="width320" align="center" border="0" cellpadding="0" cellspacing="0" width="96%">
<tr>
<td align="center"><img border="0" class="width320" src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/9a07d8b5-7e12-4540-b882-007774b799bd.jpg" style="max-width: 96%; width: 588px; margin: auto; padding: 0; display:block;" alt="Bella" width="588">
</td>
</tr>
</table>
Things to note:
You are missing display blocks on images
Once all above fixes are placed in there are white lines between images, you will need to see the images are right sizes and resized the right way to eliminate the annoying lines.
Full fixed code of email can be found here.
Hope this is the answer you were after.
I am working on an e-mail template that includes 2 links to a website and an e-mail address. They are both of varying widths and have it setup so that they're both beside each other and centred down the middle.
Recently ran into a problem when testing with Outlook and saw that the boxes were not centred and rather pushed to the left and right.
Here are some screenshots of what is happening:
Browser / Other E-mail Clients:
Outlook / Word Templating Engine:
The Code:
<td style="padding-bottom:0px; padding-left:10px; padding-right:10px; padding-top:22px; " align="center">
<table class="contact_links_container" border="0" cellspacing="0" cellpadding="0" width="580" align="center" style="margin:auto; ">
<tr>
<td align="center">
<div class="templateEdit" id="contact_links">
<table class="contact_button_container" style="margin: auto;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<a href="http://www.domain.com">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" height="20" align="center" valign="middle">
<a href="http://www.domain.com/">
<img src="/images/icn_globe.png" border="0" alt="" width="18" height="18" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="http://www.domain.com/">www.domain.com</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
<table class="contact_button_container" style="margin: auto;" cellspacing="0" cellpadding="0" align="right">
<tbody>
<tr>
<td style="width: 10px;" width="10"> </td>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 10px 20px; border: 1px solid #c3c6c6; border-radius: 3px;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-right: 10px;" align="center" valign="middle">
<a href="mailto:newaccounts#domain.com">
<img src="images/icn_grey_mail.png" border="0" alt="" width="21" height="20" />
</a>
</td>
<td style="font-family: Verdana, Geneva, sans-serif; font-size: 15px;" align="left" valign="middle"><a style="color: #7f7f7f; text-decoration: none;" href="mailto:apisupport#domain.com">Email</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 10px;" width="10"> </td>
</tr>
<tr>
<td style="height: 20px;" colspan="3" height="20"> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
Does anyone have any ideas on how I can format it so that it works appears in Outlook as it does in the 1st image?
Specify the width for div and td wherever needed. It should work, outlook mail client will set the element width to 100% with reference to body if not specified.
I am designing the email newsletter template .
I created two buttons left and right side equally but it is not fit equal horizontal .
Here is html my code.
the output shows correctly in gmail but the out look not supported.
<tr>
<td width="540" valign="top">
<table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;">
<font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px; font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;"><a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"><font color="white"><span style="display:block;"><b>GET A QUICK QUOTE</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I want align equally in both side and need to support the outlook mail
Wrap your code in a table and put the two tables containing the buttons in two separate td.
Here is the code sample and fiddle
<table>
<tr>
<td width="540" valign="top">
<table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;">
<font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px; font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank">
<font size="1" face="Arial">
<span style="font-size:12px;">
<font color="white">
<span style="display:block;">
<b>GET A QUICK QUOTE</b>
</span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
Add float:left in both your <table> tags and it will do the trick.
replace your code with mine
<tr>
<td width="540" valign="top">
<table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;float:left; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;">
<font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse;float:left; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px; font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;"><a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"><font color="white"><span style="display:block;"><b>GET A QUICK QUOTE</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>