Z-Layout hinzufügen seltsamen Abstand auf der rechten Seite Outlook 2010 & 13

Question

Ich habe ein seltsames Problem in Outlook mit einem Z-Layout für eine E-Mail. Im Prinzip wird oben auf der Kopie eine zusätzliche Füllung eingefügt, NUR auf der rechten Seite des Layouts. Ich habe versucht, zwischen Rand und Padding zu wechseln und es zu verschiedenen Elementen zu ändern (Versucht es auf dem H6-Tag und auf dem TH-Tag darüber sowie auf der darüber liegenden Tabelle). Alles scheint nur die zusätzlichen Abstände zu verschieben und es verschwindet nie wirklich.

Hier ist, wie es in Outlook 2010 und 2013 sieht: https://www.evernote.com/l/AHEyfSHAvAJAb6LFDbEDYrECrb5NxxzEC_8

hier ein Codepen mit dem vollständigen HTML ist.

unten ist das Snippet der Z-Layout nur:

<!-- ARTICLE 1 
       LAYOUT = COPY > IMAGE 
       TO DUPLICATE SELECT FROM ROW BELOW TO END ARTICLE 1 --> 
        <table class="row row-article" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;"> 
        <tbody> 
         <tr style="padding: 0; text-align: left; vertical-align: top;"> 
         <th class="small-12 large-5 columns first" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; padding-top: 40px; text-align: left; width: 225.66667px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <h6 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;"> 
           <a href="http://partners.bluebeam.com/extremeconference/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
           <!-- ^^^ ADD ARTICLE 1 LINK ABOVE --> 
            <img class="article-arrow" width="25" height="20" src="http://www.bluebeam.com/us/email/variety/html/images/arrow-right-blue.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: inline-block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 

           <!-- REPLACE CONTENT BELOW FOR ARTICLE 1 --> 
           Last Chance to Register! 
           </a></h6> 
            <p style="Margin: 0; Margin-bottom: 10px; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">There’s only one month left to get 50% off registration for the Bluebeam eXtreme Conference. Don't miss this opportunity to connect with customers. <a href="http://partners.bluebeam.com/extremeconference/" target="_blank" 
             style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">Register today >></a></p> 
            <!-- END OF CONTENT FOR ARTICLE 1 --> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         <th class="small-12 large-7 columns last" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 8px; padding-right: 16px; text-align: left; width: 322.33333px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <a href="http://partners.bluebeam.com/extremeconference/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
            <img src="https://downloads.bluebeam.com/images/2016/VARiety/16-07/article-1-excon-V3.jpg" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 
            </a> 
            <!-- ^^^ ADD IMAGE 1 URL --> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         </tr> 
        </tbody> 
        </table> 
        <!-- END ARTICLE 1 --> 

        <!-- ARTICLE 2 
       LAYOUT = IMAGE > COPY 
       TO DUPLICATE SELECT FROM ROW BELOW TO END ARTICLE 2 --> 
        <table class="row row-article" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;"> 
        <tbody> 
         <tr style="padding: 0; text-align: left; vertical-align: top;"> 
         <th class="small-12 large-7 columns first" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; text-align: left; width: 322.33333px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <a href="http://partners.bluebeam.com/2016/07/sellmoretoexistingcustomers/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
            <img src="https://downloads.bluebeam.com/images/2016/VARiety/16-07/article-2-steve.jpg" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 
            </a> 
            <!-- ^^^ ADD IMAGE 2 URL --> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         <th class="small-12 large-5 columns last" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 8px; padding-right: 16px; padding-top: 50px; text-align: left; width: 225.66667px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <h6 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;"> 
           <a href="http://partners.bluebeam.com/2016/07/sellmoretoexistingcustomers/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
           <!-- ^^^ ADD ARTICLE 2 LINK ABOVE --> 
            <img class="article-arrow" width="25" height="20" src="http://www.bluebeam.com/us/email/variety/html/images/arrow-left-blue.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: inline-block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 

           <!-- REPLACE CONTENT BELOW FOR ARTICLE 2 --> 
           Steve's Sales Tips 
           </a></h6> 
            <p style="Margin: 0; Margin-bottom: 10px; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">Your next opportunity could be closer than you think. Learn how to engage your existing customers with <a href="http://partners.bluebeam.com/2016/07/sellmoretoexistingcustomers/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">these strategies >></a></p> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         </tr> 
        </tbody> 
        </table> 
        <!-- END ARTICLE 2 --> 

        <!-- ARTICLE 3 
       LAYOUT = COPY > IMAGE 
       TO DUPLICATE SELECT FROM ROW BELOW TO END ARTICLE 3 --> 
        <table class="row row-article" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;"> 
        <tbody> 
         <tr style="padding: 0; text-align: left; vertical-align: top;"> 
         <th class="small-12 large-5 columns first" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; padding-top: 45px; text-align: left; width: 225.66667px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <h6 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;"> 
           <a href="http://partners.bluebeam.com/rallyday/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
           <!-- ^^^ ADD ARTICLE 3 LINK ABOVE --> 
            <img class="article-arrow" width="25" height="20" src="http://www.bluebeam.com/us/email/variety/html/images/arrow-right-blue.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: inline-block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 

           <!-- REPLACE CONTENT BELOW FOR ARTICLE 3 --> 
           Rally Day Is Heating Up! 
           </a></h6> 
            <p style="Margin: 0; Margin-bottom: 10px; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">We are now halfway through our Rally Day US qualifying period. Keep driving sales as we approach the final stretch. Not registered yet? <a href="http://partners.bluebeam.com/rallyday/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">Sign up here >> </a></p> 
            <!-- END OF CONTENT FOR ARTICLE 3 --> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         <th class="small-12 large-7 columns last" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 8px; padding-right: 16px; text-align: left; width: 322.33333px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <a href="http://partners.bluebeam.com/rallyday/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
            <img src="https://downloads.bluebeam.com/images/2016/VARiety/16-07/article-3-rally-day.jpg" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 
            </a> 
            <!-- ^^^ ADD IMAGE 1 URL --> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         </tr> 
        </tbody> 
        </table> 
        <!-- END ARTICLE 3 --> 
        <!-- ARTICLE 2 
       LAYOUT = IMAGE > COPY 
       TO DUPLICATE SELECT FROM ROW BELOW TO END ARTICLE 2 --> 
        <table class="row row-article" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;"> 
        <tbody> 
         <tr style="padding: 0; text-align: left; vertical-align: top;"> 
         <th class="small-12 large-7 columns first" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; text-align: left; width: 322.33333px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <a href="mailto:partners@bluebeam.com" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
            <img src="https://downloads.bluebeam.com/images/2016/VARiety/16-07/article-4-cool-down.jpg" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 
            </a> 
            <!-- ^^^ ADD IMAGE 2 URL --> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         <th class="small-12 large-5 columns last" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 8px; padding-right: 16px; padding-top: 20px; text-align: left; width: 225.66667px;"> 
          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"> 
          <tbody> 
           <tr style="padding: 0; text-align: left; vertical-align: top;"> 
           <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;"> 
            <h6 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;"> 
           <a href="mailto:partners@bluebeam.com" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> 
           <!-- ^^^ ADD ARTICLE 2 LINK ABOVE --> 
            <img class="article-arrow" width="25" height="20" src="http://www.bluebeam.com/us/email/variety/html/images/arrow-left-blue.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: inline-block; max-width: 100%; outline: none; text-decoration: none; width: auto;"> 

           <!-- REPLACE CONTENT BELOW FOR ARTICLE 2 --> 
           Cool Down With Bluebeam This Summer 
           </a></h6> 
            <p style="Margin: 0; Margin-bottom: 10px; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">Host a Bluebeam-themed Happy Hour, complete with a Revu presentation. We’ll send the koozies, you’ll bring the customers! Contact your <a href="mailto:partners@bluebeam.com" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">Partner Relations Specialist</a>          to learn more.</p> 
           </th> 
           </tr> 
          </tbody> 
          </table> 
         </th> 
         </tr> 
        </tbody> 
        </table> 
        <!-- END ARTICLE 2 --> 

