HTML подпись электронной почты Приложение Gmail добавляет дополнительное пространство между каждой таблицей - PullRequest
0 голосов
/ 11 мая 2018

У меня проблема при отправке подписи электронной почты в формате HTML из MS Outlook.

Проблема заключается в том, что подпись добавляет дополнительный пробел между всеми элементами и содержимым, таким как текст, и даже горизонтальной линией подname.

Код в моем HTML-файле выглядит следующим образом:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="date=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="telephone=no" />
  <title>Boating World</title>
  <style type="text/css" media="screen">
    /*<![CDATA[*/

    /* Linked Styles */

    body {
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        background: #ffffff;
        -webkit-text-size-adjust: none
      }

    /*]]>*/
</style>
</head>
<body style="padding:0 !important; margin:0 !important; display:block !important; background:#ffffff; -webkit-text-size-adjust:none">
  <table width="500" height="180" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
    <tr>
      <td align="left" valign="top">
        <table width="500" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; width:500px; min-width:500px; margin:0" width="500">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td style=" font-family:Arial, sans-serif; font-size:13px; color:#002855; font-weight:bold; line-height:18px;">
                    Kind Regards
                  </td>
                </tr>
                <tr>
                  <td height="5" style="font-size: 0px; line-height: 5px;">&nbsp;
                  </td>
                </tr>
                <tr>
                  <td style="font-family:Arial, sans-serif; font-size:16px; color:#002855; font-weight:600; line-height:20px; text-transform:uppercase; font-stretch:semi-expanded;">
                    <!-- Write your name and surname here -->
                    ELZAAN STEENKAMP
                    <!-- End of name -->
                  </td>
                </tr>
                <tr>
                  <td height="10" style="font-size: 0px; line-height: 10px;">&nbsp;
                  </td>
                </tr>
              </table>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td style="border: none; font-size:0pt; line-height:0pt; text-align:left" height="1" bgcolor="#909090">
                  </td>
                </tr>
              </table>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td height="5" style="font-size: 5px; line-height: 5px;">&nbsp;
                  </td>
                </tr>
              </table>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td>
                    <table width="200" align="left" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td height="22" style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:20px;">T:
                          <span style="font-family:Arial; font-weight:100; color:#444444;">
                            <a href="#" style="text-decoration:none; color:#444444; cursor:default;">
                              <!-- Write your landline telephone number here (Please type in same manner "+27 (0)21 418 0840”)  -->
                              +27 (0) 21 418 0840
                              <!-- end of telephone number -->
                            </a>
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td height="22" style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:20px;">C:
                          <span style="font-family:Arial; font-weight:100; color:#444444;">
                            <a href="#" style="text-decoration:none; color:#444444; cursor:default;">
                              <!-- Write the cellphone number here (Please type in similar manner "+27 (0)82 000 0000)  -->
                              +27 (0) 83 400 3418
                              <!-- end of telephone number -->
                            </a>
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td height="22" style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:20px;">E:
                          <span style="font-family:Arial; font-weight:100; color:#444444;">
                            <!-- To put in your email address, you need to add it twice, once next to where it states mailto: and then below, be careful not to change anything other than the email name. -->
                            <a href="mailto:accounts@boatingworld.co.za" style="text-decoration:none; color:#444444; cursor:default;">
                              <!-- End of email address code -->
                             <!-- Write your email address here as well -->
                              accounts@boatingworld.co.za
                              <!-- End of email address -->
                            </a>
                          </span>
                        </td>
                      </tr>
                    </table>
                    <!--[if mso]></td><td><![endif]-->
                    <table align="left" width="20" height="20" style="font-size:20px; line-height: 20px;">
                      <tr>
                        <td>&nbsp;</td>
                      </tr>
                    </table>
                    <!--[if mso]></td><td><![endif]-->
                    <table width="200" align="left" style="display:inline-table;">
                      <tr>
                        <td style="line-height:10px">
                          <img src="https://www.boatingworld.co.za/email_signature/bw_logo.jpg" style="display:block"/>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td height="5" style="font-size: 5px; line-height: 5px;">&nbsp;
                  </td>
                </tr>
              </table>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="20" align="left">
                    <a href="https://www.facebook.com/boatingworld?v=info" style="text-decoration:none; border:none;">
                      <img src="https://www.boatingworld.co.za/email_signature/facebook.jpg" />
                    </a>
                  </td>
                  <td width="20" align="left">
                    <a href="https://twitter.com/BoatingWorld1" style="text-decoration:none; border:none;">
                      <img src="https://www.boatingworld.co.za/email_signature/twitter.jpg" />
                    </a>
                  </td>
                  <td width="20" align="left">
                    <a href="https://www.instagram.com/boating.world/" style="text-decoration:none; border:none;">
                      <img src="https://www.boatingworld.co.za/email_signature/instagram.jpg" />
                    </a>
                  </td>
                  <td width="20" align="left">
                    <a href="http://www.youtube.com/user/BoatingWorldSA1" style="text-decoration:none; border:none;">
                      <img src="https://www.boatingworld.co.za/email_signature/youtube.jpg" />
                    </a>
                  </td>
                    <td width="420" align="left">
                    </td>
                  </tr>
              </table>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                  <td height="5" style="font-size: 5px; line-height: 5px;">&nbsp;
                  </td>
                </tr>
                </table>    
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                <td style="font-family:Arial, sans-serif; font-size:13px; color:#002855; font-weight: 600; line-height:18px; text-transform:uppercase;">
                  <a href="https://www.boatingworld.co.za/" style="text-decoration: none;">
                    <span style="font-family:Arial, sans-serif; font-size:13px; color:#002855; font-weight:bold; line-height:18px; text-transform:uppercase;">
                      WWW.BOATINGWORLD.CO.ZA
                    </span>
                  </a>
                </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Я протестировал несколько решений, на которые есть ответы в других местах в Интернете на разных форумах, но безрезультатно.

Пожалуйста, кто-нибудь может помочь с этим, так как это для очень важного клиента.

Спасибо.

1 Ответ

0 голосов
/ 07 ноября 2018

У меня была такая же проблема.Я решил это, добавив ниже стили для тега p.

p { margin-top: 1px; margin-bottom:1px; margin-left:1px; margin-right:1px; }
...