2

HTML メール ニュースレター テンプレートをプログラミングしています。可能な限りすべてのブラウザと電子メール ホストでテストしましたが、どれも素晴らしく見えます。Outlook 2010 になると、プレビュー モードで見栄えがよくなります。しかし、ダブルクリックしてフルモードにすると、ヘッダー画像がテーブル幅よりも大きく拡大されます。

いくつか読んだことがありますが、画像を 72dpi ではなく 96dpi 画像として再保存することを推奨しています。それでも助けにはなりません!!!! コードを何度も読みましたが、まだ修正が見つかりません。

どんな助けでも素晴らしいでしょう！

私のコードは以下です。誰かがそれを読んで、私が何か間違ったことをしたかどうか、そして修正があるかどうかを教えてもらえますか

乾杯

    <table border="0" cellpadding="10" cellspacing="0" width="599px" id="templatePreheader">
      <tr>
        <td valign="top" class="preheaderContent" style="border-collapse: collapse;">
          <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
              <td valign="top" style="border-collapse: collapse;height:15px;">

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

    <table border="0" cellpadding="0" cellspacing="0" width="599px" id="templateContainer" style="border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: #FFFFFF;" bgcolor="#FFFFFF">
      <tr>
        <td align="center" valign="top" style="border-collapse: collapse;">
          <table border="0" cellpadding="0" cellspacing="0" width="599" id="templateImage">
            <tr>
              <td valign="top" style="border-collapse: collapse;width:599px;">
                <img src="http://s3.amazonaws.com/S1MPLE/system/layouts/David%27s%20Designs/chefCode/top2.jpg" style="max-width: 599px; height: 100%; outline: none; text-decoration: none; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0;" alt="Image">
              </td>
            </tr>
          </table>
        </td>
      </tr>
     </table>

      <table border="0" cellpadding="0" cellspacing="0" width="599px" id="templateContainer" style="border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: #FFFFFF;" bgcolor="#FFFFFF">
      <tr>
        <td align="center" valign="top" style="border-collapse: collapse;">
          <table border="0" cellpadding="0" cellspacing="0" width="599" style="background-color: #FFFFFF;" bgcolor="#FFFFFF">
            <tr>
              <td valign="top"  align="left" style="border-collapse: collapse;padding-bottom:10px;padding-top:10px;font-family: Arial, Helvetica, sans-serif;font-size:14px;color:#ff0000;padding-right:20px;padding-left:20px;">
              This message is from Simple and Cheney Brothers.
              </td>
            </tr>
            <tr>
              <td valign="top"  align="left" style="border-collapse: collapse;padding-bottom:10px;padding-top:10px;font-family: Arial, Helvetica, sans-serif;font-size:20px;color:#1b4456;padding-right:20px;padding-left:20px;"">
              Dear {{ offer.employee.first_name }}, 
              </td>
            </tr>
            <tr>
              <td valign="top" align="left" style="border-collapse: collapse;padding-bottom:10px;padding-top:0px;font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#000000;line-height:18px;padding-right:20px;padding-left:20px;"">
             {{ deal.details|capfirst|linebreaksbr }}  
              </td>
            </tr>
             <tr>
              <td valign="top" align="left" style="border-collapse: collapse;padding-bottom:10px;padding-top:20px;font-family: Arial, Helvetica, sans-serif;font-size:20px;color:#000000;line-height:18px;padding-right:20px;padding-left:20px;"">
              Sign Up & Save
              </td>
            </tr>
            <tr>
              <td valign="top" align="left" style="border-collapse: collapse;padding-bottom:10px;padding-top:5px;font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#000000;line-height:18px;padding-right:20px;padding-left:20px;"">
              Go to: <a href="http://www.simplebrs.com/" style="font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#1b4456;line-height:18px;"> www.simplebrs.com</a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
     </table>

     <table border="0" cellpadding="0" cellspacing="0" width="599px" id="templateContainer" style="border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: #FFFFFF;" bgcolor="#FFFFFF">
      <tr>
        <td align="center" valign="top" style="border-collapse: collapse;">
          <table border="0" cellpadding="0" cellspacing="0" width="599">
          <tr>
              <td valign="top" align="left" style="border-collapse: collapse;padding-bottom:5px;padding-top:5px;font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#1b4456;line-height:18px;padding-right:20px;padding-left:20px;"">
              username: <span style="color:#000000;">{{ offer.employee.email }}</span>
              </td>
              <td valign="top" align="right" style="border-collapse: collapse;padding-bottom:5px;padding-top:5px;font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#1b4456;line-height:18px;padding-right:20px;padding-left:10px;"">
              call toll free: <span style="color:#000000;">1-877-302-0560</span>
              </td>
          </tr>
          <tr>
             <td valign="top" align="left" style="border-collapse: collapse;padding-bottom:25px;padding-top:0px;font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#1b4456;line-height:18px;padding-right:20px;padding-left:20px;"">
              password: <span style="color:#000000;">getdeals</span>
              </td>
              <td valign="top" align="right" style="border-collapse: collapse;padding-bottom:25px;padding-top:0px;font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#1b4456;line-height:18px;padding-right:20px;padding-left:20px;"">
              call toll free: <span style="color:#000000;"> <a href="mailto:help@simpledealsnow.com" style="font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#1b4456;line-height:18px;">help@simpledealsnow.com</a></span>
              </td>
          </tr>
          </table>
        </td>
      </tr>
     </table>

     <table border="0" cellpadding="0" cellspacing="0" width="599px" id="templateContainer" style="border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: #FFFFFF;" bgcolor="#FFFFFF">
      <tr>
        <td align="center" valign="top" style="border-collapse: collapse;">
          <table border="0" cellpadding="0" cellspacing="0" width="599" id="templateImage">
            <tr>
              <td valign="top" style="border-collapse: collapse;width:599px;">
                <img src="http://s3.amazonaws.com/S1MPLE/system/layouts/David%27s%20Designs/chefCode/bottom2.jpg" style=width: 599px; height: 77px; line-height: 100%; outline: none; text-decoration: none; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0;width:599px;" alt="Image">
              </td>
            </tr>
          </table>
        </td>
      </tr>
     </table>

     <table border="0" cellpadding="0" cellspacing="0" width="599px" id="templatePreheader">
      <tr>
        <td valign="top" class="preheaderContent" style="border-collapse: collapse;">
          <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
              <td valign="top" style="border-collapse: collapse;height:15px;">

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

  </td>

