0

SOLVED: Needed to declare a height on the main image that is nested in the table.

QUESTION: I have two tables that I'm trying to stack on top of one another in an html email but am getting a gap between them in Outlook 2016 only. The red box should touch the grey horizontal line. See picture below. All other version of Outlook are good. I've removed cell padding, borders, and spacing from all tables so I'm at a loss on this one. I also have this table aligned top. Any tricks to getting this to work in MSO 2016?

<table align="right" width="190" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; border-collapse:collapse;" bgcolor="#6e7171">
  <tr>
    <td align="center" width="1">
      <!-- margin SPACER-->
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
          <td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
            <img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
          </td>
        </tr>
      </table>
      <!-- /margin SPACER-->
    </td>

    <td align="center" bgcolor "#6e7171" class="hideMobile" width="188" align="left" class="outlookpadding" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
          <td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
            <img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
          </td>
        </tr>
      </table>
      <table class="hideMobile" bgcolor "#6e7171" align="center" width="188" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; border-collapse:collapse; margin: 0 auto;">
        <tr>
          <td align="center">
            <table width="188" cellpadding="0" class="deviceWidth" cellspacing="0" border="0" bgcolor="#ffffff" align="center" style="border-collapse: collapse;">
              <tr>
                <td>
                  <a target="_blank" href="#"><img src="images/laptop.jpg" alt="Using laptop trackpad" width="190" style="display: block; width: 190px; " align="center"></a>
                </td>
              </tr>
              <tr>
                <td class="showMobile hideyahoo" valign="top" align="right" bgcolor="#ffffff" style="display: block; text-align: left; font-size: 14px; line-height: 18px; font-family:Arial, Helvetica, sans-serif;color:#e51b3f; mso-line-height-rule: exactly; padding-right: 10px; padding-left: 10px; padding-top: 18px; font-weight: bold;">Ask the right questions.</td>
              </tr>
              <tr>
                <td class="showMobile hideyahoo" valign="top" align="right" display="block" bgcolor="#ffffff" style="text-align: left; font-size: 13px; line-height: 18px; font-family:Arial, Helvetica, sans-serif;color:#514d4d; mso-line-height-rule: exactly; padding-right: 10px; padding-left: 10px; padding-bottom: 15px; padding-top: 15px; ">Having an honest discussion with your doctor can help you take a more active role in your care. These conversation starters can help you know what to ask.</td>
              </tr>
            </table>
          </td>
          <td width="1">
            <!-- margin -->
            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
              <tr>
                <td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
                  <img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
                </td>
              </tr>
            </table>
            <!-- /margin -->
          </td>
        </tr>
      </table>

      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
          <td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
            <img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table align="right" valign="top" border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849" height="49" width="192" style="padding: 0; height: 49px; margin: 0 auto; border-collapse: collapse; display">
  <tr>
    <td style="padding-left: 10px;" height="44">
      <table valign="top" border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849" height="44" style="border-collapse: collapse;">
        <tr>
          <td border="0" cellspacing="0" cellpadding="0" width="100%" align="center" valign="bottom" style="text-align: left; color: #ffffff; background-color: #ed1849; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; mso-line-height-rule: exactly;"><a href="#" target="_blank" style="color:#ffffff; text-decoration: none; font-weight: normal;">GET QUESTIONS</a></td>
        </tr>
        <tr>
          <td border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849">
            <table border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849">
              <tr>
                <td border="0" cellspacing="0" cellpadding="0" align="center" valign="middle" style="text-align: left; color: #ffffff; background-color: #ed1849; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; mso-line-height-rule: exactly;"><a href="#" target="_blank" style="color:#ffffff; text-decoration: none; font-weight: normal;">FOR YOUR DOCTOR</a></td>
                <td height="11" bgcolor="#ed1849" align="left" valign="middle" style="padding-left: 7px; vertical-align: middle; font-size: 0;"><img valign="middle" width="8" height="11" style=" display: block; width: 8px; height:11px;" src="images/arrow.jpg" alt="arrow"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
OsuDani
  • 88
  • 1
  • 11

1 Answers1

0

Have your tried using conditional comments? For Outlook 2016 it should be something like the following:

<!--[if mso 16]>some outlook 2016 only stuff<![endif]-->
Wolter
  • 143
  • 1
  • 10
  • I have some gte mso 9 conditionals setup but nothing for this specific issue. What would you suggest? – OsuDani Feb 27 '18 at 15:13
  • those conditionals seem to applying to Outlook 2000 [see here](https://litmus.com/community/discussions/388-whats-the-purpose-of-the-gte-mso-9-ie-conditional-comment) – Wolter Feb 27 '18 at 15:15
  • The gte in the conditional should include any Outlook versions from 2000 on. Its Greater Than or Equal to Outlook 2000 - unless I understand that wrong. – OsuDani Feb 27 '18 at 15:21