Table width in Internet Explorer /Microsoft Outlook - css

I'm working on a mailing and I'm having problems with setting a width in a table element in IE/ Outlook.
I have tried several things which I've seen in other questions but none of them seems to work.
The code is this, it includes some solutions I've tried. The div which wraps the table is used for other styling necessities.
<!doctype html>
<html lang=en>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
*{
margin:0;
padding:0;
}
body{
box-sizing: border-box;
}
table{
border-collapse: collapse;
border-spacing: 10px 5px;
}
</style>
</head>
<body>
<div style="margin:0 auto; width:1000px;">
<!--[if mso]>
<center>
<table><tr><td width="700">
<![endif]-->
<table cellpading="0" cellspacing="0" width=700 style="margin:0 auto; width: 700px">
<!--A lot of <TR> -->
</table>
<!--[if mso]>
</td></tr></table>
</center>
![endif]-->
<div>
</body>
</html>


Here is a example of what we use:
<table style="background-color: #f7f7f7;" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td valign="top" align="center">
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tbody>
<< DROP HERE YOUR TEMPLATE>>
</tbody>
</table>
</td>
</tr>
</tbody>
I hope this is the solution.


Your code is almost good, you missed closing the endif for the second one. Try the below code and see how it goes.
<!doctype html>
<html lang=en>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
*{
margin:0;
padding:0;
}
body{
box-sizing: border-box;
}
table{
border-collapse: collapse;
border-spacing: 10px 5px;
}
</style>
</head>
<body>
<div style="margin:0 auto; width:1000px;">
<!--[if mso]>
<center>
<table><tr><td width="700">
<![endif]-->
<table cellpading="0" cellspacing="0" width=700 style="margin:0 auto; width: 700px">
<tr><td>
<!--A lot of <TR> -->
Content here
</td></tr>
</table>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
<div>
</body>
</html>

Related

Outlook 2016 - first line with default line-height, mso-line-height-rule doesn't work

I am trying to develop an HTML e-mail for Outlook 2016 and I have problem with line-height. There are many threads regarding this problem but nothing helped to me. I have few "lines" (td cells) with 1px in my table displayed w/o problems, the problem is first line of the message.
I tried to add inline style mso-line-height-rule: exactly in combination with line-height: 1px or 0px or 0 or 1. In combination with font-size: 0px or 1px or 0 or 1.
Nothing worked. So I placed some another element before the problematic one and the problem just moved to "new" element, disappeared from original one.
The version of Outlook 2016 is 1808 (build 10730.20344), I have feeling that before some time it worked normally, without tricks.
<style>
td {
padding: 0px;
margin: 0px;
border: 0px;
}
table {
border-collapse: collapse;
border-spacing: 0px;
font-family: "Arial", Arial, Helvetica, sans-serif;
font-size: 14px;
}
td#line {
background-color: #f0f0f0;
}
</style>
<body style="margin: 0px;">
<table cellpadding="0" cellspacing="0" style="table-layout:fixed;">
<tr height="1" style="mso-line-height-rule: exactly; line-height: 1px; font-size: 0px;">
<td height="1" id="line" colspan="5" style="mso-line-height-rule: exactly; line-height: 1px; font-size: 0px; "></td>
</tr>
<tr>
...
Thanks!

