1. Zuhause
  2. Frage und Antwort
  3. E-Mail-Vorlage, die Outlook bricht

E-Mail-Vorlage, die Outlook bricht

2017-10-24 3 views
1

Ich bin neu in diesem Bereich. Ich habe den HTML-Code für eine E-Mail-Vorlage, die im Webbrowser und in Google Mail gut aussieht, aber in Outlook ausfällt. Wie kann ich es reparieren? Es sieht in allen Browsern und Mailing-Plattformen ohne Outlook gut aus.E-Mail-Vorlage, die Outlook bricht

Wo ist der Fehler? Ich kann es nicht finden.

 <table class="deviceWidth" width="750" cellspacing="0" cellpadding="0" border="0" align="left"> 
      <tbody> 
       <tr> 
        <td style="padding:0px 15px;" bgcolor="#FFFFFF"> 
         <table class="deviceWidth" width="650" cellspacing="0" cellpadding="0" border="0" align="left"> 
          <tbody> 
           <tr> 
            <td style=" padding:20px 0px 10px 20px;" border="0" valign="top" bgcolor="#FFFFFF" align="left"> 

             <table class="deviceWidth" border="0" width="540" style="background-color:#000;" cellspacing="0" cellpadding="0" border="0" align="left"> 
              <tbody> 
          <tr> 
           <td valign="middle" border="0" style="background-color:#000;" align="center"> 
           <!--[if mso]> 
                <table role="presentation" border="0" background="#606061" cellspacing="0" cellpadding="0" align="left" style="margin-top:0px;" width="540"> 
                <tr> 
                <td align="left" bgcolor="#000;" style="background-color:#000;" valign="middle" width="540"> 
                <![endif]--> 

            <table class="deviceWidth" border="0" bgcolor="#000;" style="background-color:#000;" width="55%" cellspacing="0" cellpadding="0" border="0" align="left"> 
             <tbody> 
              <tr> 
               <td colspan="1" border="0" valign="middle" width="130" class="center2" align="left" style="font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#000; padding:10px 5px 10px 30px; "> 

                <a href="http://privateclientmortgagegroupmm.clixonit.com" valign="middle" style="text-decoration:none;color:#fff;font-size:14px; font-weight:bold;"> APPLY NOW </a><!-- PUT YOUR LOGO --> 

               </td> 
               <td colspan="1" border="0" valign="middle" width="130" class="center2" align="center" style="font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#000; padding:10px 5px 10px 5px; "> 

               <a href="http://www.uberconference.com/privateclient" style="text-decoration:none;color:#A6A6A6;font-size:14px; font-weight:bold;"> GO TO MEETING </a><!-- PUT YOUR LOGO --> 

               </td> 
              </tr>     

             </tbody> 
            </table> 

            <table class="deviceWidth" border="0" bgcolor="#000;" style="background-color:#000;" width="36%" cellspacing="0" cellpadding="0" border="0" align="left"> 
             <tbody> 


              <tr> 
               <td colspan="1" border="0" valign="middle" class="center2" align="center" style="font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#000; padding:10px 5px 10px 20px; "> 
                <a href="https://privateclient.acuityscheduling.com/" style="text-decoration:none;color:#A6A6A6;font-size:14px; font-weight:bold;"> SCHEDULE CALL </a><!-- PUT YOUR LOGO --> 
               </td> 
              </tr> 


             </tbody> 
            </table> 

           <!--[if mso]> 
                </td> 
                 </tr> 
                </table> 
                <![endif]--> 
           </td> 
          </tr> 

              </tbody> 
             </table> 

             <table class="deviceWidth" id="logo" border="0" width="100" style="margin-top:-65px;" cellspacing="0" cellpadding="0" border="0" align="right"> 
              <tbody> 
               <tr> 
                <td class="center" border="0" valign="top" align="center"> 
                 <!--[if mso]> 
                <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="right" style="margin-top:0px;mar" width="100"> 
                <tr> 
                <td align="left" bgcolor="#FFF;" style="background-color:#fff;" valign="top" width="100"> 
                <![endif]--> 
                 <a href="https://www.privateclient.com"> <img class="logo" src="https://s1.postimg.org/3gpcnyjmtr/logo2.png" alt="" height="96" width="100"/></a><!-- PUT YOUR LOGO --> 
                <!--[if mso]> 
                </td> 
                 </tr> 
                </table> 
                <![endif]--> 
                </td> 
               </tr> 
              </tbody> 
             </table> 

            </td> 
           </tr> 
          </tbody> 
         </table> 
        </td> 
       </tr> 
      </tbody> 
     </table>

