I am having rendering issues in Outlook 2016 & 2013, it's adding about 20px padding to the bottom of my entire 700px container table. I have applied styling of border-collapse: collapse; mso-margin-bottom-alt:0; to all tables which normally fixes this kind of thing but I'm still having the same issues.
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="700" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td bgcolor="#1E1464" align="left"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;" cellpadding="0" cellspacing="0" role="presentation" width="100%" align="center">
<tr>
<td class="col"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr style="display:table; width:100%!important;">
<th class="hide-sm" align="center" width="30px" height="30px" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt;"> </th>
<th class="col full-width-sm" align="center" width="430" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; vertical-align:top;"><table class="full-width-sm" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse;">
<tr>
<td class="hide-sm" style="line-height:1px; font-size:1px; padding-top:15px;"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:15px;"> </td>
</tr>
<tr>
<td class="banner-padding-mobile" style="color:#ffffff; font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:24px; line-height:34px; text-align:center;">Lorem ipsum dolor sit</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:20px;"> </td>
</tr>
<tr>
<td class="banner-padding-mobile" style="color:#ffffff; font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:18px; line-height:28px; text-align:left; font-weight: 300;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi diam nulla, porttitor sagittis erat et, egestas tincidunt arcu. Maecenas ultrices velit velit. Interdum et malesuada fames ac ante ipsum primis.</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:20px;"> </td>
</tr>
<tr>
<td class="align-sm-center" style="line-height: 40px;"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;"cellpadding="0" cellspacing="0" role="presentation" align="center">
<tr>
<th bgcolor="#23a050" style="border-radius: 30px; line-height: 100%; mso-padding-alt: 5px 30px 10px;">Download now ❯</th>
<th class="hide-sm" align="center" height="30px" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; padding-left: 20px;"> </th>
<th class="hide-sm" bgcolor="#ffffff" style="border-radius: 30px; line-height: 100%; mso-padding-alt: 5px 30px 10px;"> More information ❯</th>
</tr>
</table></td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:40px;"> </td>
</tr>
</table></th>
<th class="hide-sm" align="center" width="30px" height="30px" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt;"> </th>
<th class="col" align="center" width="210" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; vertical-align:top;"><table class="full-width-sm" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td class="hide-sm" align="center"><img class="img_full_width" style="display:block; height:auto; outline:none; border:0; margin: 0; text-decoration:none; font-family: 'Campton', arial, sans-serif; font-size:20px; line-height:1.5; color:blue; text-align:center; margin:0;" src="images/banner-image.jpg" width="210" height="auto" alt=""></td>
</tr>
<tr style="display:table; width:100%!important">
<th> <!-- end of desktop view here -->
<!--[if !mso]><!-->
<!--desktop hide starts-->
<div class="show-sm align-sm-center" style="display: none; font-size: 0; max-height: 0; line-height: 0; mso-hide: all; width:0; overflow:hidden;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td style="line-height:1px; font-size:1px; text-align:center; font-weight:600;"><img src="images/hero.jpg" alt="" width="100%" height="auto" class="img_full_width" style="display:block; height:auto; outline:none; border:0; text-decoration:none; font-family: sans-serif; font-size:20px; line-height:1.5; color:white; text-align:center;" /></td>
</tr>
</table>
</div>
<!--desktop hide ends-->
<!--<![endif]--> </th>
</tr>
</table></th>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
Any help would be hugely appreciated!
The main problem seems to come from the last part of your code where you’re hiding content from Outlook (<th> <!-- end of desktop view here -->). You're hiding the content inside the <th>, but that still leaves an empty <th> for Outlook, thus creating this 20px or so empty cell visible. In order to fix this, you can move the conditional comment outside of the entire row you want to hide from Outlook. Here's an example:
<!--[if !mso]><!-->
<!-- end of desktop view here -->
<tr style="display:table; width:100%!important">
<th>
<!--desktop hide starts-->
<div class="show-sm align-sm-center" style="display: none; font-size: 0; max-height: 0; line-height: 0; mso-hide: all; width:0; overflow:hidden;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td style="line-height:1px; font-size:1px; text-align:center; font-weight:600;"><img src="https://www.saga.co.uk/emails/2020/Membership/MEM0159/hero7.jpg" alt="Spirit of Discovery" width="100%" height="auto" class="img_full_width" style="display:block; height:auto; outline:none; border:0; text-decoration:none; font-family: sans-serif; font-size:20px; line-height:1.5; color:white; text-align:center;" /></td>
</tr>
</table>
</div>
</th>
</tr>
<!--desktop hide ends-->
<!--<![endif]-->
Also, in this current form, your code will cause problem in the Outlooks on Windows rendering at 120dpi. Here’s a great ressource explaining how to fix this. In short:
Add the Office namespace declaration: <html xmlns:o="urn:schemas-microsoft-com:office:office">.
Add the Office XML Document Settings:
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
Replace every pixel width attribute in HTML with its equivalent in CSS.
Here's a full code example based on your code:
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8" />
<title>Banner</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body>
<table class="container" cellpadding="0" cellspacing="0" role="presentation" style="width:700px; border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td bgcolor="#1E1464" align="left"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;" cellpadding="0" cellspacing="0" role="presentation" width="100%" align="center">
<tr>
<td class="col"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr style="display:table; width:100%!important;">
<th class="hide-sm" align="center" height="30" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; width:30px;"> </th>
<th class="col full-width-sm" align="center" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; vertical-align:top; width:430px;"><table class="full-width-sm" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse;">
<tr>
<td class="hide-sm" style="line-height:1px; font-size:1px; padding-top:15px;"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:15px;"> </td>
</tr>
<tr>
<td class="banner-padding-mobile" style="color:#ffffff; font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:24px; line-height:34px; text-align:center;">Lorem ipsum dolor sit</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:20px;"> </td>
</tr>
<tr>
<td class="banner-padding-mobile" style="color:#ffffff; font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:18px; line-height:28px; text-align:left; font-weight: 300;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi diam nulla, porttitor sagittis erat et, egestas tincidunt arcu. Maecenas ultrices velit velit. Interdum et malesuada fames ac ante ipsum primis.</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:20px;"> </td>
</tr>
<tr>
<td class="align-sm-center" style="line-height: 40px;"><table style="border-collapse: collapse; mso-margin-bottom-alt:0;"cellpadding="0" cellspacing="0" role="presentation" align="center">
<tr>
<th bgcolor="#23a050" style="border-radius: 30px; line-height: 100%; mso-padding-alt: 5px 30px 10px;">Download now ❯</th>
<th class="hide-sm" align="center" height="30px" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; padding-left: 20px;"> </th>
<th class="hide-sm" bgcolor="#ffffff" style="border-radius: 30px; line-height: 100%; mso-padding-alt: 5px 30px 10px;"> More information ❯</th>
</tr>
</table></td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; padding-top:40px;"> </td>
</tr>
</table></th>
<th class="hide-sm" align="center" height="30px" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; width:30px;"> </th>
<th class="col" align="center" style="font-family: 'Campton', Helvetica, Arial, sans-serif; font-size:16px; line-height: 20pt; vertical-align:top; width:210px;"><table class="full-width-sm" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td class="hide-sm" align="center"><img class="img_full_width" style="display:block; height:auto; outline:none; border:0; margin: 0; text-decoration:none; font-family: 'Campton', arial, sans-serif; font-size:20px; line-height:1.5; color:blue; text-align:center; margin:0;" src="https://www.saga.co.uk/emails/2020/Membership/MEM0159/banner-image.jpg" width="210" height="auto" alt="Saga Possibilities app"></td>
</tr>
<!--[if !mso]><!-->
<tr style="display:table; width:100%!important">
<th> <!-- end of desktop view here -->
<!--desktop hide starts-->
<div class="show-sm align-sm-center" style="display: none; font-size: 0; max-height: 0; line-height: 0; mso-hide: all; width:0; overflow:hidden;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-margin-bottom-alt:0;">
<tr>
<td style="line-height:1px; font-size:1px; text-align:center; font-weight:600;"><img src="https://www.saga.co.uk/emails/2020/Membership/MEM0159/hero7.jpg" alt="Spirit of Discovery" width="100%" height="auto" class="img_full_width" style="display:block; height:auto; outline:none; border:0; text-decoration:none; font-family: sans-serif; font-size:20px; line-height:1.5; color:white; text-align:center;" /></td>
</tr>
</table>
</div>
<!--desktop hide ends-->
</th>
</tr>
<!--<![endif]-->
</table></th>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
And here’s a test link on Email on Acid. (Here's a test of your code for comparison.)
Related
My template looks responsive in Litmus' gmail versions, but is actually isn't, even though I am not using attribute selectors and my webkit fix is on the div tag. I'm also getting a major shift on Outlook 2016. I'm sure the error is minor but I can't find it. Thanks.
Here's my body tag:
CSS:
#media only screen and (min-width:600px) {
.mw35 {
width: 35% !important;
}
.mw65 {
width: 65% !important;
}
}
</style>
HTML:
<!-- STORY 2 CONTENT -->
<tr>
<td><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#FFFFFF;" align="left" border="0">
<tr>
<td style="text-align:left;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px 40px; display: inline-block;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:35%;"> <![endif]-->
<div class="mw35" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:middle;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding: 0px 15px 20px 0px;" align="left"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="left" border="0">
<tr>
<td><img alt="image 2" height="auto" src="https://dummyimage.com/154x121/ecf8fb/fff" style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;" width="308"></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:65%;"> <![endif]-->
<div class="mw65" style="vertical-align:top;display:inline-block;direction:ltr;font-size:16px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:top;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color:#F15B5D;font-family:'Open Sans', arial, sans-serif; text-align:left;"> <span style="margin: 0; font-family:arial,helvetica,sans-serif; color:#333333; font-size:22px; line-height:26px; font-weight:normal;"><b>LOREM IPSUM 2</b></span> </div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color: #727272;font-family:sans-serif;font-size:16px;font-weight:normal;line-height:25.2px;text-align:left;">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:10px 0px 30px 0px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="left" border="0">
<tr>
<td style="border:1px solid rgba(230,236,238,1);border-radius:4px;color:#FFFFFF;cursor:auto;padding:10px 20px;" align="center" valign="middle" bgcolor="#FFFFFF"><span>CTA</span></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></td>
</tr>
</table>
</div></td>
</tr>
Here are screen shots of how it lays correctly vs the entire body shift. Also, the responsive fix which appears correctly.
correct display
shifted
responsive display
Regarding Gmail, I'm guessing you might be using a mobile Gmail app (iOS or Android) with a non Gmail account (like an Outlook.com email address for example). This specific case, often referred to as GANGA (for Gmail Apps with Non Gmail Accounts), doesn't support <style> tags and thus media queries (as reported on Can I email). In order to get your email to work in GANGA, you must code it with a fluid/hybrid or mobile first approach so that the layout can work even without media queries.
As for Outlook, I'm not sure what major shift you're referring to. One thing I see though is that your code is not ready for Outlook at 120 dpi rendering, and that could be part of your issue. As documented here, to get a good rendering in Outlook at 120dpi, you need to:
Add the xmlns:o="urn:schemas-microsoft-com:office:office" namespace in your <html> tag.
Add the <!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--> declaration in your <head>.
Use the width property in CSS instead of the width attribute in HTML.
Use the width attribute on image elements with the desired width for Outlook. (Here your image is set at width="308" while it should only be displayed at 154px in Outlook on desktop. So it should be width="154" instead).
Here’s a full email code I adjusted and tests.
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Need help for webkit bug fix in responsive email</title>
<style>
#media only screen and (min-width:600px) {
.mw35 {
width: 35% !important;
}
.mw65 {
width: 65% !important;
}
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:600px; margin:0 auto;" align="center">
<!-- STORY 2 CONTENT -->
<tr>
<td><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#FFFFFF;" align="left" border="0">
<tr>
<td style="text-align:left;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px 40px; display: inline-block;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;"> <tr> <td style="vertical-align:top;width:35%;"> <![endif]-->
<div class="mw35" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:middle;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding: 0px 15px 20px 0px;" align="left"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="left" border="0">
<tr>
<td><img alt="image 2" height="auto" src="https://dummyimage.com/154x121/ecf8fb/fff" style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;" width="154"></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:65%;"> <![endif]-->
<div class="mw65" style="vertical-align:top;display:inline-block;direction:ltr;font-size:16px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:top;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color:#F15B5D;font-family:'Open Sans', arial, sans-serif; text-align:left;"> <span style="margin: 0; font-family:arial,helvetica,sans-serif; color:#333333; font-size:22px; line-height:26px; font-weight:normal;"><b>LOREM IPSUM 2</b></span> </div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color: #727272;font-family:sans-serif;font-size:16px;font-weight:normal;line-height:25.2px;text-align:left;">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:10px 0px 30px 0px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="left" border="0">
<tr>
<td style="border:1px solid rgba(230,236,238,1);border-radius:4px;color:#FFFFFF;cursor:auto;padding:10px 20px;" align="center" valign="middle" bgcolor="#FFFFFF"><span>CTA</span></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>
You can find a test run for this code on Email on Acid here.
I've been trying to make our emails more accessible but NVDA seems to have trouble reading text when there's a background image in Outlook. Could it be because of the VML or something else? NVDA can read it when I view in browser, but I feel like I shouldn't rely on that being used. I haven't been able to find a lot about email accessibility best practices, and nothing that discusses this issue I'm having. I'm fairly new to this so any suggestions would be appreciated.
Thanks!
<table role="presentation" class="container_module" id="heroWCTA" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="margin:0; vertical-align:top;">
<tbody>
<tr>
<td align="center" valign="top" width="100%" background="https://via.placeholder.com/660x220" style=" background-image:url(https://via.placeholder.com/660x220); background-repeat:no-repeat; background-size:cover; background-position: center center; margin: 0;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px; height:210px;">
<v:fill type="frame" src="https://via.placeholder.com/660x220" />
<v:textbox inset="10,10,10,10" v-text-anchor="top">
<![endif]-->
<table role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top;">
<tbody>
<tr>
<td class="padding_top_60 padding_right_110 padding_bottom_12 padding_left_17 text_18_18" width="100%" valign="top" align="left" style="color:#ffffff; vertical-align:top; padding: 30px 15px 15px 32px; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height: 22px; -webkit-text-size-adjust:none;">
<div id="heroText">
<h2 class="text_18_18" style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height: 22px; color:#ffffff; margin:0;"><b>Lorem ipsum<br> dolor sit amet,<br> coctetuer adipiscing<br> elit</b></h2>
</div> </td>
</tr>
<tr>
<td class="padding_bottom_60" width="100%" align="left" style="padding-bottom: 25px; margin: 0;">
<table role="presentation" border="0" width="100%" cellpadding="0" cellspacing="0" style="vertical-align:top; margin: 0; padding: 0;">
<tbody>
<tr>
<td class="content_17" width="32" align="left" style="padding: 0; margin: 0;font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 10px; width: 32px;"> </td>
<td align="left" style="padding: 0; margin: 0;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top; margin: 0; padding: 0;">
<tbody>
<tr>
<td class="height_22" height="28" width="100%" align="center" border="2" valign="middle" style=" vertical-align:middle; font-family: Arial, Helvetica, sans-serif; color:#ffffff; font-size:12px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border: 2px solid #00aeef; background-color:#00aeef;">
<!--[if mso]>
<table>
<tr>
<td style="background-color: #00aeef; padding: 7px 10px; text-align: center;"><![endif]--><a class="height_22" role="button" href=
"http://go.na.panasonic.com/SU0K1G00F0005J01H00G00O" style="
text-decoration:none; color:#ffffff; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height: 12px; vertical-align:middle; height:28px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; padding:7px 10px; "
><b>Learn More</b></a><br>
<!--[if mso]></td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table> </td>
<td class="content_17" width="32" align="right" style="padding: 0; margin: 0;font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 10px; width: 32px;"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]--> </td>
</tr>
</tbody>
</table>
When sending the layout to Outlook 2016 it takes the multi-column table section and shrinks the width of the left and right (possibly increasing the width of the spacer center column too).
Have tried to add a spacer image at the bottom of each column to keep the width, but don't want those to have to load/soak up the file size. depending on the number of rows I add.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml "
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name=”x-apple-disable-message-reformatting”>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { max-width: 100% !important; height:auto !important; border: 0; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { margin: 0 !important; padding: 0 !important; width: 100% !important; min-width:100% !important;}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
*[class=table]
{
max-width: 600px !important;
width: 100% !important;
border-collapse: collapse !important;
height:auto !important; }
/* MOBILE STYLES */
#media only screen and (max-device-width: 480px)
{
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
width: 100% !important;
max-width: 100% !important;
border-collapse: collapse !important;
height:auto !important;
}
.mobile-wrapper {
width: 100% !important;
max-width: 100% !important;
height:auto !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
.img-social {
width: 15% !important;
max-width: 50% !important;
height: auto !important;
}
*[class=stack]
{
display: block !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
#actual-table { border-collapse: collapse; }
#actual-table td {
width: 20%;
padding: 10px;
vertical-align: top;
}
#actual-table td:nth-child(even) {
background: #ccc;
}
#actual-table td:nth-child(odd) {
background: #eee;
}
</style>
</head>
<body style="text-align:center; margin: 0 !important; padding: 0; !important;" >
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" width="100%" background="bg.jpg" style="background-size: cover; padding: 0;background: #999999;" bgcolor="#999999" class="mobile-wrapper">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" >
<tr>
<td align="center" valign="top" style="padding: 0;">
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="left" valign="top" style="padding-top:8px;padding-bottom:5px;">
<font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="1">View in browser</font> <font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="1">Link to Forward To A Friend</font> </td></tr>
</table></td></tr></table>
<table cellpadding="0" cellspacing="0" width="100%"><tr><td> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="padding:0;">
<img src="" class="banner" style="display:block;" />
</td>
</tr>
</table></td></tr></table>
</td>
</tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="background-color: #999999;" bgcolor="#999999" class="mobile-wrapper">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td class="stack" align="center" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#F4BB8A;" bgcolor="#F4BB8A">
<font face="Times New Roman, Times, serif" color="#000000" font="" size="4"><strong>Add A Headline To Announce Your Main Topic</strong></font></td></tr>
<tr>
<td class="stack" align="left" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#F6F7F3;" bgcolor="#F6F7F3"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="3">
Add a brief message. If readers need to know more than you can fit here, add a link to an outside resource that covers the rest.<br />
THE MAXIMUM SIZE FOR IMAGES IN THIS SECTION IS 580px WIDE.
</font>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</table></td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="background-color: #999999;" bgcolor="#999999" >
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" >
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" id="actual-table">
<tr>
<td align="left" valign="top" width="280" style="background-color: #999999;" bgcolor="#999999" >
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%; height:100%;background-color: #999999;" bgcolor="#999999" class="mobile-wrapper">
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="280" style="max-width:280px;" class="max-width">
<tbody>
<tr>
<td align="center" valign="top" style="padding-bottom:10px;background-color:#999999;" bgcolor="#999999"> </td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#393B63;" bgcolor="#393B63">
<font face="Times New Roman, Times, serif" color="#F6F7F3" size="3"><strong>I ♥ Email</strong></font></td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#F6F7F3;" bgcolor="#F6F7F3"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" size="2">Include article copy. Be sure to make the articles short and concise. People tend to only read a couple of paragraphs at a time.<br />
<br />
THE MAXIMUM SIZE FOR IMAGES IN THIS SECTION IS 260px WIDE.<br />
<br />
When editing sections from copied mailings, delete old messages by clicking the red X, move messages up or down in order of importance by clicking the blue up and down arrows and add new sections by clicking the add section here (green '+' icon).</font></td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</tbody>
</table></td></tr></table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="20" style="padding:0; font-size: 1px;"> </td>
<td align="right" valign="top" width="280" style="background-color: #999999;" bgcolor="#999999" >
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%; height:100%;background-color: #999999;" bgcolor="#999999" class="mobile-wrapper">
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="280" style="max-width:280px;" class="max-width">
<tbody>
<tr>
<td align="center" valign="top" style="padding-bottom:10px;background-color:#999999;" bgcolor="#999999"> </td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#393B63;" bgcolor="#393B63">
<font face="Times New Roman, Times, serif" color="#F6F7F3" size="2"><strong>I ♥ Email</strong></font></td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#F6F7F3;" bgcolor="#F6F7F3"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" size="2">Include article copy. Be sure to make the articles short and concise. </font>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</tbody>
</table></td></tr></table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#999999" style="background: #999999;padding: 0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td class="stack" align="left" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#F4BB8A;" bgcolor="#F4BB8A">
<font face="Times New Roman, Times, serif" color="#000000" font="" size="3"><strong>Design emails people love</strong></font></td></tr>
<tr>
<td class="stack" align="!3BODYFONTALIGN!" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#FFFFFF;" bgcolor="#FFFFFF"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="2">Include article copy. Be sure to make the articles short and concise. People tend to only read a couple of paragraphs at a time.<br /><br />
THE MAXIMUM SIZE FOR IMAGES IN THIS SECTION IS 580px WIDE.
</font>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</table>
</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#0F0D35" style="background: #0F0D35;padding: 0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td class="stack" align="center" valign="top" style="padding:10px;background-color:#0F0D35;" bgcolor="#0F0D35">
<font face="Arial, Verdana, Helvetica, sans-serif" color="#FFFFFF" font="" size="2"></font></td>
</tr>
</table></td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="background-color: #0F0D35;" bgcolor="#0F0D35" class="mobile-wrapper">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table width="600" border="0" cellspacing="5" cellpadding="5"> <tr> <td colspan="3"> <hr align="left" width="100%" noshade> <p> <font size="-2" face="Verdana, Arial, Helvetica, sans-serif" color= "#FFFFFF"><strong>Generated by</strong></font> <img src= "https://images.marketvolt.com/mv_gif_transparent.gif" width="60" height="55" hspace="4" vspace="0" border="0" align="middle"><font size="-2" face= "Verdana, Arial, Helvetica, sans-serif" color= "#FFFFFF"><strong>Learn more</strong></font> </p> </td> </tr></table><img width="1" height="1" src="https://images.marketvolt.com/space.gif">
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
I have a web version that's displaying fine. When I send a test email, it shows unwanted spacing between the images. I tried changing the the padding and margin , but nothing's working. Why is it doing that?
https://jsfiddle.net/tantalizea/r49oqbjj/
CSS:
a,
body,
div,
img,
span,
table,
td,
tr {
margin: 0;
padding: 0;
border: 0;
}
a {
color: #231F20;
font-weight: bold;
text-decoration: none
}
a[href^="x-apple-data-detectors:"] {
color: inherit;
text-decoration: inherit;
}
area {
outline: none
}
body {
font: normal 100% Arial, Helvetica, sans-serif;
background: #FFF;
color: #231F20
}
img {
border: none;
width: 100%;
height: auto
}
.container {
width: 600px;
margin: 0 auto;
max-width: 600px
}
#preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: #FFFFFF;
color: transparent;
height: 0;
width: 0;
font-size: 0px
}
.desktop {
display: table !important;
margin: 0 auto !important;
}
tr.desktop {
display: table-row !important
}
td.desktop {
display: table-cell !important
}
img.desktop {
display: inline !important
}
.mobile {
display: none !important
}
.break {
display: inline !important
}
#media screen and (max-width: 600px) {
.container {
width: 97.5%
}
.desktop,
tr.desktop,
td.desktop,
img.desktop {
display: none !important
}
.mobile {
display: table !important
}
tr.mobile {
display: table-row !important
}
td.mobile2 {
display: table !important;
width: 100%;
text-align: center !important
}
td.mobile {
display: table-cell !important
}
.break {
display: none !important
}
.hidden {
display: none !important
}
.no-border {
border: none !important
}
.smaller {
font-size: 200% !important
}
.smaller2 {
font-size: 100% !important
}
.center {
text-align: center !important
}
.margin {
margin: 0 auto
}
.image {
width: 100px !important
}
.width-100 {
width: 100% !important
}
}
HTML:
<body style="background:#FFF; color:#858585">
<div id="preheader" style="display:none; visibility:hidden; opacity:0; color:#878787; color:transparent; height:0; width:0; font-size:0px;">Tuesday, March 7, 2017 | 9840 International Drive, Orlando, Florida | Booth #613</div>
<!-- /div#preheader -->
<div class="container" style="margin:0 auto; max-width:600px">
<table cellpadding="0" cellspacing="0" border="0" align="center" class="container" style="margin:0 auto; max-width:600px">
<tr class="bronto">
<td height="20"></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585">Is this email not displaying correctly? Try the web version.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td height="20"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td width="35" class="desktop"> </td>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td align="left" valign="bottom" width="76%"><span style="font:normal 300% Times, 'Times New Roman', serif; color:#56565a; line-height:100%" class="smaller"><strong><em>You're Invited!</em></strong></span></td>
<td style="text-align:right" width="24%"><img src="http://www.kravetcontract.com/email_blasts/tipin.png" alt="KK" style="max-width:144px; width:100%" /></td>
</tr>
</table>
</td>
<td width="35" class="desktop"> </td>
</tr>
<!--<tr class="mobile">
<td class="mobile">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%" class="mobile">
<tr class="mobile">
<td height="20" class="mobile"></td>
</tr>
<tr class="mobile">
<td align="center" class="mobile"><span style="font:normal 200% Times, 'Times New Roman', serif; color:#57565b;" class="mobile"><strong><em>You're Invited!</em></strong></span></td>
</tr>
</table>
</td>
</tr>-->
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/top.jpg" alt="Top" style="max-width:600px" /></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td align="left" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/left.jpg" alt="Left" style="max-width:78px" /></td>
<td align="center" valign="middle" bgcolor="#FFFFFF">
<table cellpadding="0" cellspacing="20" align="center" border="0" width="100%">
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1px">PLEASE JOIN</span></td>
</tr>
<tr>
<td align="center"><img src="http://www.kravetcontract.com/email_blasts/BDNY2016/logo.png" alt="kravetcontract" style="max-width:280px" /></td>
</tr>
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">AT THIS YEAR'S</span></td>
</tr>
<tr>
<td align="center"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/newh_logo_2.png" alt="NEWH" style="max-width:192px" /></td>
</tr>
<tr>
<td align="center" valign="middle"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011;letter-spacing:1.5px">MARCH 7, 2017 AT 12PM-6PM<br />
BOOTH #613</span></td>
</tr>
<tr>
<td align="center" valign="middle"><span style="font:normal 81.25% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">9840 International Drive<br />
Orlando, Florida</span></td>
</tr>
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; line-height:21px; letter-spacing:1.5px">We look forward to seeing you.</span></td>
</tr>
</table>
</td>
<td align="right" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/right.jpg" alt="Right" style="max-width:78px" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/bottom.jpg" alt="Bottom" style="max-width:600px" /></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#56565a">
<table cellpadding="0" cellspacing="5" align="center" border="0">
<tr>
<td bgcolor="#56565a">GET DIRECTIONS <strong style="font-family:Arial, sans-serif;">►</strong></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
<tr>
<td><img src="http://www.kravet.com/style-spotlight/one-family.gif" alt="One Family. Ninety-Eight Years." border="0" style="border:none; width:100%" /></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center"><span style="font:normal 150% Helvetica, Arial, sans-serif; color:#858585"><span style="font:normal 87.5%/4mm Helvetica, Arial, sans-serif; color:#858585">#</span>kravetinc</span>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0">
<tr>
<td>
<img src="http://www.kravet.com/style-spotlight/instagram.gif" alt="Instagram" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/facebook.gif" alt="Facebook" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/pinterest.gif" alt="Pinterest" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/twitter.gif" alt="Twitter" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/houzz.gif" alt="Houzz" border="0" style="border:none; width:100%; max-width:50px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center">e-designtrade.com</td>
</tr>
<tr>
<td height="40"></td>
</tr>
<tr>
<td align="center"><span style="font:normal 75% Helvetica, Arial, sans-serif; color:#858585">KRAVET® INC | CONTACT US | PRIVACY POLICY</span></td>
</tr>
<tr>
<td align="center"><span style="font:bold 75% Helvetica, Arial, sans-serif; color:#858585">Exclusively Available Through Interior Designers</span></td>
</tr>
<tr>
<td height="40"></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">This email was sent to %%!contact_email%% by %%!account_organization%%</span></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">%%!account_address1%% | %%!account_city%%, %%!account_state%% %%!account_zip%%</span></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585">Forward to a friend | Manage Preferences | Unsubscribe</span></td>
</tr>
<tr>
<td height="40"></td>
</tr>
</table>
<!-- /table.container -->
</div>
<!-- /div.container -->
</body>
Try using display block on all images.
style="display:block;"
This is a must have on all images.
Cheers
To be quite honest, I actually love the way it looks haha.
But I believe your issue is the img. It's based on the width. The aspect ratio makes the height smaller then the size of the table row. This is probably not the best way to fix it, but after going through a bunch of css changes I couldn't get it to work any other way:
On the specific images. Set the img style to be moved 4 px down:
transform: translateY(4px);
Bottom image, 4 px up:
transform: translateY(-4px);
Ex:
Bottom:
<img src="http://www.kravetcontract.com/email_blasts/newh-2017/bottom.jpg" alt="Bottom" style="max-width:600px;transform: translateY(-4px);">
Should look like this:
Email isn’t scaling to screen size in outlook. Testing with email on acid and it’s working for other clients, can anyone give me advice?
Code is below. Would appreciate some advice on what needs fixing as this is my first attempt to code an email.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>See what our customers say</title>
<style type="text/css">
</style>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
</head>
<body bgcolor="#ebebeb" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; border-collapse: collapse !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
<tbody>
<tr>
<td width="640">
<table align="center" border="0" cass="container" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td bgcolor="#ffffff" border="0" class="logo" valign="top" width="100%" height="auto" align="center" style="width: 100%; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;" pardot-data=""><img alt="Pay4Later" border="0" src="http://go.pardot.com/l/73452/2015-08-18/23htmw/73452/32364/testimonials.jpg" style="display: block; width: 100%;" width="100%"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" class="headline" style="padding: 15px 20px 5px 30px; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; width: 100%;" valign="top">
<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; line-height: 32px; color: #414141;">DON'T JUST TAKE<br>
OUR WORD FOR IT</h1>
<p><i>See what our customers say</i></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 0px 60px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: rgb(65, 65, 65); width: 100%; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial;" valign="top" pardot-data="">There’s no doubt that offering finance to your customers is a guaranteed way to dramatically increase your sales. Pay4Later takes digital lending further by giving you market leading acceptance rates and maximising order values, but don’t just take our word for it. See what our customers say...</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" pardot-data="" style="padding: 20px 0px; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial; width: 100%;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4y5/73452/34330/cotswold.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-02/26hr5h/73452/35206/mango.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yt/73452/34340/oak_furniture.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yf/73452/34336/gymkit_uk.jpg" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img height="3" src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png" style="width: 544px; height: 3px;" width="544"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yp/73452/34338/wongs.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-07/26x153/73452/35954/home_leisure.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding-top: 30px;" width="640">
<table align="center" bgcolor="#f9f6f2" style="border:2px solid #000000;" width="200">
<tbody>
<tr>
<td align="center" style="padding:10px 6px;" class=""><span style="font-family: 'Roboto', Helvetica, Arial, sans-serif !important;">SIGNUP NOW</span> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141;" valign="top">To learn more about how your business can benefit from Pay4Later’s finance solutions you can reply to this email or call us on 0800 021 7150.</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #414141;" valign="top">
<p><span>Kind Regards,</span></p>
<p><span>The Pay4Later Team</span></p>
<p><span>0800 021 7150</span></p>
</td>
</tr>
<tr>
<td width="640">
<table align="center" bgcolor="#0092ce" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" bgcolor="#0092ce" class="content" style="padding: 30px 100px 10px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #ffffff;" valign="top" width="100%">
<p><span>Pay4Later Ltd</span></p>
<p><span>33 St Mary Axe</span></p>
<p><span>London, EC3A 8AG</span></p>
</td>
<td class=""><img alt="Twitter" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hq9t/73452/35156/twitter.png" style="width: 30px; height: 30px; border-width: 0px; border-style: solid;" title="Twitter" width="30"> </td>
<td class=""><img alt="Google" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqr7/73452/35184/linkedIn.png" style="width: 30px; height: 30px; padding-left: 15px; border-width: 0px; border-style: solid;" title="Google" width="30"> </td>
<td class=""><img alt="RSS" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqrp/73452/35186/mail.png" style="width: 30px; height: 30px; padding-left: 15px; padding-top: 7px; padding-right: 20px; border-width: 0px; border-style: solid;" title="RSS" width="30"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ebebeb" class="content" style="padding: 10px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 14px; line-height:22px; color: #414141;" valign="top">If you don't want to receive more mails, just click here</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
If by "scale to screen" you mean that the image is so much larger in all Outlook, this is because Outlook tends to size images based on the actual size of the hosted image, not your declarations - especially when used as percentages. Your best bet is to resize the hosted image to 640px wide and Outlook should behave properly.
There are many different theories on getting around this, but the only definitive way I have found is to make Outlook behave is to resize the images to the scale you want them to be.
HTML attributes (as in, width="640") can be used to resize images in Outlook. If width is defined, height will be rescaled accordingly. This works in all Outlook versions. However, the image will not be fluid (100% width) with this fix in place. It doesn't look like that's an issue for your email, as it doesn't contain any responsive code. If you use media queries, a style with !important should be able to overwrite this width.
Here is a test showing how this will look: https://www.emailonacid.com/app/acidtest/display/summary/r9Sdqkr0J2kICtkrwc0RUkioQ0uX2yID1BEMvfLUEUczL/shared
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>See what our customers say</title>
<style type="text/css">
</style>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
<body bgcolor="#ebebeb" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; border-collapse: collapse !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
<tbody>
<tr>
<td width="640">
<table align="center" border="0" class="container" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td bgcolor="#ffffff" border="0" class="logo" valign="top" width="100%" height="auto" align="center" style="width: 100%; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;" pardot-data=""><a href="#">
<img alt="Pay4Later" border="0" src="http://go.pardot.com/l/73452/2015-08-18/23htmw/73452/32364/testimonials.jpg" style="display: block; width: 640px;" width="640">
</a></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" class="headline" style="padding: 15px 20px 5px 30px; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; width: 100%;" valign="top">
<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; line-height: 32px; color: #414141;">DON'T JUST TAKE<br>
OUR WORD FOR IT</h1>
<p><i>See what our customers say</i></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 0px 60px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: rgb(65, 65, 65); width: 100%; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial;" valign="top" pardot-data="">There’s no doubt that offering finance to your customers is a guaranteed way to dramatically increase your sales. Pay4Later takes digital lending further by giving you market leading acceptance rates and maximising order values, but don’t just take our word for it. See what our customers say...</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" pardot-data="" style="padding: 20px 0px; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial; width: 100%;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4y5/73452/34330/cotswold.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-02/26hr5h/73452/35206/mango.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yt/73452/34340/oak_furniture.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yf/73452/34336/gymkit_uk.jpg" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img height="3" src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png" style="width: 544px; height: 3px;" width="544"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yp/73452/34338/wongs.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-07/26x153/73452/35954/home_leisure.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding-top: 30px;" width="640">
<table align="center" bgcolor="#f9f6f2" style="border:2px solid #000000;" width="200">
<tbody>
<tr>
<td align="center" style="padding:10px 6px;" class=""><span style="font-family: 'Roboto', Helvetica, Arial, sans-serif !important;">SIGNUP NOW</span> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141;" valign="top">To learn more about how your business can benefit from Pay4Later’s finance solutions you can reply to this email or call us on 0800 021 7150.</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #414141;" valign="top">
<p><span>Kind Regards,</span></p>
<p><span>The Pay4Later Team</span></p>
<p><span>0800 021 7150</span></p>
</td>
</tr>
<tr>
<td width="640">
<table align="center" bgcolor="#0092ce" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" bgcolor="#0092ce" class="content" style="padding: 30px 100px 10px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #ffffff;" valign="top" width="100%">
<p><span>Pay4Later Ltd</span></p>
<p><span>33 St Mary Axe</span></p>
<p><span>London, EC3A 8AG</span></p>
</td>
<td class=""><img alt="Twitter" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hq9t/73452/35156/twitter.png" style="width: 30px; height: 30px; border-width: 0px; border-style: solid;" title="Twitter" width="30"> </td>
<td class=""><img alt="Google" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqr7/73452/35184/linkedIn.png" style="width: 30px; height: 30px; padding-left: 15px; border-width: 0px; border-style: solid;" title="Google" width="30"> </td>
<td class=""><img alt="RSS" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqrp/73452/35186/mail.png" style="width: 30px; height: 30px; padding-left: 15px; padding-top: 7px; padding-right: 20px; border-width: 0px; border-style: solid;" title="RSS" width="30"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ebebeb" class="content" style="padding: 10px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 14px; line-height:22px; color: #414141;" valign="top">If you don't want to receive more mails, just click here</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
As far as I know there really isn't any kind of scaling for emails in outlook, they take a fixed size and then keep it that way. As has been mentioned you can specify widths in attributes, and this will force that content to the size you specify.
One fairly popular way is starting with a fixed size and then setting elements of the email to have a % max width; this means that outlook will be happy with the fixed widths, and clients which support % widths will also be able to display yor content in a responsive way.