2017-05-08 8 views
1

私のニュースレターヘッダーで問題がどのようになっているか調べるのに苦労しています。私がテストすると正しく動作することがありますが、わずかな変更だけですべてが変更され、エラーの原因がわからないことさえあります。ここで Outlookのニュースレターは正しく表示したくありません。HTML CSS

は、コードと私の問題が何であるかを示す写真である:

<table cellpadding="" cellspacing="0" border="0" vallign="top" align="center" style="height:auto; max-width=600px; border-bottom: none!important;border-right: none !important;" > 
 
    <tr> 
 
    <td background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" max-width="600px" height="440px" alt="Lighouse in Germany" bgcolor="#333333" style="display:block; background-repeat: no-repeat; padding: 0;width: 100%;" valign="middle;"> 
 
    <!--[if gte mso 9]> 
 
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="max-width: 600px; max-height: 440px;"> 
 
    <v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" /> 
 
    <v:textbox inset="0,0,0,0"> 
 
    <![endif]--> 
 
     <table border="0" cellpadding="0" cellspacing="30" style="max-width:600px;"> 
 
     <tr> 
 
      <td align="center" > 
 
      <br> 
 
      <img alt="" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" width="88px" height="47px" align="center" link="" style="display:block;"/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td align="center" valign="middle"> 
 
      <font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;"> 
 
      <anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none; padding-right: 1em;"> 
 
      WEBSITE</anpa> 
 
      <anpa href="##TellAFriend##" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;"> 
 
      FORWARD</anpa> 
 
      <anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;"> 
 
      SUBSCRIBE</anpa> 
 
      <anpa href="##OptOutAll##" style="font-weight:none;color: #ffffff; text-decoration: none;"> 
 
      UNSUBSCRIBE<br> 
 
      </anpa></font> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td width="600px" align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;"> 
 
      <anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none;"> 
 
      Baltic Development Forum</anpa></font></td> 
 
     </tr> 
 
     
 
     <tr> 
 
\t \t \t <td align="center"> 
 
\t \t \t <font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;"> 
 
\t \t \t 
 
\t \t LATEST BDF NEWS ESPECIALLY FOR YOU 
 
\t \t \t </font></td> 
 
     </tr> 
 
     
 
     <tr> 
 
     <br> 
 
     <td align="center">   \t 
 
     \t <div><!--[if mso]> 
 
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bdforum.org" style="height:35px;v-text-anchor:middle;width:160px;" arcsize="58%" stroke="f" fillcolor="#d1003e"> 
 
    <w:anchorlock/> 
 
    <center> 
 
    <![endif]--> 
 
     <a href="http://www.bdforum.org" 
 
style="background-color:#d1003e;border-radius:20px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">WEBSITE</a> 
 
    <!--[if mso]> 
 
    </center> 
 
    </v:roundrect> 
 
<![endif]--></div> 
 
\t \t \t </td> 
 
     </tr> 
 
     </table> 
 
     <!--[if gte mso 9]> 
 
    </v:textbox> 
 
    </v:rect> 
 
    <![endif]--></td> 
 
    </tr> 
 
</table>

そして、ここの写真を行く:私は

を達成したいのか

今、私が見通しで開くとどうなりますか

もちろん、それは例えば、他のすべてのメール "のクライアント" で動作します。 gmail。 私はこの時点で必死になっています...

答えて

0

私は以下のコードをクリーンアップ。 Outlookがmax-widthをサポートしていないので、私はいくつかwidth="100%"width="600"を追加しました。また、すべてのCSSをインラインstyleの属性内に移動しました。

2つの<!--[if gte mso 9]>(背景イメージとボタン用)ブロックがうまくいっていませんでした。私は彼に背景画像を表示させましたが、ボタンのVML部分はブロックの左上に固定されたように見えます。ボタンのVML部分を削除するとレイアウトは固定されましたが、Windows Outlookのボタンのボーダー半径(arcsize)は失われました(他のほとんどの電子メールクライアントはborder-radius)。

どこでも完璧なピクセルではありませんが、うまくいけば、これは正しい方向への一歩です。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <table align="center" border="0" cellpadding="" cellspacing="0" style="height:auto; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600"> 
 
     <tr> 
 
      <td bgcolor="#333333" height="440" background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" style="display:block; background-repeat: no-repeat; padding: 0;" valign="middle;" width="100%"> 
 
       <!--[if gte mso 9]> 
 
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 440px;"> 
 
    <v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" /> 
 
    <v:textbox inset="0,0,0,0"> 
 
    <![endif]--> 
 
       <table border="0" cellpadding="0" cellspacing="30" style="max-width:600px;" width="100%"> 
 
        <tr> 
 
         <td align="center"><br> 
 
         <img align="center" alt="" height="47px" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" style="display:block;" width="88px"></td> 
 
        </tr> 
 
        <tr> 
 
         <td align="center" valign="middle"><font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">WEBSITE FORWARD SUBSCRIBE UNSUBSCRIBE<br></font></td> 
 
        </tr> 
 
        <tr> 
 
         <td align="center" valign="middle" width="600px"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">Baltic Development Forum</font></td> 
 
        </tr> 
 
        <tr> 
 
         <td align="center" style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">LATEST BDF NEWS ESPECIALLY FOR YOU</td> 
 
        </tr> 
 
        <tr> 
 
         <td align="center"> 
 
           
 
          <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="160" style="margin: auto;"> 
 
           <tr> 
 
            <td style="border-radius: 30px; background: #d1003e; text-align: center;"> 
 
             <a href="http://www.bdforum.org" style="background-color:#d1003e;border: 5px solid #d1003e; border-radius:30px;color:#ffffff;display:block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;"> 
 
              <span style="color:#ffffff;">WEBSITE</span> 
 
             </a> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
           
 
         </td> 
 
        </tr> 
 
       </table><!--[if gte mso 9]> 
 
    </v:textbox> 
 
    </v:rect> 
 
    <![endif]--> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</body> 
 
</html>

+0

soooたくさんありがとう! –

0

少しの研究から、Outlook 2007以降では、「背景画像」を使用して設定された画像を表示する能力はありません。ただし、タグを使用することはできます。

詳細はこのスレッドをチェックアウト: Background images not working in Outlook 2007 and later

+0

あなたが投稿したコメントは笑カントー私の賛成で本当にありません。たぶん私はそれのデザインを再考する必要があります –

関連する問題