Outlook HTML Emails: How to Fix 11 Common Rendering Issues
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.
- And to avoid the transparent padding issue, we override the padding with an mso-padding-alt value of 0.
- This property ensures that Outlook displays your line height at what you designate in the line-height property.
- 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.
- There are a lot of MSO prefixed styles as documented in this great resource, Stig’s MSO reference page.
- However, the situation isn’t quite as frustrating since Microsoft switched the Outlook.com rendering engine to the Office 365 rendering engine.
- Let us know in the comments section below or hit us up on LinkedIN, Facebook or Twitter.
If you need to add space between , see the Row Spacer example instead. The Spacer component is defined in src/components/spacer.html. The specified is used in the calculation of the line box height. Values given in em units may produce unexpected how to print invoice from i results (see example below). Alex Ilhan is a freelance email specialist and email developer based in the United Kingdom with experience working for both brands and agencies. He’s also spoken on a variety of topics at email industry conferences.
mso-bullet-image
Ok this is a complicated one, it’s similar to text-shadow but works a little differently. It’s only needed if you have a very small line height, set with a fixed unit. When using unitless values they need to be whole numbers and not decimals. I assume that a ctrl+f on mso, will quickly show you all you need?
Theoretically, when Microsoft transitions to it’s “One Outlook” model, we’ll be able to leave VML behind. The key takeaway is that we’re working with two different rendering engines—Word and Webkit. Neither is necessarily good or bad, they just require different approaches and have different quirks that need to be taken into consideration. I just had the same difficulties to find a list of MS Office prefixed style properties.
mso-border-alt
This requires setting a mso-element-frame-height, mso-element-frame-width or mso-element-wrapto make the hspace work. This requires setting a mso-element-frame-height, mso-element-frame-width or mso-element-wrapto make the vspace work. That may not be something you can actually use in an email, but you can use VML to add buttons with rounded corners to your code, background images, and background gradients. You can also use VML to create faux absolute positioning, shadow effects, or a fallback to support CSS art in Outlook. The name “Outlook” covers several different email clients with a couple of different rendering engines and at least two different viewing settings. Outlook has poor or no support for resizing images through CSS styles.
mso-color-alt / mso-style-textfill-fill-color
These additional steps are necessary to ensure optimal rendering and functionality in various versions of Outlook. Often adding a ghost break will temporarily fix the rogue white lines in Outlook. Similar to ghost columns, a ghost break is a line break that we add targeted only towards Outlook. You can also try manually changing heights, font sizes and line-heights to achieve the same outcome. For some folks, the fix is as simple as changing font sizes from odd numbers to even numbers. For example, if you have a font size of 13px or 15px, try converting it to 14px.
mso-element-frame-vspace
It’s commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.
The following table shows the style attributes used by Microsoft Office 2000. It is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well. With Email on Acid, you get unlimited email testing with every paid plan. You’ll also get deliverability and accessibility checks as well image and URL validation and many other valuable features.
Proper ALT text usage is often the key factor in getting your recipient to click that “allow images” button so they can see your email in all its glory. Don’t leave your Outlook-specific fixes to guess work, ensure they look great on every version of Outlook and simplify your Outlook email troubleshooting. It’s important to test your email across every device or email client that your recipients may be opening on, but it’s especially important to test for Outlook. In certain cases Outlook will not apply the link styling you’ve applied to your hyperlinks. That depends on the version in which your animation is opened. Outlook and its lack of support for animated GIFs has long-been a sore point for many designers.