Quelle

2017-10-24 Musfiqur Rahman

+0

Welches Teil bricht, wo das Problem auftritt? –

+0

Wenn ich es in Outlook öffne es nicht korrekt das Bild Going Bottom –

+0

Bitte sehen Sie das Bild .. Outlook-Ansicht wie folgt .. https://s1.postimg.org/2cl4sde5kv/Screenshot_1.jpg –

Antwort

0

Ich benutze Outlook nicht, aber durch diesen outlook validator verwenden, heißt es, dass Outlook nicht margin-top unterstützt. Also das margin-top:-65px;, das Sie auf dem Tisch haben, der das Bild enthält, ist das Problem. Stattdessen müssen Sie das Bild in die gleiche tr, dass die td, die alle Wörter sind in. Fügen Sie eine td neben ihm und setzen Sie den Link und Bild in diese td. Verwirren Sie mit den Höhen der Reihen herum und legen Sie nur den schwarzen Hintergrund auf die tds, die jedes Wort direkt umgeben.

Quelle

2017-10-24 20:51:14

+0

Margins sind pure böse zu Outlook 2007 – scoopzilla

+0

danke .. für Ihre wertvolle Antwort .. ich denke, in Outlook müssen sie in einem tr inline zu bleiben. –

0

Das Problem hier ist eigentlich eine Handvoll Dinge. Ich versuche nicht, unhöflich zu sein, ich möchte wirklich, dass du siehst, was du hier falsch machst und weißt, warum das Kunden und so weiter durchbricht.

Zunächst müssen Sie die Bedingungen in ALLEN Tabellen wiederholen border=0. Dies führt dazu, dass die gesamte Tabelle bei vielen Clients unterbrochen wird.

Zweitens sollten Sie mit all Ihrer Macht versuchen, Padding-CSS NICHT zu verwenden, besonders wenn es um Text geht. Dies ist bei E-Mail-Clients inkonsistent.

Drittens möchten Sie Ihrem Header-CSS einige bedingte Regeln hinzufügen, die Ihnen beim Umgang mit dem gefürchteten Outlook 2007-2010 helfen. Ich habe diese aufgenommen. Sie können die gesamte style kopieren/einfügen, wenn Sie in anderen Projekten verwenden möchten. Es ist meine Standardausrüstung, auf die ich im Laufe der Jahre bei der Entwicklung von E-Mails gestoßen bin.

Schließlich, margin ist niemand Freund, wenn es um E-Mails geht. Es ist unberechenbar und schlecht. Versuchen Sie, beim Schreiben von E-Mails zu denken, dass Sie sich auf das Jahr 2004 zurückziehen, und verwenden Sie leere Zellen <td>, um Speicherplatz zu schaffen. Dieses Layout sollte für nahezu jeden Client und jedes Gerät gut aussehen. Und wenn Sie Fragen haben, schreiben Sie mir eine Linie :)

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
<meta name="format-detection" content="date=no"/> 
 
<meta name="format-detection" content="telephone=no"/> 
 
<!--[if !mso]><!-- --> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
 
<!--<![endif]--> 
 
<title>Untitled Document</title> 
 
\t <style type="text/css"> 
 
\t \t #outlook a{ 
 
\t \t \t padding:0; 
 
\t \t } 
 
\t \t .ReadMsgBody{ 
 
\t \t \t width:100%; 
 
\t \t } 
 
\t \t body{ 
 
\t \t \t width:100% !important; 
 
\t \t \t min-width:100%; 
 
\t \t \t -webkit-text-size-adjust:100%; 
 
\t \t \t -ms-text-size-adjust:100%; 
 
\t \t \t -webkit-font-smoothing: antialiased; 
 
\t \t } 
 
