HTML email tips and tricks for Outlook

1. How to fix transparent GIFs in Outlook?

Stretched images (for example, bars, borders, gradients, and so on) may not render correctly. All graphics must be saved in their proper dimensions. Do not rely on HTML-defined dimensions for images that are important to the layout of the email.

2. What version of IE is Outlook 2003 using?

When Outlook 2003 is first installed, it uses the version of Internet Explorer that is installed on that particular operating system as its rendering engine. If IE6 is upgraded to IE7, Outlook will continue to use the original version of IE (in this case IE6).

When Outlook 2003 was released in 2003, Internet Explorer 6.0 was the most popular web browser.

3. How to fix spacing around tables in Outlook?

In your TABLE tag, don't use the CSS properties "margin" or "padding." The properties Cellpadding and Cellspacing are normally safe, however margin or padding will frequently be applied to each TD in the table.

If your table includes an align attribute, for example:

The solution to the problem of unwanted spacing and gaps is a little more involved. For more information, go here.

Note: When it comes to table alignment, be particularly cautious because you never know what the Word rendering engine will interpret. We've seen it try to write its own absolute placement in the past.

4. How to fix DIVs rendering in Outlook?

Outlook may turn your divs to paragraphs on occasion. We haven't been able to find a pattern or cause for why it converts divs so far.

5. How to fix UL and Ol list tag spacing in Outlook?

Using a table instead is the safest technique to get consistent results:

6. How to fix big gap show in Outlook?

Outlook 2007's reader employs "text boundaries," which differ somewhat from "page breaks." Text borders are used to separate items within a web layout for printing purposes, but they do not produce any HTML code.

Text boundaries stretch to a maximum height of 23.7 inches (1,790 pixels) before a partition line is automatically inserted, according to our research. As a result, any tables in your email that are taller than 23.7 inches will be broken up into numerous, stacked text bounds.

The best approach is to divide your tables into two (or more) stacked tables with a height of no more than 23.7 inches. Every time you build a new table element, a new text border is produced, so one table could be 10 inches long and another 15 inches long. You won't get automatically created text boundaries as long as each table does not exceed the height constraint.

7. How to fix GIF animation in Outlook?

Outlook does not support animated GIFs, so make sure your most crucial call to action is in the first frame.

8. How to fix HTML width and height in Outlook?

