Having issue addressing the spacing issue that sometimes ocurrs when reverse stacking. The only environment where said spacing persists in, that I've seen, is OL'13.

I've read through and attempted to apply a few fixes including, EoA's fix that attempts to drown out the space using table background colors and cell borders. However, given the responsive need for this feature the guide does not include the fix when using ghost tables.

If you have access, Litmus' builder will display what's explained above. Any insights on the matter would be great.

Thanks!


    <!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">
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <title></title>
    <style type="text/css">
    body {
        Margin: 0;
        padding: 0;
        min-width: 100%;
        background-color: #e0e0e0;
    }
    a.disable-link {
        pointer-events: none;
        cursor: text;
        text-decoration:none;
    }
    img {-ms-interpolation-mode:bicubic;}

    p {Margin:0;padding:0;}

    table {
        border-spacing: 0;
        font-family: sans-serif;
        color: #333333;
    }
    td {
        padding: 0;
    }
    img {
        border: 0;
    }
    .wrapper {
        width: 100%;
        table-layout: fixed;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    .webkit {
        max-width: 600px;
        margin:0 auto;
    }
    .outer {
    Margin: 0 auto;
        width: 100%;
        max-width: 600px;
    }
    .full-width-image img {
        width: 100%;
        max-width: 600px;
        height: auto;
    }
    .inner {padding-left:30px;padding-right:30px;}
    /*Two column layout*/
    .two-column {
    text-align: center;
        font-size: 0;
    }
    .two-column .column {
    width: 100%;
        max-width: 300px;
        display: inline-block;
        vertical-align: top;
    }

    @media only screen and (max-device-width: 480px) {
    a[class="disable-link"] {
        pointer-events: auto !important;
        cursor: auto !important;
        color:#0093d0 !important;
        text-decoration:underline !important;
    }
    }
        @media screen and (max-width: 400px) {
    .two-column .column,
        .three-column .column {
            max-width: 100% !important;
        }


    }

    </style>
    <!--[if (gte mso 9)|(IE)]>
        <style type="text/css">
            table {border-collapse: collapse;}
        </style>
        <![endif]-->
    <!--[if gte mso 9]>
    <xml>
     <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
     </o:OfficeDocumentSettings>
    </xml><![endif]-->
    </head>
    <body style="Margin: 0;padding: 0;min-width: 100%;background-color: #e0e0e0;">
    <center class="wrapper" style="background-color:#e0e0e0;width: 100%;table-layout: fixed;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;margin:0 auto;">
    <div class="webkit" style="max-width: 600px;margin:0 auto;">
      <!--[if (gte mso 9)|(IE)]>

      <table valign="top" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
      <tr>
      <td valign="top">
      <![endif]-->


      <!-- BODY -->
      <table class="outer" bgcolor="#ffffff" align="center" valign="top" border="0" cellpadding="0" cellspacing="0" style="Margin:0 auto;width:100%;max-width: 600px;table-layout:fixed;background-color:#ffffff;">
          <tr>
            <td class="one-column mktEditable" id="body" valign="top">

              <table width="100%" valign="top" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">

                <tr>
                  <td valign="top" align="left">
                    <table width="100%" valign="top" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                      <tr>
                        <td class="two-column" dir="rtl" style="text-align:left;font-size:0;padding:20px 30px 20px 30px;">
                        <!--[if (gte mso 9)|(IE)]>
                        <table width="100%" valign="top" border="0" cellpadding="0" cellspacing="0" dir="rtl" style="width:540px;border-collapse:collapse;">
                        <tr>
                        <td width="150" valign="top" align="left" style="width:150px;table-layout:fixed;">
                        <![endif]-->
                          <div bgcolor="#ffffff" class="column logo-evault" style="max-width:150px;width:100%;display: inline-block;vertical-align: top;" dir="ltr">
                            <table width="100%" valign="top" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                              <tr>
                                <td valign="top" width="150"><a href="#" target="_blank" style="text-decoration:none;"><img src="http://placehold.it/150x51" width="150" style="display:block !important;width:100%;max-width:150px;height:auto;" alt="alt text here" /></a></td>
                              </tr>
                            </table>
                          </div>
                        <!--[if (gte mso 9)|(IE)]>
                        </td><td valign="top" style="width:390px;table-layout:fixed;" width="390">
                        <![endif]-->
                          <div class="column" style="max-width:390px;width:100%;display:inline-block;vertical-align: top;" dir="ltr">
                            <table width="100%" align="left" valign="top" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                              <tr>
                                <td class="contents" align="left" style="font-family:arial,helvetica,sans-serif;font-size:18px;line-height:19px;color:#666666;font-weight:bold;padding:17px 0 0 0;">Lorem ipsum dolor amet, 123 test</td>
                              </tr>
                            </table>
                          </div>
                        <!--[if (gte mso 9)|(IE)]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                        </td>
                      </tr>             
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
      </table>
      <!-- END BODY -->
      <!-- FOOTER -->
      <div class="mktEditable" id="email-gray-footer"></div>
      <!-- END FOOTER -->
    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->
    </div>
    </center>
    </body>
    </html>