2012-05-05 8 views
1

をランダム改行/ホワイトスペースを追加して、問題は、Outlook Webアプリケーションのプレビューペインに存在する**展望2007/2010には、編集** HTML電子メールに

私は試してみましたOutlook 2007/2010が画面の右側のプレビューボックスにレンダリングする空白/改行を取り除くことはできません。受信トレイの一覧から電子メールをダブルクリックすると、HTMLが完全に読み込まれます。ただし、分割受信ボックス一覧/電子メールプレビューウィンドウに表示されている場合は、改行/空白が生成されます。

私は本のすべてのトリックを試してみました。 border-collapse、border = 0、display:ブロック、セルスペーシング/セルパディング:0、!importantなど。

ここに私が不平を言います。 (私は、プライバシーのためにすべてをブラックアウトしている):

  1. 209.67.20.161/email/linebreaks2.png
  2. 209.67.20.161/email/linebreaks3.png
  3. を209.67.20.161/email/linebreaks.png

それは、この記事で言及される "印刷ページリミット(Microsoft Wordの)" のようになります。

www.emailonacid.com/blog/details/C13/horizo​​ntal_spacing_issues_in_outlook_2007_and_2010

しかし、いくつかの改行が非常に近いため、私はそうは思わない。

ところで、私はPhotoshopで画像をスライスし、ウェブデバイス用に保存しています。 http://209.67.20.161/email/slices.png

私のHTMLに

リンク...私の救世主:http://209.67.20.161/email/email_sliced_forss.html

は、あなたが使用して、独自のOutlookの受信トレイにHTML形式の電子メールを送信することができます。ここ

は、スライスされた画像ですctrlq.org/html-mailを開き、HTMLエディタを選択してボックスに自分のHTMLのソースをコピーして貼り付けます。

+0

私はhtml電子メールにleftmargin topmarginを使用したことはありません。あなたはそれらを削除する必要がありますさらに、私はまた、イメージが独自の高さを持って、与えられたtdのための不必要な高さがあると思う。 tdの高さも取り除くことができます。 – defau1t

答えて

4

この例のように、あなたのhtml電子メールをスタイルすると、すべての主要なクライアントでも、Lotus Notesのような古いものまで完全にレンダリングされます。

<!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"> 
     <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Untitled Document</title> 

<style media="all" type="text/css"> 
table td 
{ 
border-collapse: collapse; 
} 
</style> 
    </head> 

    <body> 
    <table width="680" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td width="20" align="left" valign="top" rowspan="2" bgcolor="#FFFFFF" style="font-size: 10px; font-family: arial; line-height:170px;">&nbsp;</td> 
      <td width="300" height="170" rowspan="2" align="left" valign="top"> 
       <img src="another image" alt="" width="300" height="170" border="0"></td> 
      <td width="33" align="left" valign="top" bgcolor="#FFFFFF" style="font-size: 10px; font-family: arial; line-height:140px;">&nbsp;</td> 
      <td width="327" colspan="2" align="left" valign="top" bgcolor="#FFFFFF" style="font-size: 14px; font-family: arial; color:#5D5B5C; line-height: 16px;">some exemple text here</td> 
     </tr> 
     <tr> 
      <td width="33" bgcolor="#FFFFFF" style="font-size: 10px; font-family: arial; line-height:30px;">&nbsp;</td> 
      <td width="138" height="30" align="left" valign="top"><a href="some link here" target="_blank"><img src="image here" alt="details" width="138" height="30" border="0"></a></td> 
      <td width="189" bgcolor="#FFFFFF" style="font-size: 10px; font-family: arial; line-height:30px;">&nbsp;</td> 
     </tr> 
    </table> 
    </body> 
    </html> 

スペーサの代わりに空のTDセルを使用する方法を説明した別のポストへのリンクです。 HTML Emails - Empty Tables/TR/TD as spacers

0

<td>style="line-height:your-image-size px;"を使用してください。また、イメージタグ内で使用style="display:block;"

関連する問題