Outlook

When Outlook 2003 is installed for the first time, it uses the version of Internet Explorer that is installed on that particular OS as its rendering engine. From there, if IE6 is upgraded to IE7, Outlook will still use the original version of IE (in this case IE6).

When Outlook 2003 came out in 2003, IE 6.0 was the most popular web browser.

Here’s more on that topic.

Stretched images (e.g., bars, borders, gradients, etc.) may not render correctly. All graphics should be saved in the correct dimensions. Do not rely on HTML-defined dimensions for images that are critical to the email’s layout.

Outlook does not support animated GIFs, instead it only shows the first frame of your animation, so make sure the most important call to action is in that frame.

Avoid using “margin” or “padding” CSS properties in your TABLE tag.  Cellpadding and Cellspacing attributes are generally safe but margin or padding will often be added to every TD within the table.

If you are using an align attribute on your table, for example:

<table align="left"> 

The fix for removing unwanted spacing and gaps is a little more involved. Click here for more on that.

Note: Be extra cautious with table alignment, you never know what the interpretation will be from Word rendering engine.  We’ve seen instances where it tries to write it’s own absolute positioning. 

Outlook sometimes converts your divs to paragraphs. To date, we have not been able to detect a rhyme or reason for why it converts divs.

The safest way to get consistent results is to use a table instead:

<table cellpadding="2" cellspacing="2" border="0"> 
    <tr>
        <td valign="top">&#8226;</td>
        <td>Test</td>
    </tr>
    <tr>
        <td valign="top">1.</td>
        <td>Test</td>
    </tr>
</table> 

Outlook 2007 and 2010 impose a 2-pixel height minimum for table cells. So, for example, if a table cell contains a 1-pixel transparent gif and a background color, your ‘horizontal line’ will appear thicker than expected.

Within its viewer, Outlook 2007 uses “text boundaries” which differ slightly from “page breaks.” Text boundaries are used to separate elements within the web layout for purposes of printing and don’t actually output any HTML code.

From our research, we learned that text boundaries stretch to a maximum height of 23.7 inches (aprox. 1,790 pixels) before a partition line is automatically inserted. Therefore, If you have any tables that are higher than 23.7 inches within your email, it will get broken up into multiple, stacked text boundaries.

The best solution is to break out your tables into two (or more) stacked tables that are less than 23.7 inches in height. A new text boundary is created every time you create a new table element so one table might be 10 inches and another might be 15 inches. As long as each individual table does not exceed the height constraint you won’t end up with automatically generated text boundaries.

If this solution does not work for you, click here for more information and a few alternative workarounds.

Box elements with a fixed width and height may not display correctly. If horizontal and vertical spacing is determined by spacer graphics (as opposed to the email’s content), be aware that customized spacing and alignment may be impossible in some cases.

Remember that images cannot be resized in this client, so spacer images must be the correct size natively to work.

For best results, use the HTML width and/or height attribute on table cells. Width/height on the table tag will be ignored.

Because this is a screen capture, the resulting image is left aligned within our results preview pane. If you have the interfaces turned off, there might be a lot of extra white space to the right of the screen capture. 

If your background is white and it is difficult to tell if your email is centered within the actual screen capture, you can right click on the image, save it to your local computer and open it up in an any image editor to ensure that your email is centered within the screen capture.  Another trick is to make sure your browser window is selected and type Ctrl-A (Cmd-A on Mac). That will highlight the image so you can see the borders of the image. To un-highlight simply click anywhere in the browser window.

Because this is a screen capture, the resulting image is left aligned within our results preview pane. If you have the interfaces turned off, there might be a lot of extra white space to the right of the screen capture. 

If your background is white and it is difficult to tell if your email is centered within the actual screen capture, you can right click on the image, save it to your local computer and open it up in an any image editor to ensure that your email is centered within the screen capture.  Another trick is to make sure your browser window is selected and type Ctrl-A (Cmd-A on Mac). That will highlight the image so you can see the borders of the image. To un-highlight simply click anywhere in the browser window.

Try adding “mso-line-height-rule:exactly” just before your line-height declaration.

For example:
<td style="mso-line-height-rule:exactly; line-height:50px;> 

This fix ONLY works on block elements. So trying to achieve the same effect inside a font or span tag will not work. Since this is a Microsoft only CSS property, it should not interfere with any other email client.

Be sure your colspan and rowspan attributes within your TDs are set to the correct value, and that you have the correct number of TDs on each row. Most web browsers are very lenient if you have a higher value than required, but Outlook 2007 and 2010 will interpret them even if the additional rows do not exist in your table.

If an anchor tag does not include an “href” attribute, Outlook 2007 and 2010 will not support inline styles that link.

