Skip to main content
Act-On Software

Outlook Rendering and Troubleshooting Guide

 

This guide is a quick listing of most (if not all) issues that are presented when Outlook renders HTML emails and how to fix them.

Images and tables alignment issues

Reason: Outlook does not render images and tables according to TEXT alignment, which is what displays correctly in our Rich Text Editor as well as web email clients.

Solution: Adjust table properties (Select table and click Insert/Edit Table button on Rich Text Editor toolbar) and set alignment to the desired alignment. For images, insert a 1x1 table with desired alignment and insert/drag the image in to the table.

Reason: Outlook does not render table radius attributes.

Solution: Use an image as a button. You can take a screenshot of the bulletproof button and then add it as an image.

Reason: Outlook does not render table background images.

Solution: Use a backup background color or an image containing image and text instead.

Reason: The typical background or bgcolor HTML code from the message stationery will apply to the whole email string when replying/forwarding in Outlook.

Solution:

  • Marketer: Create a custom Stationery that uses table background colors instead of the typical background or bgcolor tag.
  • End-User: Turn off reply/forward formatting for Text, Background, and Stationery in your Outlook Settings. Remove or change backgrounds and stationery on replies and forwards

Email line spacing issues 

Reason: Outlook converts pixels to points and scales up. This may cause a line spacing discrepancy between the HTML and Outlook version.

Solution: None available.

Reason: Since Outlook renders images in Word format, email messages are subject to a 1728px vertical limit. Any content around this limit (page break) is subject to odd gaps and clipping.

Solution:

  • Gaps: Add a line spacer or more content at the top of the message to work around the vertical limit.
  • Image Clipping: Reduce the image height to under 1728px.

Images/tables stretched beyond message width

Reason: Image/table width is not defined or set to a pixel width larger than the message width.

  • Alternatively: Image block is used with a large image and align “Left/Center/Right is selected.
  • If image is the same pixel width as the message but still wider than the message.

Solution:

  • Image Block: Use “Fit in Block”
  • Image/Table in Rich Text: Set Image/Table Width to % instead of specific pixels.

Font size, image size, spacing, and gap discrepancy between HTML and Outlook versions

Reason: The Outlook program (along with the rest of Microsoft Office Suite) is subject to DPI scaling through your Windows Visibility Settings.

Solution: Adjust Windows Appearance Settings.

  • Windows Vista, 7, 8: Windows > Control Panel > Appearance and Personalization > Display. The slider here has the follow options:
    • Smaller - 100% (Actual Rendering – This is how other/web based email clients render the email)
    • Medium - 125% (Default – Text size is increased not proportionally to table and image sizes)
    • Larger - 150% (Text size is further increased not proportionally to table and image sizes)
  • Windows 10: Settings > System > Display. The slider here will have percentages similar to above except with a larger scaling range.

Reason: If none of the other solutions resolve margin gaps, it may be due to the way Outlook converts pixels to points and inches. This conversion can cause tables and images to not convert to suitable widths. Images and tables that have pixels that cannot be converted correctly will snap to the closest 100th of an inch. This may cause some discrepancies in regards to all other elements in your email.

Solution: When possible, use percentages opposed to defined pixel widths. In situations where the entire message width is in question, change the message pixel width a larger or smaller number.

  • Was this article helpful?
Support

Have a question about this topic?

Ask the community!