0

I've been battling literally one final bug fix that only appears in Windows Outlook Desktop, versions 2007, 2010, 2013, and 2016 (plus their respective DPI versions). My left padding keeps getting removed from my td although I use left-padding in other places throughout the email that does not get removed (same class!). I'm hoping you guys can spot something I haven't been able to!

Note: I've stripped out the proprietary stuff and put words in it's place. It's a branding nav bar that contains a varying width image (max width is ~198) and text that should be close (10px padding) away from the image, then a phone # alllll the way to the right

What I have tried:

  • using padding-left instead of shorthand
  • applying the padding to the p tag instead
  • changing p tag from p to span
  • making all widths percentages
  • removing all alignment from tds

And one other note - my "strong" class doesn't seem to be applying properly either. Not sure if it's related or not, but figured worth adding.

    <style type="text/css">
.padding-l-10 {
    padding: 0px 0px 0px 10px !important;
}

.branding {
    font-size: 12px !important;
    line-height: 18px !important;
}
.phone {
  font-size: 12px !important;
}
.branding-bar {
    padding: 12px 20px 12px 20px !important;
}
.branding-bar p {
  vertical-align: bottom !important;
}
.branding-bar img {
  display: block !important;
}
.branding-bar-phone {
  font-size: 14px !important;
  line-height: 13px !important;
  font-weight: 300 !important;
  text-align: right !important;
}

.small-text {
    font-size: 12px !important;
    font-weight: 300 !important;
    line-height: 13px !important;
}

.strong {
    font-weight: 700!important;
    color: #333333;
}

</style>

<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="630">
   <tr>
      <td>
         <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
               <td class="branding-bar" align="center">
                  <table border="0" cellpadding="0" cellspacing="0" width="100%">
                     <tr>
                        <td align="center" valign="top">
                           <table border="0" cellpadding="0" cellspacing="0" width="590">
                              <tr>
                                 <td align="left" class="display-block" valign="bottom" width="20%"><a href="" target="_blank">IMAGE WOULD BE HERE - DYNAMIC WIDTH</a></td>
                                 <td align="left" class="display-block-relation padding-l-10" valign="bottom" width="40%">
                                    <p class="small-text">
                                       THIS WOULD BE THE TOP WORD
                                    </p>
                                    <p class="small-text strong">
                                       THIS WOULD BE THE BOTTOM WORD
                                    </p>
                                 </td>
                                 <td align="right" class="display-none" valign="bottom" width="40%">
                                    <p class="branding-bar-phone">
                                      THIS WOULD BE A PHONE NUMBER
                                    </p>
                                 </td>
                              </tr>
                           </table>
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>
Almost_Ashleigh
  • 524
  • 1
  • 4
  • 24
  • Possible duplicate of [css padding is not working in outlook](https://stackoverflow.com/questions/21474239/css-padding-is-not-working-in-outlook) – APAD1 Mar 14 '18 at 18:06
  • @APAD1 thanks for pointing this out. I see it was posted 4 years ago and was hoping there may be some new knowledge of fixes out there. Also, I'm trying to avoid using empty td's to keep the code clean. – Almost_Ashleigh Mar 14 '18 at 18:10
  • That's the thing about coding e-mails, you have to code like it's 10-15 years ago ;) Unfortunately there's no such thing as "clean code" when it comes to e-mails. Tables and inline css are the norm. – APAD1 Mar 14 '18 at 18:20

0 Answers0