2017-02-04 33 views
-2

HTML電子メールをフォーマットしていますが、これはいくつかのブラウザで動作するようですが、OutlookはChromeとIEでうまく動作していないようです。私は、研究のビットを行って、これは私が行方不明です何かで知っている - 私は私のすべての画像に<border="0" style="display: block;">が含まれていると頭の中でテーブルの崩壊のコマンドが含ま:電子メールでHTMLが破損する

{ 
    border-collapse: collapse; 
} 

table

しかし、それを上記のブラウザではOutlookではまだ動作していません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
    <title>SSTM-PSD_email- FINAL</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 

    <style type="text/css"> 
     body{ 
      width:100%; 
      background-color:#ffffff; 
      margin:0; 
      padding:0; 
     } 
     table{ 
      border-collapse:collapse; 
     } 
     table,td,th{ 
      border:0; 
     } 
</style></head> 
    <body yahoo="fix" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
    <table id="Table_01" width="600" border="0" cellpadding="0" cellspacing="0" style="height:1424px;"> 
     <tr> 
     <td colspan="2" rowspan="2"> 
      <a href="http://www.southernsoils.com" target="_blank"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email_01_uhhway.png" width="112" height="77" border="0" style="display: block;" alt="SSTM-PSD_email_01_uhhway.png"> 
      </a> 
     </td> 
     <td colspan="3" rowspan="2"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_02_zhnbtq.jpg" width="234" height="77" border="0" alt="" style="display: block;"> 
     </td> 
     <td> 
      <a href="http://www.southernsoils.com/about.html" target="_blank"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email_03_im3rnp.jpg" width="59" height="53" border="0" alt="" style="display: block;"> 
      </a> 
     </td> 
     <td rowspan="2"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_04_bc73iu.jpg" width="17" height="77" border="0" alt="" style="display: block;"> 
     </td> 
     <td> 
      <a href="http://www.southernsoils.com/services-and-solutions.html" target="_blank"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/SSTM-PSD_email_04_nn4m6d.jpg" width="72" height="53" border="0" alt="" style="display: block;"> 
      </a> 
     </td> 
     <td rowspan="2"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_06_zvyubc.jpg" width="20" height="77" border="0" alt="" style="display: block;"> 
     </td> 
     <td> 
      <a href="http://www.southernsoils.com/contact.html" target="_blank"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email_05_xzvndy.jpg" width="71" height="53" border="0" alt="" style="display: block;"> 
      </a> 
     </td> 
     <td rowspan="2"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_08_a5kwvf.jpg" width="15" height="77" border="0" alt="" style="display: block;"> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_09_yg0who.jpg" width="59" height="24" border="0" alt="" style="display: block;"> 
     </td> 
     <td> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_10_zjyaqu.jpg" width="72" height="24" border="0" alt="" style="display: block;"> 
     </td> 
     <td> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_11_iniomw.jpg" width="71" height="24" border="0" alt="" style="display: block;"> 
     </td> 
     </tr> 
     <tr> 
     <td colspan="11"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_12_g6gbdk.jpg" width="600" height="291" border="0" alt="" style="display: block;"> 
     </td> 
     </tr> 
     <tr> 
     <td colspan="11"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/SSTM-PSD_email-FINAL_13_dcksnd.jpg" width="600" height="33" border="0" alt="" style="display: block;"> 
     </td> 
     </tr> 
     <tr> 
     <td colspan="11"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/SSTM-PSD_email-FINAL_14_xigxsd.jpg" width="600" height="410" border="0" alt="" style="display: block;"> 
     </td> 
     </tr> 
     <tr> 
     <td colspan="11"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_15_se2wpq.jpg" width="600" height="16" border="0" alt="" style="display: block;"> 
     </td> 
     </tr> 
     <tr> 
     <td rowspan="2"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/SSTM-PSD_email-FINAL_16_ataaen.jpg" width="100" height="478" border="0" alt="" style="display: block;"> 
     </td> 
     <td colspan="7"> 
      <a href="http://www.southernsoils.com/curfewpromo.html" target="_blank"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/LandingPage_nztzrz.jpg" width="394" height="64" border="0" alt="" style="display: block;"> 
      </a> 
     </td> 
     <td colspan="3" rowspan="2"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_18_r3kia6.jpg" width="106" height="478" border="0" alt="" style="display: block;"> 
     </td> 
     </tr> 
     <tr> 
     <td colspan="7"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_19_txmwcl.jpg" width="394" height="414" border="0" alt="" style="display: block;"> 
     </td> 
     </tr> 
     <tr> 
     <td colspan="11"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_20_js5p6s.jpg" width="600" height="90" border="0" alt="" style="display: block;"> 
     </td> 
     </tr> 
     <tr> 
     <td colspan="3"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_21_kx0vci.jpg" width="177" height="28" border="0" alt="" style="display: block;"> 
     </td> 
     <td> 
      <a href="http://www.southernsoils.com" target="_blank"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/WebAddress_eeisgv.jpg" width="134" height="28" border="0" alt="" style="display: block;"> 
      </a> 
     </td> 
     <td colspan="7"> 
      <a href="mailto:[email protected]"> 
      <img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/Email_d4crmz.jpg" width="289" height="28" border="0" alt="" style="display: block;"> 
      </a> 
     </td> 
     </tr> 
    </table> 
    <!-- End Save for Web Slices --> 
    </body> 
</html> 
+0

1)あなたのスクリーンショットは動作しない、2)単にコードのスクリーンショットにリンクしていない - SO下さい投稿で、あなたのコードが含まれています。 http://stackoverflow.com/help/mcve –

+0

ありがとうございました!私は私の記事を更新します:) – Megan

答えて

0

Outlook用にもう少しリセットが必要なようです。あなたの<style>タグにCSSにこれを追加してみてください:

/* What it does: Stops Outlook from adding extra spacing to tables. */ 
table, 
td { 
    mso-table-lspace: 0pt !important; 
    mso-table-rspace: 0pt !important; 
} 

/* What it does: Fix for Yahoo mail table alignment bug. */ 
table { 
    border-spacing: 0 !important; 
    border-collapse: collapse !important; 
    table-layout: fixed !important; 
    margin: 0 auto !important; 
} 
関連する問題