HTML электронная почта - дополнительная вставка в ячейке в Firefox и hotmail на ПК

Question

Я пытаюсь оформить электронную почту в формате HTML, очевидно, используя таблицы и встроенные стили. Я тестирую с помощью лакмуса .com

Я получаю довольно хорошие стабильные результаты, кроме двух клиентов - Hotmail и Gmail на Firefox.

Я встраиваю таблицу в ячейку, вот HTML-код для встроенной таблицы -

<table border="0" align="center" cellpadding="0" cellspacing="0" style="padding:0px;">  
<tr>
<td colspan="3" valign="bottom" style="font-size:0px; padding:0px; margin:0px; vertical-align:bottom;overflow:hidden; "><img src="/images/promo-border-top.jpg" width="221" height="4"></td>

<td rowspan="4" style="padding-left:20px; ">
<a href=""><img name="template_r8_c2" src="/images/shop-now-eng.png" width="118" height="32" border="0" id="template_r8_c2" alt="shop now" /></a>
</td>
</tr>
<tr>
<td align="left" height="24" style="padding:0px; margin:0px;  height:24px; background-image:url(/images/promo-border-left.jpg);background-repeat:repeat-y; background-position:left; overflow:hidden;" ><img src="/images/promo-border-left.jpg" width="4" height="24"></td>
 <td align="center" valign="middle" height="20" style="padding:0px; height:20px; overflow:hidden; line-height:10px; font-family: arial, helvetica; color: #333333;  font-size:12px margin-bottom:1px;">xxx-xxx-xxx-xxx</td>
 <td align="right" height="24" style="padding:0px; margin:0px;  height:24px; background-image:url(/images/promo-border-right.jpg); background-repeat:repeat-y; background-position:right;"><img src="/images/promo-border-right.jpg" width="4" height="24"></td>
 <tr>
 <td colspan="3" valign="top" style="padding:0px; font-size:0px; margin:0px; height:4px; background-color:yellow;overflow:hidden;"><img src="images/promo-border-bottom.jpg" width="221" height="4"></td>        
  </table>

Я поместил два изображения ниже того, как он рендерит - игнорируйте желтый бит, который был добавлен для тестирования.

Answer 1

Попробуйте добавить display:block к вашим изображениям. GMail любит добавлять немного полей для изображений , которые отображаются inline, по умолчанию.

РЕДАКТИРОВАТЬ: Исходя из комментария ниже: похоже, есть td с rowspan из 4 и только 3 возможных строк в вашем table. Что если вы изменили это 4 на 3?

Answer 2

В таблице попробуйте добавить style="line-height:50%;display:block;"

Иногда, если у вас есть ячейка таблицы, состоящая всего из одного изображения, она добавит дополнительный отступ, несмотря на ваши попытки установить ее на ноль.

Я только начинающий, когда дело доходит до HTML, но это работало, когда у меня была похожая проблема.