AUDIENCE: Administrators, Marketing Users, Designers
Outlook is aligning images and/or tables to the left
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.
My Bulletproof Button (or table) no longer has rounded corners
Reason: Outlook does not render table radius attributes.
Solution #1: Use an image as a button. (Generic button images are available through Content > Image Library > Actions > Add Stock Images)
Solution #2: Use the follow code in a Custom Content block customizing the both the HTML and VML (Vector Markup Language) to match. (Please note: A Rich Text block will truncate the MSO Conditional Coding)
<table border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td> <div><!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="URL" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="5%" strokecolor="#FF0000" fillcolor="#FF0000"> <w:anchorlock/> <center style="color:#FFFFFF;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Button Title</center> </v:roundrect> <![endif]--> <a style="background-color: #FF0000; border: 1px solid #FF0000; border-radius: 3px; color: #FFFFFF; display: inline-block; font-family: Helvetica, Arial,sans-serif; font-size: 16px; line-height: 50px; text-align: center; text-decoration: none; width: 200px; -webkit-text-size-adjust: none; mso-hide: all;" href="URL">Button Title</a></div> </td> </tr> </tbody> </table>
Table background image is not loading
Reason: Outlook does not render table background images.
Solution: Use a backup background color or an image containing image and text instead.
Email replies/forwards are using the same background color and font color as my email
Reason: The typical background or bgcolor HTML code from the message stationery will apply to the whole email string when replying/forwarding in Outlook.
- Marketer: Create a custom Stationery that uses table background colors instead of the typical background or bgcolor tag. How to remove background color from reply of html email template in Outlook 2010/2013
- 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 does not match HTML version
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.
Unable to remove horizontal gap or a tall image is cut short
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.
- 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.
- 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.
Stubborn gaps in the margin of your emails
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.