Lassen Sie mich wissen, wenn Sie etwas sehen, dass dies verursacht werden könnte.

Answer 1

Seit neuere Versionen von Windows Outlook Microsoft Word zum Rendern von E-Mails verwenden, muss es oft gezwungen werden, erzwungene Stile zu erzwingen, die Webbrowser einfach verstehen.

Zwei Vorschläge basierend auf dem Code und Ausgabe oben berichtet: - Setzen Sie Inline-Stile auf der niedrigsten möglichen Ebene (nicht auf der Kaskade verlassen) - Verwenden Sie unerwün- schte HTML wie valign und align Attribute

Speziell für Ihre E-Mail:

---

Platz vertikale Ausrichtung CSS in einem <td> oder <th> anstelle eines <tr>:

<tr style="vertical-align: top;"> 
    <th style=""...> 

Änderungen

<tr style=""> 
    <th style="vertical-align: top;"...> 

---

In diesem Sinne ... Brute-Force-Outlook in eine vertikale Ausrichtung durch das alte mit und veraltete valign="" Attribut:

<th valign="top" style="vertical-align: top;"...> 

---

Und stellen Sie sicher, dass Ihre Padding für jede Zeile der E-Mail-Treffer Eine vereinfachte Version konnte von diesem gehen:

<th class="small-12 large-7 columns first" style="padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; padding-top: 45px; 

dazu:

<th class="small-12 large-7 columns first" style="padding: 45px 8px 40px 16px;">