Email HTML signature adds blank HTML elements on web clients, causing layout to break

I've been trying to fix this for a few hours already, and I just can't seem to find the problem.

I have this HTML email signature that has to wrap properly on low resolution devices.

This is a mockup with how it should look on large-screen devices:

And this is a mockup with how it should look on small-screen devices:

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 is with the web clients. For some reason, there's always an extra HTML element appended next to each one of those 4 tables:

And these are the results:

MS Outlook 2007 (properly displayed):

Apple GMail client (properly displayed and wrapped, since it's small-resolution screen):

Outlook web (there's an extra HTML element that breaks the layout, details in the pic):

GMail web (somehow similar to the Outlook web):

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.

Could be related to my process of putting the HTML signature:

  1. Open the HTML page containing the signature
  2. Select all the content within that page (ctrl+A)
  3. Copy all the content (ctrl+C)
  4. Open MS Outlook 2007
  5. go to Tools -> Options -> Mail Format -> Signatures
  6. New signature -> Paste the content into the textarea -> Save the newly created signature.

Answers


I'm pretty confident what you are asking for can not be done in Outlook '07 in a signature.

This is because Outlook '07/'10/'13 use the Microsoft Word engine and add their own junk after send (the p msoNormal tags). Because it is added after send, you can not use inline CSS. In html email design, often designers will add styles to the style tag to zero out these unwanted tags in anticipation of Outlook doing it's thing. This wouldn't work for you because you are are using a signature only. You can try including a <style> tag in the signature html, but I'm doubtful it would work.

The best suggestion I have to mimic this kind of behavior is with &nbsp;. Very hack way, but it may be the only option you have for "floating" if sending from Outlook '07. Example:

<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>

Something like this might also work, (definitely a lot neater) but I haven't tested it:

<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>

You could easily accomplish that layout using a single <table> and making each of those items a column, instead of having 4 separate <table> elements.

Make sure your CSS is all inline, and try to use tables for layout as much as possible (HTML e-mails is the only time this advice is acceptable). Additionally, try to only use CSS that is compatible with Outlook.com. Note that Outlook.com actually replaces some of your HTML with its own and takes any inline CSS and replaces that with a class/id that it places in its stylesheet at the top of the converted e-mail (hence the .ExternalClass resets).

Also, you may want to look at the Mailchimp reset, for fixing various issues encountered with e-mail providers such as Outlook.com.


Need Your Help

Why is my Ajax not sending the information to the external file?

javascript php jquery ajax tcpdf

The idea is I am sending data to an external php via ajax, where that external php will create a pdf using tcpdf, and then return that pdf to me. But something's wrong.

Keeping state in a constantly running python script

python python-2.7

I have a python 2.7 script which is getting pretty unweildly.