Finally I found some workaround solution... below you can find simplyfied example.
Option 1 (hidden <div> with some text, w/o mso-hide: all style):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
table {
border-collapse: collapse;
border-spacing: 0px;
}
</style>
</head>
<body>
<div style="overflow:hidden; color:transparent; visibility:hidden; width:0; font-size:0; opacity:0; height:0; line-height:0;">Some not visible text</div>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr height="1">
<td colspan="3" style="background-color: red;"></td>
</tr>
<tr>
<td width="1" style="background-color: blue;"></td>
<td width="160" style="background-color: yellow;">Some very nice text!<br />With 2 lines!</td>
<td width="1" style="background-color: blue;"></td>
</tr>
<tr height="1">
<td colspan="3" style="background-color: red;"></td>
</tr>
</tbody>
</table>
</body>
</html>
It works relatively good, but if you click somewhere/select something in the message, your first visible item (e.g. <td>) will disappear.
Option 2 (hidden <div> with some text, w/ mso-hide: all style, conditionally shown additional row with zero height and with transparent backround):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
table {
border-collapse: collapse;
border-spacing: 0px;
}
</style>
</head>
<body>
<div style="overflow:hidden; color:transparent; visibility:hidden; mso-hide:all; width:0; font-size:0; opacity:0; height:0; line-height:0;">Some not visible text</div>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<!--[if gte mso 9]>
<tr height="0">
<td colspan="3" style="background-color: transparent;"></td>
</tr>
<![endif]-->
<tr height="1">
<td colspan="3" style="background-color: red;"></td>
</tr>
<tr>
<td width="1" style="background-color: blue;"></td>
<td width="160" style="background-color: yellow;">Some very nice text!<br />With 2 lines!</td>
<td width="1" style="background-color: blue;"></td>
</tr>
<tr height="1">
<td colspan="3" style="background-color: red;"></td>
</tr>
</tbody>
</table>
</body>
</html>
Then it's relatively unbreakable.
Only bad thing is that Outlook shows warning about possibility of wrong rendering. Most probably caused by <div> tag usage.
EDIT: warning is caused by height: 0 and width: 0 in <div> style. I think it's possible to remove these properties.
Enjoy!

How do I get the href to format properly in the responsive class?

