All geek questions in one place

HTML Electronic Signature Adds Blank HTML Elements to Web Clients, Breaking Layout

I have been trying to fix this for several hours now and I just can't find the problem.

I have this HTML email signature that should wrap on low resolution devices.

This is the layout with how it should look on large screen devices: enter image description here

And this is the layout with how it should look on devices with small screens: enter image description here

This is the markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>

<body>
  <table width="100%">
   <tr>
    <td>

      <!-- TEXT CELL -->
      <table align=left width=160>
       <tr>
        <td>
          <p>
            <span style='font-size:12.0pt;font-family:"Times New Roman","serif"; mso-fareast-font-family:"Times New Roman"'>sep</span>
          </p>
        </td>
      </tr>
    </table>

    <!-- TEXT CELL -->
    <table align=left width=160>
     <tr>
      <td>
        <p>
          <span style='font-size:12.0pt;font-family:"Times New Roman","serif";
          mso-fareast-font-family:"Times New Roman"'>ult</span>
        </p>
      </td>
    </tr>
  </table>

  <!-- TEXT CELL -->
  <table align=left width=160>
   <tr>
    <td>
      <p>
        <span style='font-size:12.0pt;font-family:"Times New Roman","serif";
        mso-fareast-font-family:"Times New Roman"'>tur</span>
      </p>
    </td>
  </tr>
</table>

<!-- TEXT CELL -->
<table align=left width=160>
 <tr>
  <td>
    <p>
      <span style='font-size:12.0pt;font-family:"Times New Roman","serif";
      mso-fareast-font-family:"Times New Roman"'>ura</span>
    </p>
  </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

The problem with web clients. For some reason, an additional HTML element is always added next to each of these four tables: enter image description here

And here are the results:

MS Outlook 2007 (displayed correctly): enter image description here

Apple GMail client (correctly displayed and wrapped, since this is a low-resolution screen): enter image description here

- Outlook ( HTML-, , .): enter image description here

GMail (- - Outlook): enter image description here

, Litmus, . , , "" .

HTML:

  • HTML-,
  • (ctrl + A)
  • (ctrl + C)
  • MS Outlook 2007
  • → → →
  • → → .
+4
2

, , , Outlook '07 .

, Outlook'07/'10/'13 Microsoft Word ( p msoNormal). , CSS. html , , Outlook . , . <style> html-, , .

, , - &nbsp;. , , "" Outlook'07. :

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      Text&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Text&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Text&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Text&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
  </tr>
</table>

- ( ), :

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <span style="width:150px;">Text 1</span>
      <span style="width:150px;">Text 2</span>
      <span style="width:150px;">Text 3</span>
      <span style="width:150px;">Text 4</span>
    </td>
  </tr>
</table>
+2

<table> <table>.

, CSS , (HTML- - , ). , CSS, Outlook.com. , Outlook.com HTML CSS /, (, .ExternalClass),.

, Mailchimp reset, , , Outlook. .

+1

Source: https://habr.com/ru/post/1531001/

More articles:


All Articles