The css padding is not working in outlook
I changed to following and it worked for me
<tr>
<td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
<table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">
<td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
<td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
</table>
</td>
</tr>
Update based on Bsalex request what has actually changed.
I replaced span tag
<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>
with table and td tags as following
<table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">
<td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
<td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
</table>
HTML Email - button has no padding on outlook
In Outlook you cannot change an inline element such as <a> to a block element (display:block). So it ignores padding, margins and such because these are block element styles.
Therefore, for cross-email compatibility, you either need to put padding on the <td> (which doesn't extend the clickable part, but only makes it look like the button is bigger, or, you can apply a hack as described by Mark Robbins.
Solution 1: (Easiest) TD button
<td align="center" bgcolor="#ffffff"
class="out-main-button-padding"
style="border-radius: 50px; padding: 15px 35px 15px 35px;
border-radius: 50px; background-color: #ffffff;
border: 3px solid #061539;
mso-border-alt: 8px solid #061539;
mso-padding-alt: 4px; font-family:
NIVEaBrandType-Bold, 'Arial Black', Gadget, Arial,
Helvetica, sans-serif; font-size: 18px; font-weight: bold;
line-height: 22px; mso-text-raise: 4px;"
valign="top">
<a class="out-main-button-a"
href="https://nivea.com" style="display: block;
color: #061539; text-decoration: none;"
target="_blank" title="">
<span style="color: #061539; text-decoration: none;
background-color: #ffffff">INVITA A TUS AMIGOS
</span>
</a>
</td>
All I've done is move the block-level styles from the <a> to the <td>. You can still leave the display:block on the <a> to make the clickable area bigger for those email clients that support this.
Solution 2: Mark Robbin's A button
<a href="https://example.com/" style="background: #333; border: 2px solid #f00; text-decoration: none; padding: 15px 25px; color: #fff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#333"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt" hidden> </i><![endif]--><span style="mso-text-raise:15pt;">Link Text</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%" hidden> </i><![endif]-->
</a>
Change the left and right padding by changing the letter-spacing value (on the left and right of the link text).
Change the bottom padding by changing the mso-text-raise value in the <span>.
Change the top padding by changing the mso-text-raise value in the <i>.
(Detailed explanation on https://www.goodemailcode.com/email-code/link-button)
Outlook Windows Email Template Padding Issues
Outlook Windows only accepts padding on <td> elements. For <p>, it will only accept margins.
So for the top one for example you could just change padding to margin in the <p> like so:
<td style="padding: 0 20px 0 20px; text-align: center;">
<p style="font-size: 16px; font-weight: bold; margin: 10px 0 5px 0;">Title / Teitl</p>
</td>
Padding and Margin not working in Responsive Email Template (outlook)
Padding not working for anchor <a> tag in Outlook. So i have used padding for elements in the table..
Here is the code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>A Simple Responsive HTML Email</title> <style type="text/css"> .content {max-width: 900px !important;} .dynamic_container{width: 31.33% !important;border:1px solid #ccc;margin:1%;} a{padding: 10px 8px !important;} @media (min-width:651px) and (max-width: 992px){ .content {max-width: 600px !important;} .dynamic_container{width: 47% !important;margin:1.5%;} a{padding: 10px 0 !important;} } @media (min-width:0px) and (max-width: 650px){ .content {max-width: 300px !important;} .dynamic_container{width: 96% !important;border:1px solid #ccc;margin:2%;} } </style> </head> <body bgcolor="#f6f8f1" style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; min-width: 100% !important;"> <!--[if (gte mso 9)|(IE)]> <style> .dynamic_container{width: 32.6% !important;border:1px solid #ccc;} .button{padding:10px !important;} </style> <table width="100%" align="center" border="0"> <tr> <td> <![endif]--> <table class="content" align="center" width="100%"> <tr> <td class="header" bgcolor="#c7d8a7" style="padding: 40px 30px 20px 30px;"> <table width="100" align="left" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="70" style="padding: 0px 20px 20px 0px;"> <img src="assets/images/i4cfinancial_Logo.png" border="0" alt="Sample Image" style="height: auto;" /> </td> </tr> </table> </td> </tr> <tr> <td class="innerpadding borderbottom" style="border-bottom: 1px solid #f2eeed;"> <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;"> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;"> Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside. </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td> </tr> <tr class="grid"> <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" /> </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td> </tr> <tr class="grid"> <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;"> </td> </tr> <tr> <td style="padding: 20px 0px 0px 0px;"> <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle"> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a> </td> </tr> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;"> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;"> Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside. </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td> </tr> <tr class="grid"> <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" /> </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td> </tr> <tr class="grid"> <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;"> </td> </tr> <tr> <td style="padding: 20px 0px 0px 0px;"> <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle"> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a> </td> </tr> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;"> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;"> Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside. </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td> </tr> <tr class="grid"> <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" /> </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td> </tr> <tr class="grid"> <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;"> </td> </tr> <tr> <td style="padding: 20px 0px 0px 0px;"> <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle"> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a> </td> </tr> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;"> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;"> Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside. </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td> </tr> <tr class="grid"> <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" /> </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td> </tr> <tr class="grid"> <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;"> </td> </tr> <tr> <td style="padding: 20px 0px 0px 0px;"> <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle"> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a> </td> </tr> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;"> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;"> Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside. </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td> </tr> <tr class="grid"> <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" /> </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td> </tr> <tr class="grid"> <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;"> </td> </tr> <tr> <td style="padding: 20px 0px 0px 0px;"> <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle"> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a> </td> </tr> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;"> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;"> Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside. </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td> </tr> <tr class="grid"> <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" /> </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td> </tr> <tr class="grid"> <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;"> </td> </tr> <tr> <td style="padding: 20px 0px 0px 0px;"> <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle"> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a> </td> </tr> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td class="footer" bgcolor="#44525f" style="padding: 20px 30px 15px 30px;"> <table width="100%" border="0"> <tr> <td align="center" class="footercopy" style="font-family: sans-serif; font-size: 14px; color: #ffffff;">© Someone, somewhere 2013<br/><a href="#" class="unsubscribe" style="display: block; margin-top: 20px; padding: 10px 50px; border-radius: 5px; text-decoration: none; font-weight: bold;"><font color="#ffffff">Unsubscribe</font></a> </td> </tr> <tr> <td align="center" style="padding: 20px 0 0 0;"> <table border="0" width="100%"> <tr> <td width="50%" align="right" style="padding: 0 10px 0 10px;"> <a href="http://www.facebook.com/"> <img src="assets/images/fb.png" width="37" height="37" alt="Facebook" border="0" /> </a> </td> <td width="50%" align="left" style="padding: 0 10px 0 10px;"> <a href="http://www.twitter.com/"> <img src="assets/images/twit.png" width="37" height="37" alt="Twitter" border="0" /> </a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </body></html>Email template Outlook margin and padding not working try to separate social media icons
The code that Outlook is attempting to interpret is the following, just for the start:
<tr style="height: 0;">
<center>
<table ...>
<td ...>
<td>
If you wanted Outlook to just look at the tables, you should put all of it in Outlook-conditionals, not just some of it.
Non-Outlook environments do not need tables.
If you've written the whole thing in tables, like most of us, I'd just do the following:
<tr>
<td style="width:100%;text-align:center;">
<center style="width:100%;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img></td> //fill in the details here on these
<td><img></td> //put some padding here on the <td> if you want a gap between the socials. Or on any of these <td>s.
<td><img></td>
</tr>
</table>
</center>
</td>
</tr>
No need for Outlook conditional code because you want the same effect for everything.
padding not respected in outlook on button
Outlook's support for the box model is... sketchy. Try this code:
Related Topics
Preventing Canvas Clear When Resizing Window
Combining Two or More Canvas Elements with Some Sort of Blending
How to Get CSS to Select Id That Begins with a String (Not in JavaScript)
Responsive Tables, The Smart Way
HTML Embed Autoplay="False", But Still Plays Automatically
Autoplay Audio on Mobile Safari
Multiple Submit Buttons on HTML Form - Designate One Button as Default
How to Get a Textarea to Stretch to Fit Its Content Without Using PHP or JavaScript
How to Define a Dynamic Mixin or Function Name in Sass
Alignment of Content Vertically in Adjacent Flexbox Containers
Can You Tab Through All Radio Buttons
Which Dom Elements Can Be Child of Tr
How to Horizontal & Vertical Center a Div
Bootstrap Navbar Link Color Won't Change
How to Make Bootstrap Carousel Image Responsive