4

2 に答える 2

0

さて、私はあなたのコードをより詳細に見ました。HTML には多くの検証の問題があります。

何が間違っていたのかを言う代わりに、コードを整理して以下に再投稿しました。これがうまくいくことを願っています。

最後に余分な引用がありました。ID="" 属性の一部も変更しました (末尾に数字を追加しただけです)。ID 属性は区別する必要があります (標準プロトコル)。

<table border="0" cellpadding="10" cellspacing="0" width="599px" id="templatePreheader1">
  <tr>
    <td valign="top" class="preheaderContent" style="border-collapse: collapse;">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td valign="top" style="border-collapse: collapse;height:15px;">

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

<table border="0" cellpadding="0" cellspacing="0" width="599px" id="templateContainer1" style="border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: #FFFFFF;" bgcolor="#FFFFFF">
  <tr>
    <td align="center" valign="top" style="border-collapse: collapse;">
      <table border="0" cellpadding="0" cellspacing="0" width="599" id="templateImage2">
        <tr>
          <td valign="top" style="border-collapse: collapse;width:599px;">
            <img src="http://s3.amazonaws.com/S1MPLE/system/layouts/David%27s%20Designs/chefCode/top2.jpg" style="max-width: 599px; height: 100%; outline: none; text-decoration: none; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0;" alt="Image">
          </td>
        </tr>
      </table>
    </td>
  </tr>
 </table>

  <table border="0" cellpadding="0" cellspacing="0" width="599px" id="templateContainer2" style="border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: #FFFFFF;" bgcolor="#FFFFFF">
  <tr>
    <td align="center" valign="top" style="border-collapse: collapse;">
      <table border="0" cellpadding="0" cellspacing="0" width="599" style="background-color: #FFFFFF;" bgcolor="#FFFFFF">
        <tr>
          <td valign="top"  align="left" style="border-collapse: collapse;padding-bottom:10px;padding-top:10px;font-family: Arial, Helvetica, sans-serif;font-size:14px;color:#ff0000;padding-right:20px;padding-left:20px;">
          This message is from Simple and Cheney Brothers.
          </td>
        </tr>
        <tr>
          <td valign="top"  align="left" style="border-collapse: collapse;padding-bottom:10px;padding-top:10px;font-family: Arial, Helvetica, sans-serif;font-size:20px;color:#1b4456;padding-right:20px;padding-left:20px;">
          Dear {{ offer.employee.first_name }}, 
          </td>
        </tr>
        <tr>
          <td valign="top" align="left" style="border-collapse: collapse;padding-bottom:10px;padding-top:0px;font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#000000;line-height:18px;padding-right:20px;padding-left:20px;">
         {{ deal.details|capfirst|linebreaksbr }}  
          </td>
        </tr>
         <tr>
          <td valign="top" align="left" style="border-collapse: collapse;padding-bottom:10px;padding-top:20px;font-family: Arial, Helvetica, sans-serif;font-size:20px;color:#000000;line-height:18px;padding-right:20px;padding-left:20px;">
          Sign Up & Save
          </td>
        </tr>
        <tr>
          <td valign="top" align="left" style="border-collapse: collapse;padding-bottom:10px;padding-top:5px;font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#000000;line-height:18px;padding-right:20px;padding-left:20px;">
          Go to: <a href="http://www.simplebrs.com/" style="font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#1b4456;line-height:18px;"> www.simplebrs.com</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
 </table>

 <table border="0" cellpadding="0" cellspacing="0" width="599px" id="templateContainer3" style="border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: #FFFFFF;" bgcolor="#FFFFFF">
  <tr>
    <td align="center" valign="top" style="border-collapse: collapse;">
      <table border="0" cellpadding="0" cellspacing="0" width="599">
          <tr>
              <td valign="top" align="left" style="border-collapse: collapse;padding-bottom:5px;padding-top:5px;font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#1b4456;line-height:18px;padding-right:20px;padding-left:20px;">
              username: <span style="color:#000000;">{{ offer.employee.email }}</span>
              </td>
              <td valign="top" align="right" style="border-collapse: collapse;padding-bottom:5px;padding-top:5px;font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#1b4456;line-height:18px;padding-right:20px;padding-left:10px;">
              call toll free: <span style="color:#000000;">1-877-302-0560</span>
              </td>
          </tr>
          <tr>
             <td valign="top" align="left" style="border-collapse: collapse;padding-bottom:25px;padding-top:0px;font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#1b4456;line-height:18px;padding-right:20px;padding-left:20px;">
              password: <span style="color:#000000;">getdeals</span>
              </td>
              <td valign="top" align="right" style="border-collapse: collapse;padding-bottom:25px;padding-top:0px;font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#1b4456;line-height:18px;padding-right:20px;padding-left:20px;">
              call toll free: <span style="color:#000000;"> <a href="mailto:help@simpledealsnow.com" style="font-family: Arial, Helvetica, sans-serif;font-size:12px;color:#1b4456;line-height:18px;">help@simpledealsnow.com</a></span>
              </td>
          </tr>
      </table>
    </td>
  </tr>
 </table>

 <table border="0" cellpadding="0" cellspacing="0" width="599px" id="templateContainer4" style="border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: #FFFFFF;" bgcolor="#FFFFFF">
  <tr>
    <td align="center" valign="top" style="border-collapse: collapse;">
      <table border="0" cellpadding="0" cellspacing="0" width="599" id="templateImage1">
        <tr>
          <td valign="top" style="border-collapse: collapse;width:599px;">
            <img src="http://s3.amazonaws.com/S1MPLE/system/layouts/David%27s%20Designs/chefCode/bottom2.jpg" style="width: 599px; height: 77px; line-height: 100%; outline: none; text-decoration: none; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0;width:599px;" alt="Image">
          </td>
        </tr>
      </table>
    </td>
  </tr>
 </table>

 <table border="0" cellpadding="0" cellspacing="0" width="599px" id="templatePreheader2">
  <tr>
    <td valign="top" class="preheaderContent" style="border-collapse: collapse;">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td valign="top" style="border-collapse: collapse;height:15px;">

          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
于 2012-08-30T16:36:09.197 に答える