전망이 깨지는 이메일 템플릿

Question

전이 분야에서 새로운입니다. 나는 웹 브라우저와 gmail에서 잘 보이는 이메일 템플릿을위한 html 코드를 가지고있다. 그러나 그것은 outlook에서 분해된다. 어떻게 해결할 수 있습니까? Outlook이 없어도 모든 브라우저와 메일 링 플랫폼에서 훌륭하게 보입니다.

어디서 오류가 있습니까? 못 찾겠 어.

 <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> 

Answer 1

내가 Outlook을 사용하지만,이 outlook validator을 사용하여하지 않습니다, 그것은 전망 마진 탑을 지원하지 않는 것을 말한다. 따라서 이미지를 보유하고있는 테이블에있는 margin-top:-65px;이 문제입니다. 대신 모든 단어가 들어있는 td이 들어있는 동일한 tr으로 이미지를 이동해야합니다. td을 그 옆에 추가하고 해당 이미지 안에 링크 및 이미지를 넣어야합니다. 행의 높이와 주변에 혼란과 각 단어를 직접 둘러싸는 td에 검은 배경을 넣으십시오.

Answer 2

여기의 문제는 사실 몇 가지입니다. 나는 무례하게하려고 노력하지 않고 있습니다. 저는 진정으로 당신이 여기서 잘못하고있는 것을보고, 이것이 클라이언트들과 같은 것을 가로 챈 이유를 알기를 바랍니다.

먼저 모든 테이블에 조건이 반복됩니다 (border=0). 이로 인해 전체 테이블이 여러 클라이언트에서 손상됩니다.

두 번째로, 특히 텍스트의 경우에는 패딩 CSS를 사용하지 않는 것이 좋습니다. 이는 이메일 클라이언트간에 일관성이 없습니다.

셋째, 두려운 Outlook 2007-2010을 처리하는 데 도움이되는 몇 가지 조건부 규칙을 헤더 CSS에 추가하려고합니다. 나는 그것들을 포함시켰다. 다른 프로젝트에서 사용하고 싶다면 style 전체를 복사하여 붙여 넣을 수 있습니다. 그것은 내가 전자 메일 개발의 수년에 걸쳐 온 것들에 대한 나의 표준 보일러 판입니다.

마지막으로 margin은 이메일과 관련하여 아무도 없습니다. 그것은 예측할 수없고 나쁘다. 전자 메일을 코딩 할 때 2004 년으로 돌아가는 것처럼 생각하고 빈 <td> 셀을 사용하여 공간을 만드는 것처럼 생각하십시오. 이 레이아웃은 거의 모든 클라이언트와 장치에서 잘 보입니다. 질문이 있다면, 나에게 선 :

이

<!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>