While in the process of doing some HTML emails recently I had some issues with Outlook.

Stinky, sneaky Outlook. I learned a few little techniques though that are worth sharing.

Only show this on Outlook

First and foremost, only show the content between the conditionals on Outlook.

<!--\[if gte mso 9\]></pre> <div class="only on outlook"></div>

<!\[endif\]-->

Don’t show this on Outlook (v1)

Anything with the style mso-hide: all will be hidden on Outlook. This is very handy indeed.

<span style="mso-hide: all;"> </span>

Don’t show this on Outlook (v2)

Whatever is in between the tags shouldn’t be shown on Outlook. The comment tags after the first line and before the last ensure other browser will ignore this line. Note: It’s important for these lines to have line breaks between them, otherwise it will not work.

<!--\[if !gte mso 9\]><!-->

<!--><!\[endif\]-->

Fix empty table cell showing random extra pixel

If you use a background in an empty cell I’d recommend adding these style elements. Otherwise you might find that Outlook starts putting in random 1px extra padding.

<td style="mso-line-height-alt:0; mso-margin-top-alt:1px;"> </td>

Absolutely, positively, definitely hide the contents of this tag

Background Image

This is the version I went with for the background image. Due to various issues I couldn’t use the v:fill method outlined here by Campaign Monitor. I would probably recommend using that version instead of mine.

<td background="some-img.png" style="mso-line-height-alt:0; mso-margin-top-alt:1px;">
 <!--\[if !gte mso 9\]><!-->

![](some-img.png)¬

<!--><!\[endif\]--> <!--\[if !gte mso 9\]><!--> <span style="mso-hide: all;"> </span> <!--><!\[endif\]--> </td>