htmlcssoutlookhtml-emailoutlook-2010

Email template Outlook margin and padding not working try to separate social media icons

I'm trying to align center these icons but some outlook emails do not show the right styling some other scenarios work fine but these ones are not working as expected I've been trying several solutions but do not have any luck hope anyone can help with this.

Outlook 2016enter image description here

Outlook 2010enter image description here

Outlook 2019enter image description here

This is my code for that section

    <tr style="height: 0;">
            <!--[if mso]>
<center>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<![endif]-->
            <td class="socialTableData"
                style="border-collapse: collapse; mso-line-height-rule: exactly; padding-left: 100px; padding-right: 100px; margin-left: auto; margin-right: auto; text-align: center; padding-bottom: 16px; align-items: center;">
                <!--[if mso]>
<td>
<![endif]--><a href="https://twitter.com/" style="color: #DA3743; text-decoration: none;"><img height="20"
                        width="20" mari="mari" style="height: 20px !important; width: 20px !important;"
                        src="img"
                        alt="" class="socialImg" /></a>
                <!--[if mso]>
</td>
<![endif]-->
                <!--[if mso]>
<td >
<![endif]--><a href="https://twitter.com/" style="color: #DA3743; text-decoration: none;"><img height="20"
                        width="20"
                        style="height: 20px !important; width: 20px !important; padding-left: 32px; padding-right: 32px;"
                        id="facebook"
                        src="img"
                        alt="" class="socialImgMid" /></a>
                <!--[if mso]>
</td>
<![endif]-->
                <!--[if mso]>
<td>
<![endif]--><a href="https://twitter.com/" style="color: #DA3743; text-decoration: none;"><img height="20"
                        width="20" style="height: 20px !important; width: 20px !important;"
                        src="imge"
                        alt="" class="socialImg" /></a>
                <!--[if mso]>
</td>
<![endif]-->
            </td>
            <!--[if mso]>
</table>
</center>
<![endif]-->
        </tr>
        <!--[if mso]>
<center>
<![endif]-->

Solution

  • 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.