Интервал между строками в html-таблице рассылки в Hotmail и Gmail - PullRequest
Новая
       29

Интервал между строками в html-таблице рассылки в Hotmail и Gmail

8 голосов
/ 02 февраля 2012

Я пытаюсь создать информационный бюллетень.

Дисплей идеально подходит для веб-браузера, а также для Thunderbird ... но для веб-почты, такой как Gmail или Hotmail ... У меня есть пробелы между строками.

Вот мой код: 

<center><a href="http://www.itbag.fr/newsletter/03022012/" style="color:#E84691;font-size:10px;">Si la newsletter s'affiche mal, consultez la en ligne</a>
<table id="Table_01" width="731" height="731" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="3" align="left" valign="top">
        <a href="http://www.itbag.fr" style="display:block;height:131px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_01.jpg" width="640" height="131" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <a href="https://www.facebook.com/Itbag.fr?sk=app_128552947241828" style="display:block;height:131px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_02.jpg" width="90" height="131" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="131" alt=""></td>
</tr>
<tr>
    <td colspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr" style="display:block;height:74px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_03.jpg" width="365" height="74" border="0" alt=""></a></td>
    <td colspan="2" rowspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr/sacs-d-occasion-de-marques/1130-sac_24h_gerard_darel_en_python_neuf.html" style="display:block;height:286px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_04.jpg" width="365" height="286" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="74" alt=""></td>
</tr>
<tr>
    <td rowspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1114-cabas_burberry_beige.html" style="display:block;height:258px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_05.jpg" width="187" height="258" border="0" alt=""></a></td>
    <td rowspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr/accessoires-co/1128-expresso.html" style="display:block;height:258px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_06.jpg" width="178" height="258" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="212" alt=""></td>
</tr>
<tr>
    <td colspan="2" rowspan="3" align="left" valign="top">
        <a href="http://www.itbag.fr/accessoires-co/1107-ballerines_heritage.html" style="display:block;height:313px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_07.jpg" width="365" height="313" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
    <td align="left" valign="top">
        <a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1118-peekaboo.html" style="display:block;height:227px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_08.jpg" width="187" height="227" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <a href="http://www.itbag.fr/sac-d-occasion-de-luxe/1120-muse_two_large.html" style="display:block;height:227px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_09.jpg" width="178" height="227" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="227" alt=""></td>
</tr>
<tr>
    <td colspan="2" align="left" valign="top">
        <a href="http://www.itbag.fr/mon-compte" style="display:block;height:40px">
            <img src="http://www.itbag.fr/newsletter/03022012/images/image001_10.jpg" width="365" height="40" border="0" alt=""></a></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="187" height="1" alt=""></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="178" height="1" alt=""></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="275" height="1" alt=""></td>
    <td align="left" valign="top">
        <img src="http://www.itbag.fr/newsletter/03022012/images/spacer.gif" width="90" height="1" alt=""></td>
    <td></td>
</tr>
</table></center>

Вот прямая ссылка: http://www.itbag.fr/newsletter/03022012

И здесь в Gmail и Hotmail есть два снимка экрана:

hotmail Gmail

Кто-нибудь может мне помочь?

Ответы [ 4 ]

11 голосов
/ 21 мая 2012

Добавьте style="display: block" как упоминалось ниже 

<img style="display: block" src="sample.gif" alt="sample" />

, а также добавьте 

img { display: block }

См. исходное сообщение .

7 голосов
/ 16 мая 2012

Я решил похожую проблему с 

<td style="line-height:0"><img ... /></td>

Находится на этом Q & A , мне не разрешено уведомлять о потенциальном дублировании пока.

1 голос
/ 07 февраля 2012

Я полагаю, что на этот веб-адрес ответа нет ...

Я вижу в этом источнике: http://www.campaignmonitor.com/css/, что все письма и читатели понимают "float" ...

Так что в будущем, попробуйте с плавающей колонкой.

0 голосов
/ 16 августа 2016

Для дальнейшего использования: пожалуйста, помните, что ваш тд внутри одного и того же тр должен иметь одинаковые верхний и нижний отступы.Это происходит потому, что вы добавляете некоторое пространство к некоторым тд, а другие получают пространство, но не стиль (только к определенному вами пространству), добавьте к ним также отступы.границы тоже.

...