HTML письмо в Gmail - содержимое таблицы появляется за пределами ячейки - PullRequest
1 голос
/ 03 января 2012

Я создал почтовую рассылку для клиента, и содержимое корректно отображается в моем браузере при тестировании страницы и в Hotmail при открытии электронной почты.Однако Gmail постоянно отображает страницу неправильно.У меня есть макет с двумя столбцами, и левый столбец просто отлично.Правый столбец, однако, не содержит содержимого - вместо этого он располагается справа от ячейки (как показано с помощью инструментов разработчика Chrome).Это происходит независимо от содержания.Я пытался просмотреть его в Gmail через Firefox и все еще получаю сообщение об ошибке.Я в тупике.

Я прочитал эти две страницы, пытаясь получить какую-то помощь, но ни одна из них не объясняет, почему содержимое ячейки будет отображаться за ее пределами.Это столбец с 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>

Ответы [ 2 ]

1 голос
/ 10 октября 2013

У меня была эта проблема даже после добавления «display: block», и вот как я ее решил:

Если содержимое ячеек слишком велико для ширины столбца, они вызывают его увеличение. Большая часть моего текста была на большой стороне, поэтому я подумал, что, возможно, проблема была в неразрывных пробелах, которые я добавил к пустым ячейкам таблицы. Я добавил атрибут «font-size: 9px» в таблицу, чтобы неразрывные пробелы были меньше. Это решило проблему.

0 голосов
/ 04 января 2012

Этот вопрос был задан ранее .

Вот ответ на этот вопрос от mahalie :

Конкретный ответна ваш вопрос, что Gmail добавляет дополнительное пространство для ячеек таблицы, которые содержат только изображение.Чтобы исправить это, добавьте style = "display: block" к этим изображениям.

Campaign Monitor - отличный ресурс, как и Mailchimp.com.Оба предоставляют несколько руководств, примеры шаблонов и т. Д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...