\t \t v*{ 
 
\t \t  \t behavior:url(#default#VML); 
 
\t \t \t display:inline-block; 
 
\t \t } 
 
\t \t .ExternalClass{ 
 
\t \t \t width:100%; 
 
\t \t } 
 
\t \t td{ 
 
\t \t \t border-collapse: collapse!important; 
 
\t \t } 
 
\t \t .ExternalClass, 
 
\t \t .ExternalClass p, 
 
\t \t .ExternalClass span, 
 
\t \t .ExternalClass font, 
 
\t \t .ExternalClass td, 
 
\t \t .ExternalClass div{ 
 
\t \t \t line-height:100%; 
 
\t \t } 
 
\t \t a img{ 
 
\t \t \t border:none; 
 
\t \t } 
 
\t \t a { 
 
\t \t \t text-decoration:none !important; 
 
\t \t } 
 
\t \t img{ 
 
\t \t \t display:block; 
 
\t \t \t outline:none; 
 
\t \t \t text-decoration:none; 
 
\t \t \t border:none; 
 
\t \t \t -ms-interpolation-mode: bicubic; 
 
\t \t } 
 
\t \t table{ 
 
\t \t \t border-spacing:0; 
 
\t \t \t border-collapse: collapse !important; 
 
\t \t \t mso-table-lspace:0pt; 
 
\t \t \t mso-table-rspace:0pt; 
 
\t \t } 
 
\t \t table[class=full] { 
 
\t \t \t width: 100%; 
 
\t \t \t clear: both; 
 
\t \t } 
 
\t div { 
 
\t \t padding: 0; 
 
\t \t margin: 0; 
 
\t } 
 
\t \t p{ 
 
\t \t \t margin:0; 
 
\t \t \t padding:0; 
 
\t \t \t border:0; 
 
\t \t \t font-size:100%; 
 
\t \t \t line-height:1.4em; 
 
\t \t \t font-family: Helvetica, Arial, sans-serif; 
 
\t \t } 
 
\t \t h1{ 
 
\t \t \t margin:0; 
 
\t \t \t padding:0; 
 
\t \t \t border:0; 
 
\t \t \t font-size:100%; 
 
\t \t \t line-height:1.4em; 
 
\t \t \t font-family: Helvetica, Arial, sans-serif; 
 
\t \t } 
 
\t \t #wrappertable{ 
 
\t \t \t margin:0; 
 
\t \t \t padding:0; 
 
\t \t \t width:100% !important; 
 
\t \t \t line-height:100% !important; 
 
\t \t } 
 
\t \t br[class=show]{ 
 
\t \t \t display: none !important; 
 
\t \t \t max-height: 0px; 
 
\t \t \t font-size: 0px; 
 
\t \t \t overflow: hidden; 
 
\t \t \t mso-hide: all; 
 
\t \t } 
 
\t @media screen and (max-width:600px){ 
 
\t \t table{ 
 
\t \t \t width:100% !important; 
 
\t \t } 
 
\t \t table[class=content]{ 
 
\t \t \t width:95% !important; 
 
\t \t } 
 
\t \t td[class=hide]{ 
 
\t \t \t display: none !important; 
 
\t \t \t max-height: 0px !important; 
 
\t \t \t font-size: 0px !important; 
 
\t \t \t overflow: hidden !important; 
 
\t \t \t mso-hide: all !important; 
 
\t \t \t width: 0 !important; 
 
\t \t } 
 
\t \t td[class=fullwidth]{ 
 
\t \t \t width:100% !important; 
 
\t \t \t float:left !important; 
 
\t \t } 
 
\t \t /*replace image with mobile version*/ 
 
\t \t td#mobilepic img{ 
 
\t \t \t content:url("") !important; 
 
\t \t } 
 
\t \t /*repeat ID as necessary*/ 
 
\t \t img[class=fullwidth]{ 
 
\t \t \t width:100% !important; 
 
\t \t \t height:auto !important; 
 
\t \t } 
 
\t \t img[class=threequarters]{ 
 
\t \t \t float: none !important; 
 
\t \t \t width: 75% !important; 
 
\t \t \t height: auto !important; 
 
\t \t \t margin: auto !important; 
 
\t \t } 
 
\t \t img[class=twothirds]{ 
 
\t \t \t float: none !important; 
 
\t \t \t width: 66.6666% !important; 
 
\t \t \t height: auto !important; 
 
\t \t \t margin: auto !important; 
 
\t \t } 
 
\t \t img[class=halfwidth]{ 
 
\t \t \t float: none !important; 
 
\t \t \t width: 50% !important; 
 
\t \t \t height: auto !important; 
 
\t \t \t margin: auto !important; 
 
\t \t } 
 
\t \t img[class=halfwidthleft]{ 
 
\t \t \t float: none !important; 
 
\t \t \t width: 50% !important; 
 
\t \t \t height: auto !important; 
 
\t \t } 
 
\t \t img[class=onethird]{ 
 
\t \t \t width: 33.3333% !important; 
 
\t \t \t height: auto !important; 
 
\t \t \t margin: auto !important; 
 
\t \t \t padding-top: 5px !important; 
 
\t \t \t padding-bottom: 5px !important; 
 
\t \t } 
 
\t \t img[class=quarterwidth]{ 
 
\t \t \t width: 25% !important; 
 
\t \t \t height: auto !important; 
 
\t \t \t margin: auto !important; 
 
\t \t \t padding-top: 5px !important; 
 
\t \t \t padding-bottom: 5px !important; 
 
\t \t } 
 
