2012-01-03 15 views
1

クライアントの電子メールニュースレターを作成しました。そのページをテストするとブラウザに正しく表示され、電子メールを開くときにHotmailに表示されます。ただし、Gmailでは一貫してページが正しく表示されません。私は2列のレイアウトを持ち、左の列はちょうどいいです。ただし、右側の列にはコンテンツが含まれていません。代わりに、セルの外側に配置されます(Chromeの開発ツールを使用して表示されています)。これはコンテンツの内容に関係なく発生します。 FirefoxでGmailで表示しようとしましたが、まだエラーが表示されます。私は困惑している。GmailのHTML電子メール - テーブルの内容がセルの外に表示される

私はこの2つのページを読んで助けを求めていますが、どちらもセルの内容が表示されない理由を説明していません。 Lorem Ipsumが正しく表示されない列です。 http://www.murraysampson.net/michele/newsletter.html そして間違って表示:ここではそれがどのように見えるかだ http://cl.ly/2e3D0z3A432g3r1x1a31

ここに私のテーブルです:

<table width="900" height="541" border="0" cellpadding="0" cellspacing="0" style="border:solid thin"> 
    <tr> 
<td colspan="2"><div align="center"><img src="http://www.murraysampson.net/michele/header.jpg" alt="Header" width="875" height="114" /></div></td> 
</tr> 
<tr> 
<td height="24" colspan="2" style="padding:0px; border-top:solid thin; border-bottom:solid thin"><p style="float:left; pading-top:10px; padding-bottom:0px; margin-top:10px; marging-bottom:0px"><span style="font-family: arial; color: #FF6600; margin-left:15px">An occasional snapshot of our activities</span></p><p style="float:right; pading-top:0px; padding-bottom:0px; margin-top:10px; marging-bottom:0px;font-family: arial; color: #666666;"><span style="margin-right:15px">January 2012</span></p></td> 
</tr> 
<tr> 
<td width="574" height="600"><img src="http://www.murraysampson.net/michele/content.jpg" width="560" height="500" style="padding-top:0px; margin-left:15px" /></td> 
<td width="326"><span style="font-family: arial; color: #FF6600; margin-right:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tellus metus, facilisis in tincidunt in, sodales id turpis. Quisque bibendum risus eget odio ultricies accumsan. Vivamus vitae venenatis nulla. Fusce sed nisl eu libero bibendum tincidunt quis sed sapien. In sed est vel ante venenatis scelerisque at at nulla. In hac habitasse platea dictumst. Mauris at tortor lorem, vehicula vestibulum erat. Aliquam ut odio nunc, in volutpat risus.</span> 
<img src="http://www.murraysampson.net/michele/signature.jpg" alt="Signature" width="170" height="62" align="bottom" /><img src="http://www.murraysampson.net/michele/portrait.jpg" alt="Portrait" width="114" height="154" align="top" /></td> 
</tr> 
</table> 

答えて

0

この質問はasked beforeてきました。ここで

mahalieからその質問から答えです:

あなたの質問に具体的な答えはGmailの画像のみが含まれている テーブルセルに余分なスペースを追加することです。これを修正するには、 style = "display:block"を追加してください。

Campaign MonitorはMailchimp.comと同様に素晴らしいリソースです。事、そしてここで私はそれを解決方法は次のとおりです。どちら は私も「ブロック表示を」:追加した後、この問題を抱えていたいくつかのガイド、テンプレートの例など

1

を提供

セルの内容が大きすぎる場合列の幅に対して、それらはそれらを拡大させる。私のテキストの大半は大きな面にあったので、私が空の表のセルに追加した区切りのないスペースが問題だったと思った。私はテーブルに "font-size:9px"属性を追加しました。その結果、非改行スペースは小さくなりました。これで問題は解決しました。

関連する問題