Hatchbuck templates are designed to look great in all email clients. However, you may notice that Outlook displays your emails differently than they were designed.
Versions of Outlook from Outlook 2007 to present use Microsoft Word to render HTML emails.
This results in:
- No support for background images in divs and table cells
- No support for the CSS float or position
- No support for the text shadow
- Poor support for padding and margin
- Poor support for CSS width and height
- Problems with nested elements background colors
Because Microsoft Word is meant for print design and not HTML, your email will result in varying displays. This includes images that look misaligned or resized.
To correct the image issue, you need to specify image sides using HTML width properties. For example, using <img width="100" src="google.com/image.jpg" /> instead of <img style="width:100px;" src="google.com/image.jpg" />.
For more information about other versions of Outlook and more details, check out this article from Litmus.