\t \t img[class=hide]{ 
 
\t \t \t display: none !important; 
 
\t \t \t max-height: 0px !important; 
 
\t \t \t font-size: 0px !important; 
 
\t \t \t overflow: hidden !important; 
 
\t \t \t mso-hide: all !important; 
 
\t \t \t width: 0 !important; 
 
\t \t } 
 
\t \t p[class=smaller] { 
 
\t \t \t font-size: 36px !important; 
 
\t \t \t line-height: 42px !important; 
 
\t \t } 
 
\t \t 
 
\t \t div[class=fullwidth]{ 
 
\t \t \t max-width: 95% !important; 
 
\t \t } 
 
\t \t p,h1,h2[class=centered]{ 
 
\t \t \t text-align: center !important; 
 
\t \t } 
 
\t \t br[class=show]{ 
 
\t \t display: inline !important; 
 
\t \t } 
 
\t \t br[class=hide]{ 
 
\t \t \t display: none !important; 
 
\t \t \t max-height: 0px; 
 
\t \t \t font-size: 0px; 
 
\t \t \t overflow: hidden; 
 
\t \t \t mso-hide: all; 
 
\t \t } 
 
\t \t span[class=hide]{ 
 
\t \t \t display: none !important; 
 
\t \t \t max-height: 0px; 
 
\t \t \t font-size: 0px; 
 
\t \t \t overflow: hidden; 
 
\t \t \t mso-hide: all; 
 
\t \t } 
 

 
\t } 
 
</style> 
 
</head> 
 
</head> 
 

 
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" offset="0" bgcolor="#FFFFFF" style="padding: 0 !important; margin:0 !important;"> 
 
\t <table width="100%" style="border-collapse:collapse; table-layout:fixed;" border="0" cellspacing="0" cellpadding="0" id="wrappertable"> 
 
    \t \t <tr> 
 
     \t \t <td align="center"> 
 
\t \t \t \t <table cellpadding="0" cellspacing="0" border="0" width="620"> 
 
\t \t \t \t \t <tr> 
 
        \t \t <td width="618" align="center"> 
 
\t \t \t \t \t <!--THIS IS THE CONTENT TABLE--> 
 
         \t \t \t <table cellpadding="0" cellspacing="0" border="0" width="600" align="center"> 
 
\t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t <td bgcolor="#000000" style="background-color: #000000" align="center" height="50" valign="middle"> 
 
            \t \t \t <table width="90%" cellspacing="0" cellpadding="0" border="0" class="content"> 
 
              \t \t \t <tr> 
 
               \t \t \t <td class="fullwidth" align="left" width="33%"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <a href="http://privateclientmortgagegroupmm.clixonit.com" valign="middle" style="text-decoration:none;color:#ffffff;font-size:14px; font-weight:bold; font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">APPLY NOW</a> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <td class="fullwidth" align="center" width="34%"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <a href="http://www.uberconference.com/privateclient" valign="middle" style="text-decoration:none;color:#ffffff;font-size:14px; font-weight:bold; font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">GO TO MEETING</a> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <td class="fullwidth" align="right" width="33%"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <a href="https://privateclient.acuityscheduling.com/" valign="middle" style="text-decoration:none;color:#ffffff;font-size:14px; font-weight:bold; font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">SCHEDULE CALL</a> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </td> 
 
              \t \t \t </tr>     
 
            \t \t \t </table> 
 
\t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t <td height="15" style="line-height: 15px;"></td> 
 
\t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t \t \t <a href="https://www.privateclient.com"> <img class="logo" src="https://s1.postimg.org/3gpcnyjmtr/logo2.png" alt="" height="96" width="100"/></a> 
 
\t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </table> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </table> 
 
</body> 
 
</html>

Quelle

2017-10-24 22:00:47 scoopzilla

+0

danke für Ihre Antwort. ich denke, du hast meinen Punkt nicht verstanden, ich möchte das Bild und den Text inline .. wie meinen Anhang .. siehe Anhang Bild. https://s1.postimg.org/1gzd8zo9xb/Eri.png –

+0

Wow. Nein, das ist nicht, dass du überhaupt geschrieben hast. Egal, Sie können nicht Z-Index über Elemente in E-Mails, Sie werden nicht funktionieren. Sie können ein paar Tricks machen, aber das sollte wirklich mit Bildern gemacht werden. Denken Sie daran, denken Sie, als würden Sie programmieren wie 2003. – scoopzilla

Verwandte Themen

 Verwandte Themen