I know I'm missing something simple, but working on a responsive email and cannot get the links to format properly with css
I've tried creating a class and assigning it, the same thing. Tried spans etc. I've never been too bright with CSS. Thanks.
I have been at it for a little bit trying different types that I could find and am probably just going a little crazy since I don't primarily code and I'm working on a responsive email layout.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style type="text/css">
#media only screen and (max-width: 480px){
#templateColumns{
width:100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
}
.columnImage{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent .leftColumnContent a {
font-family: Lato, Arial, Helvetica, sans-serif;
text-decoration: none;
}
img.header {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="800" id="templateColumns">
<tr>
<td align="center" valign="top" width="50%" class="templateColumnContainer"><!-- Deal 1-->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" width="380" style="max-width:380px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="leftColumnContent">
Sengled Pulse LED Smart Bulb with JBL Bluetooth Speaker (2-Pack)
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer"><!-- Deal 2 -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" width="380" style="max-width:380px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<a href="#" >Apple iPad 3 Retina Bundle with Case and Screen Protector (32GB)</a>
</td>
</tr>
</table>
</td>
</tr>
<body>
</body>
</html>

You'll need a rule that looks like:
a {
color: preferred-link-color;
}
This will affect all <a> elements in your document.
And since it's an email you may want to inline the styles to boot! I believe gmail/Android clients strip out <style> tags. There are services for this, so you can do it efficiently.

Buttons text shift to left in Outlook when using VML

Im using VML in order to have background imgs in Outlook windows but when I use this code it causes my buttons to shift like 20px to the left in Outlook Windows.
Ive tried text-align and align centering everywhere with not much luck.
Removing the VML fixes issue but then removed bg img on Outlook.
Screenshot of issue:
Any input is appreciated.
Screencast of compared issue: https://screencast.com/t/7vAj6509FyH
<!DOCTYPE HTML>
<html lang="en">
<!-- Javelin v1.01 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>EVERY SEASON STARTS HERE</title>
<style type="text/css">
/* inject:css/mail.min.css */
a,body,span,table,td{-ms-text-size-adjust:100%}body,div[style*="margin: 16px 0;"]{margin:0!important}a,body,span,table,td{-webkit-text-size-adjust:100%}table,td{mso-table-lspace:0;mso-table-rspace:0}img{-ms-interpolation-mode:bicubic;border:0;display:block;outline:0;text-decoration:none}.a6S,.mobileOnly,img.g-img+div{display:none!important}a:link,span.MsoHyperlink{mso-style-priority:100!important;color:inherit!important;color:inherit}a:visited{color:inherit!important;color:inherit}table{border:0;border-collapse:collapse!important;border-color:inherit}body{font-size:16px;padding:0!important;width:100%!important}.aBn,.unstyle-auto-detected-links *,[x-apple-data-detectors]{border-bottom:0!important;cursor:default!important;color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important}a:link,span.MsoHyperlink{color:inherit;text-decoration:none}a span,span.yshortcuts{color:#FFF}span.yshortcuts:active,span.yshortcuts:focus,span.yshortcuts:hover{text-decoration:none;color:#FFF;background-color:none;border:none}#MessageViewBody a{color:inherit;text-decoration:none;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit}.a6S{opacity:.01!important}.h1,.h2,.h3,h1,h2,h3{font-family:DINPro-Medium,Arial,sans-serif!important;font-weight:700}.img,.img-headline{color:#FFF;font-family:sans-serif!important;text-align:center}.h1,h1{font-size:40px;line-height:44px}.h2,h2{font-size:30px;line-height:34px}h3{font-size:24px;line-height:28px}.h3,.img{font-size:18px}.h3{margin:0 0 8px}.img{background-color:#006554;line-height:22px}.img-headline{font-size:36px;font-weight:900;line-height:42px}p{/*!important;*/margin-bottom:1em}.contact{color:#FFF!important;text-decoration:none!important}.webkit{max-width:640px;margin:0 auto}#media all and (min-width:640px){.left{text-align:left;text-align:left!important}.right{text-align:right;text-align:right!important}}#media all and (max-width:639px){.mobile,.mobile_triggerproduct{display:inline-block!important}.border-container,.container,.mobile,.mobile_triggerproduct,.wrapper{padding:0!important;width:100%!important}.border-container,.container,.img,.img-headline,.mobile,.wrapper,table[class=button]{width:100%!important}.wrapper{margin:0!important}.border-container{max-width:95%}.mobile_triggerproduct{max-width:639px!important}.img,.img-headline{height:auto!important}[class=mobileOff]{width:0!important;display:none!important}[class*=mobileOn]{display:block!important;max-height:none!important}.center{text-align:center!important}.mobileOnly{display:block!important}.hideOnMobile{display:none!important}.left,.right{text-align:center;text-align:center!important}}#media all and (max-width:480px){.h1,h1{font-size:28px!important;line-height:32px!important}.h2,h2{font-size:24px!important;line-height:28px!important}.h3,h3{font-size:18px!important;line-height:22px!important}}
/* endinject */
/* inject:css/fonts.min.css */
#media screen{#font-face{font-family:DINPro-Light;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.svg#DINPro-Light) format('svg');font-weight:400;font-style:normal}#font-face{font-family:DINPro-Medium;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.svg#DINPro-Medium) format('svg');font-weight:400;font-style:normal}#font-face{font-family:DINPro-Black;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.svg#DINPro-Black) format('svg');font-weight:400;font-style:normal}}
/* endinject */
/* inject:css/brand.min.css */
.freeShip,body{font-weight:400}.flashPromo,.flashPromoSmall{mso-line-height-rule:exactly}.navbar a,a{text-decoration:none}a{color:inherit;display:block;max-width:100%;text-decoration:none text-align: center}body{font-family:Arial,sans-serif;margin:0!important;padding:0;background-color:#FFF;-ms-text-size-adjust:100%}.bonus-product-details{color:#F5F5F5;font-size:12px;line-height:18px;margin:0 10px}.disclaimerDark,.disclaimerLight{font-family:Arial,sans-serif;font-size:10px;font-size:10px!important;letter-spacing:.05rem;line-height:14px;mso-line-height-rule:exactly}.disclaimerDark{color:#FFF!important}.disclaimerLight{color:#212121!important}.freeShip{font-family:DINPro-Medium,Arial,sans-serif!important;font-size:14px}.headline,.logo{font-weight:900}.headline{font-family:DINPro-Black,Arial,sans-serif!important;font-size:36px;line-height:40px;margin:20px 0 0;padding:0 20px}.logo{background-color:#006554;color:#FAFAFA;font-family:sans-serif;font-size:24px;line-height:36px;text-align:center;max-width:175px;width:117px;height:auto}.navbar,.navbar .column-nav,.navbar a{text-align:center!important}.navbar{font-size:0}.navbar .column-nav{display:inline-block;max-width:320px;vertical-align:top;width:auto}.navbar a{display:inline-block;font-family:DINPro-Medium,Arial,sans-serif!important;font-size:14px;padding:16px 0;text-transform:uppercase}.footer,.preheader{font-family:Arial,sans-serif}.preheader{color:#707070;Margin-top:4px;Margin-bottom:0;Margin-left:10px;Margin-right:10px;font-size:11px}.one-column p{margin-bottom:14px!important;margin-top:14px!important}.flashPromoSmall{font-family:DINPro-Light,Arial,sans-serif!important;font-size:32px;font-weight:300;line-height:32px}.flashPromo{font-family:DINPro-Black,Arial,sans-serif!important;font-weight:900;line-height:40px}.pricing,.productInfo{font-family:Arial,sans-serif!important;margin:0}.pricing{font-weight:700;line-height:24px;font-size:14px}.productInfo{font-size:16px;font-weight:500}.productNameTab{font-size:18px;line-height:20px;margin:4px 20px;padding:0}.productPriceTab{font-size:16px;line-height:18px margin: 4px 0;padding:0}.productPromo{font-family:DINPro-Black,Arial,sans-serif;font-size:28px;font-weight:700;line-height:34px;margin:0 20px;padding:0}.subheadline{font-family:DINPro-Medium,Arial,sans-serif!important;font-size:30px;line-height:34px;font-weight:500;margin:0;padding:0 20px}.text{padding-top:16px}.valueCopy{font-family:DINPro-Medium,Arial,sans-serif!important;font-weight:400!important;margin:0}.welcome{color:#F6992F;font-family:DINPro-Medium,Arial,sans-serif;font-size:26px;margin:0;padding:0}.text{padding:16px 16px 0}.deviceWidth{width:33%;max-width:211px!important}.deviceWidth200{width:100%!important;max-width:180px}#media only screen and (max-width:480px){.bonus-product-details{font-size:12px!important;line-height:18px!important}.headline{font-size:40px!important;line-height:44px!important}.subheadline{font-size:24px!important;line-height:28px!important}.productNameTab,.productPriceTab{font-size:90%!important;line-height:95%!important;margin:8px 10px!important}.productPromo{font-size:24px!important;line-height:28px!important}.welcome{font-size:20px!important;line-height:21px!important}}#media only screen and (max-width:639px){.deviceWidth,.deviceWidth200{display:inline-block!important}table[class=button]{width:100%!important}.deviceWidth{width:49%!important;max-width:211px}.deviceWidth200{width:32%!important}}
/* endinject */
</style>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]-->
<!--[if (gte mso 9)|(IE)]><style type="text/css"> table {border-collapse: collapse;} </style> <![endif]-->
</head>
<body style="margin:0; padding:0; background-color:#FFFFFF;">
<!--[if gte mso 10]><style> /* Style Definitions for MSO 2010 */ table.MsoNormalTable, p, span, div, table, tr, td, th, a, h1, h2, h3 { mso-style-priority:99; font-family:"Arial","sans-serif"; } </style><![endif]-->
<center>
<div class="webkit"><!--[if (gte mso 9)|(IE)]><table width="640" align="center"><tr><td><![endif]-->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top" style="margin:0; padding:0;">
<!--# EMAIL BODY CREATIVE #############-->
<!--# Hero w/ Coupon (embedded background – image headline - left-aligned)-->
<table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%; background-position:right top !important; background-size:cover !important;" bgcolor="#006554">
<tr>
<td background="http://dsg.images.harmony.epsilon.com/_phoenix/_dev/codex/img/hero_baseball_bg.jpg" bgcolor="#006554" width="640" align="center" valign="top" style="background-position:right top !important; background-size:cover !important;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block; width:640px; height:790px;" src="http://dsg.images.harmony.epsilon.com/_phoenix/_dev/codex/img/hero_baseball_bg.jpg"/>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block; position: absolute; width:640px; height:790px;">
<v:fill opacity="0%" color="#F8F8F8"/>
<v:textbox inset="20px,0,0,0">
<![endif]-->
<div>
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" >
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 0 16px;">
<table width="600px" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="50%" class="mobile" align="center" valign="top" style="width:50%; padding-right:4px; padding-bottom: 16px !important;">
<!-- button-basic -->
<table class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#F5F5F5; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
<tr>
<td width="100%" height="54" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#212121;">
<a href="http://heroLink.com" target="_blank" style="color:#212121; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:20px; padding-bottom:0px; padding-left:20px; color:#212121;">
SHOP NOW
</span></a>
</td>
</tr>
</table>
<!-- /button-basic -->
</td>
<td width="50%" class="mobile" align="center" valign="top" style="width:50%; padding-left:4px; padding-bottom: 16px !important;">
<!-- button-border -->
<table class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:inherit; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
<tr>
<td width="100%" height="52" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#F5F5F5; border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; mso-padding-alt:0px 18px 0px 18px;">
<a href="http://heroLink.com" target="_blank" style="color:#F5F5F5; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:20px; padding-bottom:0px; padding-left:20px; color:#F5F5F5;">
VIEW IN-STORE COUPON
</span></a>
</td>
</tr>
</table>
<!-- /button-border -->
</td>
</tr>
</table>
</td>
</tr>
<!--[if (gte mso 9)|(IE)]><tr><td height="15" style="font-size:15px; line-height:15px;"> </td></tr><![endif]-->
</table>
<!--spacer--><table><tr><td height="40" style="font-size:40px; line-height:40px;"> </td></tr></table><!--/spacer-->
<p class="disclaimerDark" style="font-family:Arial, sans-serif; Font-size:12px; font-size:12px !important; letter-spacing:normal; line-height:11px; text-align:center; margin:10px 0; padding:0 20px; color:#F5F5F5;">
<!--disclaimer copy-->
Replace this line of text with your disclaimer copy.
</p>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--/END Hero w/ Coupon (embedded background - image headline – left-aligned)-->
<!--/ EMAIL BODY CREATIVE /////////////-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></div>
</center>
</body>
</html>

This is one of my favourite email bugs/issues/caveats.
padding-left does not work in Outlook when inside a VML shape.
A lot of the styles could be removed from your button code. I'd also try adding a fixed width to the .button table. This combined with text-align center on the a parent td should keep the copy centered.
<table align="center" class="button" border="0" cellpadding="0" cellspacing="0" width="150">
<tr>
<td align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#ffffff; padding-top:16px; padding-bottom:16px;">
<a href="http://TabHeroLink.com" target="_blank" style="color:#ffffff; text-decoration:none;">
SHOP THIS DEAL
</a>
</td>
</tr>
</table>
One small thing to note too is your white button is using align="left", pulling it further over. Change that to center

<table align="center" class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#015F81; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; mso-padding-alt:0px 18px 0px 18px;">
You could change the above code to the below code:
<table align="center" class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#015F81; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden;margin:0 20px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; margin:0 18px">

I was able to fix this myself by implementing an outlook ghost table with the table at 640, the td at 600 and both having align="center"

HTML Email Client Border Removal

Ok, so I'm trying to create a simple as you like single column html email template.
The issue that I'm having is that I can not seem to get rid of the white boarder that surrounds the message when I paste the html code into my email client to sent a test message.
I've set the css of the bodyto an inline and this works perfectly when I test in the browser, there is no white boarder or margin....
<body style="margin: 0px; padding: 0px; background-color: #000000" bgcolor="#000000">
....but when I come to paste the code into the mail client (I use Mac Mail as my default) to send a test mail, I keep getting a white boarder all around the message and CAN NOT work out how to get rid of this.
I've looked at an html email that I received with full width background color and tried to work out what that does that I'm not but can't see anything different, so am I just missing something real simple here??
<html>
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
</head>
<body style="margin: 0px; padding: 0px;" bgcolor="000">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrapper" bgcolor="#999999" border-collapse="collapse">
<tr>
<td align="center">
<table width="100%" height="200" bgcolor="#ffffff;" class="respon_table" style="max-width: 650px; padding: 10px;">
<tr>
<td style="background-color: #ffffff;">Email content goes here....</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
https://jsfiddle.net/q16jgdtr/

You've misspelled bgcolor attributes. It should be a valid color.
E. g. bgcolor="#ffffff;" should be bgcolor="#ffffff" -- without a semicolon.
And bgcolor="000" should be bgcolor="#000000".
https://jsfiddle.net/q16jgdtr/3/
https://www.w3.org/TR/html4/index/attributes.html

I have a feeling it's because you missed the following on the table that contains the contents of the email.
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrapper" bgcolor="#999999" border-collapse="collapse">
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="200" bgcolor="#ffffff;" class="respon_table" style="max-width: 650px; padding: 10px;" border-collapse="collapse">
<tr>
<td style="background-color: #ffffff;">Email content goes here....</td>
</tr>
</table>
</td>
</tr>
</table>
I have added border collapse, cellpadding, cellspacing and border to zero. Give the above code a try, hope that's what you are looking for.

Email background image

I would like add background image to mail email. When i test on MailChimp, the preview is good (with inline style and minified).
But if i run test on my mail (Gmail APP and Outlook), i've no background. If i open the mail in browser, my background is show.
I've test with this :
background="http://domaine.com/myimage.jpg"
and
background: url('http://domaine.com/myimage.jpg') !important; // Inline style
No result. Anyone have idea ?

My code for backgrounds in emails after 1,5 years of blood, sweat and tears:
Important to know is that almost everything in this piece of code is important!. From the DOCTYPE, html tag's xml attributes, conditional comments and css in the head,... Just use this as a starting point for your next email.
Important tip:
Use the attr background="" on a td, not on a table or any other element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word">
<head>
<!--[if (!mso)&(!ie)]>These<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>are<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>for<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>outlook<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>live<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>that<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>removes<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>the first<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>10 well-formed<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>conditional comments<!-- --><!--<![endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta property="og:title" content="mytitle" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mytitle</title>
<style type="text/css">
v\:* {
behavior: url(#default#VML);
display: inline-block
}
o\:* {
behavior: url(#default#VML);
display: inline-block
}
w\:* {
behavior: url(#default#VML);
display: inline-block
}
.ExternalClass{
width:100%;
}
table{
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
img{
-ms-interpolation-mode:bicubic;
}
.ReadMsgBody{
width:100%;
}
</style>
</head>
<body width="100%" bgcolor="#cccccc" bordercolor="#cccccc" style="margin:0; padding:0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#cccccc" bordercolor="#cccccc" style="margin:0; padding:0;">
<tr>
<td align="center" background="https://i.stack.imgur.com/LCCB6.jpg" bgcolor="#cccccc" width="100%" height="1000" valign="top" style="background-color:#cccccc;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent: 1000;height:1000px;">
<v:fill type="tile" src="https://i.stack.imgur.com/LCCB6.jpg" color="#cccccc" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<br /><br />
<div>
<!--[if (mso)|(ie)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" height="100%">
<tr>
<td align="center" valign="top" width="600" height="100%">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" height="100%">
<tr>
<td align="center" height="100%" bgcolor="white">
Content of your email goes here, for widths try to use % procent from now if possible. Start again here with a table
<br />
For outlook you need v:rect code and fixed height set in pixels!<br /><br />
If you just want a block inside this 600px wrapper with a background you do it like this:<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;" height="300">
<tr>
<td align="center" height="300" background="http://1-background.com/images/nature/images/wood-background-repeating_1.jpg" bgcolor="#000000" style="color:#fefefe;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:1000px;">
<v:fill type="tile" src="http://1-background.com/images/nature/images/wood-background-repeating_1.jpg" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
Content goes here, for widths try to use % procent from now if possible. (except in v:rect code, use px there) For outlook you need v:rect code and fixed height set in pixels!<br><br>
v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:1000px;<br>
<br /><br /><br />
<br>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
<!--[if (mso)|(ie)]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>

CSS background does not work everywhere for email. Use the HTML background property instead. E.g:
<table background="image.jpg"...

Here is an example of the code that i have been using for quiet sometime now.
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%; max-width:600px;">
<tr>
<td align="center" height="400" background="[IMAGE PATH]" bgcolor="#000000" style="height:400px;color:#fefefe; background-image: url('[IMAGE PATH]'); background: url('[IMAGE PATH]');">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
<v:fill type="tile" src="[IMAGE PATH]" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
Content here<br>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Above example is of a hybrid code. I have added two more background image paths in the style tag for the TD which should cater for Lotus notes (or older email clients) and for Gmail.
Let me know how you go.

Although the background images, we apply, may show at maximum no of email clients, but specifically not at the Outlook. So in order to show the email background at Outlook
You can use the Code snippet given below, which will make the bg image visible at Outlook.
Just select the Td at which you want the background image, then paste the below code there and update the background image path.
<td background="your_background_image_path_here">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style=" border: 0;display: inline-block; width: 600px; height: 100%;"
src="your_background_image_path_here" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style=" border: 0;display: inline-block;position: absolute; width: 600px;
height: 297px;">
<v:fill opacity="0%" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table>
Rest Your Emailer Code Goes Here
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>

Resources