2017-10-24 2 views
1

私はこの分野では初めてです。私はウェブブラウザとGmailでうまく見える電子メールテンプレートのhtmlコードを持っていますが、それはOutlookで壊れてしまいます。どうすれば修正できますか?それは見通しなしですべてのブラウザとメーリングリストでよく見えます。見通しが壊れたメールテンプレート

どこがエラーですか?それは見つけられません。私はこのoutlook validatorを使用して、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> 
+0

ところ問題が発生している、どの部分を壊していますか? –

+0

Outlookで開くと正しく表示されませんでした。 –

+0

画像を見てください..このような見通しビュー.. https://s1.postimg.org/2cl4sde5kv/Screenshot_1.jpg –

答えて

0

、それは見通しがマージントップをサポートしていないと言います。したがって、画像を保持するテーブルにあるmargin-top:-65px;が問題です。代わりに、すべての単語を保持しているtdが入っている同じtrにイメージを移動する必要があります。tdを追加し、そのイメージの中にリンクとイメージを置きます。行の高さで周囲を回り、それぞれの単語を直接囲むtdに黒の背景のみを置きます。

+0

Outlook 2007へのマージンは純粋な悪です – scoopzilla

+0

あなたの貴重な答えのために..ありがとうございます。私はOutlookでイントラであるためには1つのtrを維持する必要があると思います。 –

0

ここでの問題は、実際にはいくつかのことです。私は失礼しようとしているわけではありません。本当にあなたがここで間違って何をしているのかを知りたいのです。

まず、すべてのテーブルで繰り返し条件があります。border=0。これにより、多くのクライアントでテーブル全体が破損します。

第2に、パディングCSSを使用しないように、特にテキストに関しては、すべてのあなたの力で試してみるべきです。これは電子メールクライアント間で矛盾しています。

第3に、恐ろしいOutlook 2007-2010を処理するのに役立ついくつかの条件付きルールをヘッダーCSSに追加する必要があります。私はそれらを含んでいます。他のプロジェクトで使用したい場合は、style彼女全体をコピー/ペーストすることができます。これは長年にわたって電子メールを開発してきた私の標準的なボイラープレートです。

最後に、marginは、メールに関してはNO ONEの友人です。それは予測不可能で悪いことです。電子メールをコード化するときに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>

+0

ご返信ありがとうございます。私はあなたが私のポイントをキャッチしていないと思う私はインラインでイメージとテキストをしたい..私の添付のように..添付画像をご覧ください。 https://s1.postimg.org/1gzd8zo9xb/Eri.png –

+0

うわー。それはあなたが書いたことではありません。それにもかかわらず、電子メールの要素に対してZ-インデックスを実行することはできません。機能しません。あなたはいくつかのトリックをすることができますが、実際にはイメージで行うべきです。覚えておいて、あなたが2003年のようにコーディングしているように思えます。 – scoopzilla

関連する問題