0

I have spent 22 hours trying to correct this issue, as I am relatively new, I thought I would give up and hand over to the experts.

I have tried to remove the additional line height added by outlook.com when you receive a message. I have tried adding the .ExternalClass as a style and then adding that to the body, but I am having no joy. I have probably added the class in the wrong position. Anyway, Id' love it if anyone could check the code for me

<style>
    .ExternalClass * {line-height: 100%} 
</style>
</head>
<body class="ExternalClass" style="font-family:Arial, Helvetica, sans-serif">
<table width="900px" border="0px" align="left" cellpadding="0px" cellspacing="0px">
  <tr>
    <td>
<table width="900px" border="0px" cellspacing="0px" cellpadding="0px" style="padding-bottom: 10px">
  <tr>
  </tr>
</table>
<table width="700" border="0" cellspacing="0" cellpadding="0" style="clear:both; overflow:hidden; padding-bottom: 40px">
  <tr>
    <td width="180">
    <table width="154" height="154" border="0px" align="left" cellpadding="0" cellspacing="0" >
      <tr>
        <td bgcolor="#0099FF"><img src="http://www.internet.com/images/emails/pic.jpg" width="154px" height="154px" alt="Dan Tanner"></td>
      </tr>
    </table></td>
    <td valign="top">
    <table style="padding:0; margin:0;" width="520" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="520" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="160" style="background-color:#173966; color:#FFF; font-size:26px; line-height: 26px; font-weight:bold; padding-left:10px;">My Name</td >
        <td width="360">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="520" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="15"></td>
        <td width="115" style="background-color:#ee2375; color:#FFF; font-size:18px; font-style:italic; padding-left:10px">Co-Founder</td>
        <td width="390">&nbsp;</td>
      </tr>
    </table></td>
  </tr>  
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><table width="520" border="0" cellspacing="0" cellpadding="0" style="font-size:18px">
      <tr>
        <td width="90">Email:</td>
        <td width="430">myemail@email.com</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="520" border="0" cellspacing="0" cellpadding="0" style="font-size:18px">
      <tr>
        <td width="90">Phone:</td>
        <td width="430">0123456789</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="520" border="0" cellspacing="0" cellpadding="0" style="font-size:18px">
      <tr>
        <td width="90">Website:</td>
        <td width="430"><a href="http://www.internet.com" target="_blank">www.internet.com</a></td>
      </tr>
    </table></td>
  </tr>
</table>
    </td>
  </tr>
</table>
</td>
  </tr>
</table>
</body>
dantan04
  • 313
  • 2
  • 5
  • 14

2 Answers2

0

It's been a while since I made an e-mail template, but last time I did, Outlook (and Outlook.com/Hotmail) didn't support the style tag. You had to inline the style using the style attribute on every element that needed it.

Can you verify in your browser whether the style tag is still present in the received e-mail? If not, then it is still stripped out prior to displaying the mail.

I guess it makes sence, since otherwise you might be able to influence the layout of Outlook itself, and they probably want to prevent that, since you could otherwise spoof the entire mail client interface by sending a malicious mail.

Have a look at this site. It shows a table of which features are supported in which clients:

http://www.campaignmonitor.com/css/

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • Thanks for your reply. When I run 'inspect element' in google chrome, I cannot seem to find my opening body style which calls for the font-family:Arial, Helvetica, sans-serif. Could you give me a quick example of how I would inline the style attribute that you mention please? Thanks – dantan04 Mar 26 '14 at 22:34
  • I think the body element is eliminated as well. Try making it a div instead, that has the `style`. HTML-mail is really much more limited than a full HTML page, and every client will have different limits. – GolezTrol Mar 26 '14 at 22:36
  • Like creating a div wrapper for all the tables? or a div for every table? Cheers – dantan04 Mar 26 '14 at 22:37
  • I think one for all will do. Just add one that starts after the body starts and ends before the body ends. I also found a clear overview of supported features in e-mail: http://www.campaignmonitor.com/css/ (open PDF or scroll down). – GolezTrol Mar 26 '14 at 22:38
  • Thanks for the PDF ref that looks very handy! – dantan04 Mar 26 '14 at 22:50
0

Simply using .ExternalClass * does not fix the issues. I recommend you use and email inliner, there are dozen out there ranging from webtools, to ASP.NET or NodeJS libraries.

For example. http://premailer.dialect.ca/

Blowsie
  • 40,239
  • 15
  • 88
  • 108