title: Email HTML signature adds blank HTML elements on web clients, causing layout to break
body: <p>I've been trying to fix this for a few hours already, and I just can't seem to find the problem.</p>
  
  <p>I have this HTML email signature that has to wrap properly on low resolution devices.</p>
  
  <p>This is a mockup with how it should look on large-screen devices:
  <img src="https://i.stack.imgur.com/5w2no.png" alt="enter image description here"></p>
  
  <p>And this is a mockup with how it should look on small-screen devices: 
  <img src="https://i.stack.imgur.com/PmAYQ.png" alt="enter image description here"></p>
  
  <p>This is the markup:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;table width="100%"&gt;
     &lt;tr&gt;
      &lt;td&gt;
  
        &lt;!-- TEXT CELL --&gt;
        &lt;table align=left width=160&gt;
         &lt;tr&gt;
          &lt;td&gt;
            &lt;p&gt;
              &lt;span style='font-size:12.0pt;font-family:"Times New Roman","serif"; mso-fareast-font-family:"Times New Roman"'&gt;sep&lt;/span&gt;
            &lt;/p&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;!-- TEXT CELL --&gt;
      &lt;table align=left width=160&gt;
       &lt;tr&gt;
        &lt;td&gt;
          &lt;p&gt;
            &lt;span style='font-size:12.0pt;font-family:"Times New Roman","serif";
            mso-fareast-font-family:"Times New Roman"'&gt;ult&lt;/span&gt;
          &lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;!-- TEXT CELL --&gt;
    &lt;table align=left width=160&gt;
     &lt;tr&gt;
      &lt;td&gt;
        &lt;p&gt;
          &lt;span style='font-size:12.0pt;font-family:"Times New Roman","serif";
          mso-fareast-font-family:"Times New Roman"'&gt;tur&lt;/span&gt;
        &lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;!-- TEXT CELL --&gt;
  &lt;table align=left width=160&gt;
   &lt;tr&gt;
    &lt;td&gt;
      &lt;p&gt;
        &lt;span style='font-size:12.0pt;font-family:"Times New Roman","serif";
        mso-fareast-font-family:"Times New Roman"'&gt;ura&lt;/span&gt;
      &lt;/p&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is with the web clients. For some reason, there's always an extra HTML element appended next to each one of those 4 tables:
  <img src="https://i.stack.imgur.com/hH50Y.png" alt="enter image description here"></p>
  
  <p>And these are the results:</p>
  
  <p><strong>MS Outlook 2007 (properly displayed):</strong>
  <img src="https://i.stack.imgur.com/j3lZ9.png" alt="enter image description here"></p>
  
  <p><strong>Apple GMail client (properly displayed and wrapped, since it's small-resolution screen):</strong>
  <img src="https://i.stack.imgur.com/vXX10.png" alt="enter image description here"></p>
  
  <p><strong>Outlook web (there's an extra HTML element that breaks the layout, details in the pic):</strong>
  <img src="https://i.stack.imgur.com/5jttK.png" alt="enter image description here"></p>
  
  <p><strong>GMail web (somehow similar to the Outlook web):</strong>
  <img src="https://i.stack.imgur.com/yT2Zh.png" alt="enter image description here"></p>
  
  <p>I'd also like to mention that I tested these with Litmus and all looked good. I'm not sure why things are different in these let's say "real-world" situations. </p>
  
  <p>Could be related to my process of putting the HTML signature:</p>
  
  <ol>
  <li>Open the HTML page containing the signature</li>
  <li>Select all the content within that page (ctrl+A)</li>
  <li>Copy all the content (ctrl+C)</li>
  <li>Open MS Outlook 2007</li>
  <li>go to Tools -> Options -> Mail Format -> Signatures</li>
  <li>New signature -> Paste the content into the textarea -> Save the newly created signature.</li>
  </ol>