For example:
<a style="font-size: 20px; color: #004990;">Shop Flooring </a> 

Should be changed to:
<a href="http://www.example.com" style="font-size: 20px; color: #004990;">Shop Flooring </a> 

Need to remove the underline from your links? Try this in your style block:

a:link        {text-decoration:none;} 

Try this in your style block:

a:link {text-decoration:none;} 

This is caused by Outlook 2003 trying to make it clear that this is a link. To remove this, add border:0; to your inline styles on the image.

Outlook 2007 and 2010 have been known to convert divs and headings to paragraphs with nested spans. This changes the HTML container from a block element to an inline element. 

For example this:

<h2 style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;">
   NEW FASHIONS
</h2> 

Will get converted to:

<p class=MsoNormal style='mso-outline-level:3'>
   <b>
     <span style='font-size:11.5pt'>NEW FASHIONS<o:p></o:p></span>
   </b>
</p>  

One fix is to move your padding into the containing TD, for example:

<td style="padding: 17px 0 0 0">
   <h2 style="font-size: 15px; font-weight: bold; margin: 0">NEW FASHIONS</h2>
</td> 

Another fix is to avoid headings and divs and use paragraphs instead.

If you have text within a table, for instance “aaaaaaaaaaaaaaaaa” and you want it to wrap, try adding this style:

<td style="word-break:break-all;"> 

This is a Microsoft only property so it should not adversely affect other clients.

Outlook 2007 and 2010 do not support the margin or padding CSS properties on images.

Try using hspace and/or vspace:
<img src="http://www.w3.org/example.jpg" align="left" vspace="10" hspace="10" /> 

Or add the additional spacing to the image itself (in pixels).

Outlook truncates the upper portion of all images higher than 1728px from the top-down. So, if your image is 250px longer than the 1728px limit, 250px will get cropped off the top.

We’ve also seen Outlook re-scale images so that its height is 1728px.

We suggest that you slice tall images and stack them on top of each other.

Avoid using margin or padding CSS properties in your tables.  Cellpadding and Cellspacing attributes are generally safe but margin or padding will sometimes be added to every TD within the table.

If you are using an align attribute on your table, for example:

<table align="left"> 

The fix is a little more involved. Click here for more on how to remove unwanted spacing or gaps between tables.

In some versions of Outlook (07/10/13) image backgrounds won’t work without using Vector Markup Language (VML). VML is a deprecated, XML-based file format for two-dimensional vector graphics which is part of the Office Open XML standards. This is a complicated problem to fix, so check out this blog about how to use VML to create functional image backgrounds.

You can also try Stig’s Bulletproof Email Background Images tool (http://emailbg.net/) which does a lot of the work for you.

Outlook has poor or no support for resizing images through CSS styles. Outlook will respect height/width set through HTML attributes.

You’ll want to do three things to make your email scalable via DPI in Outlook.

1. Use inline styles and px units on tables.
2. Use this tag to make VML scale.
Just add this code to the top of your email.
<html xmlns=“http://www.w3.org/1999/xhtml”
 xmlns:v=“urn:schemas-microsoft-com:vml”
 xmlns:o=“urn:schemas-microsoft-com:office:office”>

<head>
<!—[if gte mso 9]><xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml><![endif]—>
</head> 
3. Use MSO for cellspacing and cellpadding.
You’ll need to use these inline styles wherever you use cellspacing or cellpadding.
<table cellspacing=“10” cellpadding=“10” style=“mso-cellspacing: 10px; mso-padding-alt: 10px 10px 10px 10px”>
...
</table> 

While some styles are just not supported, the most common culprit here is !important. Any inline style with !important will be ignored.

Whenever the opening if statement is broken onto two lines by a return, it’ll ignore any of the following statements.

For example, Outlook will not respect this decleration:
<!—[if (gte mso
9)|(IE)]>

However it will respect this one:
<!—[if (gte mso 9)|(IE)]>

If you have a CSS “width” property set in a containing UL, your bullets will not render in Windows Mail, Outlook Express, Outlook 2003 and Live Mail.  Remove the width property is one way to resolve the issue.

For example, change:
<ul style="width:250px; padding-top: 20px; margin-top: 2px;"> 

to this:
<ul style="padding-top: 20px; margin-top: 2px;"> 

Another way to resolve this in every email client is to create a table for every bulleted list and use images or an HTML entity as the bullet itself.

For example:

<table>
<tr>
<td><img src="http://www.example.com/dot.gif"></td>
<td>Insert text here</td>
</tr>
</table> 

OR
<table>
<tr>
<td>•</td>
<td>Insert text here </td>
</tr>