Fixed-width and fixed-height box elements may not appear appropriately. If spacer visuals (rather than the email's content) determine horizontal and vertical spacing, be mindful that customized spacing and alignment may be difficult in some circumstances. Remember that photos in this client cannot be scaled, thus spacer images must be the exact size from the start. Use the HTML width and/or height attributes on table cells for the best results. The table tag's width and height will be ignored.

9. How to fix minimum 2 pixels TDs height in Outlook?

The minimum height for table cells in Outlook 2007 and 2010 is 2 pixels. If a table cell contains a 1-pixel transparent gif and a backdrop colour, for example, your "horizontal line" will appear thicker than planned.

10. How to fix background show left and right of the screen in Outlook?

Because this is a screen grab, the image in our results preview box is left aligned. There may be a lot of excess white space to the right of the screen capture if the interfaces are switched off.

If your background is white and it's hard to determine if your email is centred within the screen capture, right-click on the image, save it to your local computer, then open it in any image editor to check. Another trick is to choose your browser window and then press Ctrl-A. (Cmd-A on Mac). This will highlight the image, allowing you to view the image's edges. Simply click anywhere in the browser window to un-highlight.

11. How to centered layout in Outlook?

Because this is a screen grab, the image in our results preview box is left aligned. There may be a lot of excess white space to the right of the screen capture if the interfaces are switched off.

If your background is white and it's hard to determine if your email is centred within the screen capture, right-click on the image, save it to your local computer, then open it in any image editor to check. Another trick is to choose your browser window and then press Ctrl-A. (Cmd-A on Mac). This will highlight the image, allowing you to view the image's edges. Simply click anywhere in the browser window to un-highlight.

12. How to fix table columns large white gap in Outlook?

Make sure your TDs' colspan and rowspan properties are set to the correct values, and that each row has the correct amount of TDs. Most online browsers are forgiving if you have a greater number than required, but Outlook 2007 and 2010 will understand them even if the additional rows in your table don't exist.

13. How to fix inline CSS in Outlook?

Just before your line-height statement, try adding “mso-line-height-rule:exactly.”

For example:

Only block elements are affected by this fix. As a result, attempting to achieve the same effect within a font or span tag will fail. This is a Microsoft-only CSS property, so it shouldn't cause any issues with other email clients.

14. How to fix underlined links in Outlook?

In your style block, try this:

15. How to fix link styling in Outlook?

Outlook 2007 and 2010 will not support inline styles that link if the anchor tag does not include a "href" property..

For example:

Should be changed to:

Do you want to get rid of the underlining from your links? In your style block, try this:

16. How to fix CSS padding in Outlook?

Divs and headers have been found to be converted to paragraphs with nested spans in Outlook 2007 and 2010. The HTML container is now an inline element rather than a block element.

For example this:

Will get converted to:

One solution is to relocate the padding into the contained TD, like in:

Another option is to use paragraphs instead of headings and divs.

17. How to fix linked images blue border in Outlook?

Outlook 2003 is attempting to make it clear that this is a link. To get rid of it, add border:0; to the image's inline styles.

18. How to add margins to image so that text will wrap around it in Outlook?

On pictures, the margin and padding CSS parameters are not supported in Outlook 2007 and 2010.

Use hspace and/or vspace instead:

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

19. How to fix words breaking down to the next line in Outlook?

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

Because this is a Microsoft-only attribute, it should have no effect on other clients.

20. How to fix 1px white border around my table cells in Outlook?

In your tables, don't use the margin or padding CSS properties. The Cellpadding and Cellspacing properties are normally safe, however margin or padding may be applied to each TD in the table on occasion.

If your table includes an align attribute, for example:

The solution is a little more complicated. For additional information on how to eliminate undesired spacing or gaps between tables, click here.

21. How to fix tall images getting cropped and/or resized in Outlook?

From the top-down, Outlook truncates the topmost portion of all photos larger than 1728px. If your image is 250 pixels longer than the 1728-pixel restriction, the top 250 pixels will be clipped off.

Outlook has also been known to resize photos to a height of 1728px.

We recommend slicing tall photos and stacking them on top of one another.

22. How to fix images correct size in Outlook?

Resizing photos with CSS styles in Outlook is limited or non-existent. Outlook will take into account the height and width specified in HTML properties.

23. How to fix background images in Outlook?

Image backgrounds will not work in some versions of Outlook (07/10/13) unless you use Vector Markup Language (VML). VML is an obsolete two-dimensional vector graphics XML-based file format that is part of the Office Open XML standards. This is a difficult subject to solve, so read up on how to utilise VML to generate functioning image backdrops in this blog.

You can also use Stig's Bulletproof Email Background Images tool (http://emailbg.net/) to automate the process.

24. How can I code my email so that I will have DPI scaling?

To make your email scalable via DPI in Outlook, you'll need to accomplish three things.

1. On tables, use inline styles and px units.
2. To make VML scale, use this tag.
Simply paste this code at the very top of your email.

3. For cellspacing and cellpadding, use MSO. If you use cellspacing or cellpadding, you'll need to apply these inline styles.

25. How to fix inline styles in Outlook?

While certain styles are just not supported,!important is by far the most common offender. !important will override any inline style.

26. How to fix conditional code in Outlook?

While certain styles are just not supported,!important is by far the most common offender. !important will override any inline style.

Any of the following statements will be ignored if the initial if statement is split into two lines by a return.

For example, Outlook will not respect this decleration:
9)|(IE)]>

However it will respect this one:

27. How to fix bullet points for Outlook?

Bullets will not render in Windows Mail, Outlook Express, Outlook 2003, or Live Mail if a CSS “width” value is set in an enclosing UL. One method to fix the problem is to remove the width property.

For example, change:

to this:

Another option is to create a table for each bulleted list and utilise photos or an HTML entity as the bullet itself in every email client.

For example:

OR