This property ensures that Outlook displays your line height at what you designate in the line-height property. Without it, Outlook doesn’t necessarily respect your line heights. If you’re working in an industry where precision is key, you’re probably very familiar with this property. Finally, make sure to include any set widths as CSS properties with pixels and not as an attribute on your tables.

Remember that images cannot be resized in this client, so spacer images must be the correct size natively to work. 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). Screen reader users often tab through content, skipping through it as a way of scanning an email.

For now I’m focusing on English content, so looking at ascii and ansi. The real issue isn’t finding a list of mso- attributes though, it’s the details as to how they work. I’m searching for a list of Microsoft specific CSS attributes with mso- prefix. Click here for more on how to remove unwanted spacing or gaps between tables. 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.

Outlook adds a border to table cells.

There are lots more MSO properties that you can use, so experiment to see if there’s anything that will fix a rendering issue for you. There are a lot of MSO prefixed styles as documented in this great resource, Stig’s MSO reference page. Stig got this recourse from Jason who shared a Microsoft Office HTML and XML Reference PDF that he in turn downloaded and decoded from this Microsoft® Office HTML and XML Reference. This is one of the things I love about the email community, people are happy to share their findings and expand on each other’s work. You can see in the image below, the text shifted down on the last column and text is spaced out a bit unlike the second image which renders in the email correctly.

• Due to the various drawbacks, we recommend avoiding the use of empty cells in email code unless you’re forcing height between table cells.
• Outlook truncates the upper portion of all images higher than 1728px from the top-down.
• It is Microsoft’s version of SVG, but the language has been depreciated and is very rarely used (yay, email!).
• Any time an element is styled with both padding and mso-padding-alt, the mso-padding-alt value takes precedence in Outlook, regardless of which order they’re in.

The stylesheet will be parsed by the Word-based versions of Outlook. To other rendering engines, the whole block of code will look like an HTML comment they should ignore. However, there isn’t quite as much support for the margin property as there is for padding with CSS. According to Can I Email, using margin could create problems in many versions of Outlook. And, be aware that Gmail doesn’t support margin with negative values. According to Can I Email, desktop versions of Outlook are the main clients without support for the padding property.

Use semantic elements

When using mso-elements you’ll see a border appear around the first element used. I’ve not worked out how to remove this yet but we can set another element first that will take the boarder then move that out of the way. 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.

Where’s my image padding?

Giving your links context will help these users to decide if they want to click through or not. Make sure elements like margin, height, font-size, and line-height use an even value of pixels, and that might just save you some trouble. The most common way to code Outlook targeted CSS is by placing an embedded stylesheet inside a conditional comment. Margin works by adding spacing outside of the border in a CSS box model, compared to padding which will add it inside the border. Try using padding anywhere you need to add space that could change dynamically. For me, it often comes down to a choice between using padding and cellpadding to force spacing.

HTML Email Spacing Techniques: What Works and Where to Use It

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? Connect and share knowledge within a single location that is structured and easy to search.

mso-line-height-rule

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. Outlook will respect height/width set through HTML attributes. For best results, use the HTML width and/or height attribute on table cells. While sighted users can visually scan or skip over non-relevant content, blind users must listen to the entire content of the email, one email at a time.

And to avoid the transparent padding issue, we override the padding with an mso-padding-alt value of 0. If a link has padding only, it renders unpadded, but if it has both a border and padding, the it renders without a background color on the padding. Padding is stored in the mso-padding-alt power of attorney attribute if the normal HTML padding attribute does not apply. Stop switching back and forth between platforms during pre-deployment and QA. With Sinch Email on Acid you can find and fix problems all in one place. Double check everything from content to accessibility and deliverability.

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.

Their HTML and XML Reference lists the supported properties, but the actual documentation of the proprietary properties is sparse. Paul Irish came up with the clever concept of using conditional comments to add different classes to the element when viewed in Internet Explorer. Important declaration which is needed to override inline styles. These problems show no signs of stopping as Word is still used as the rendering engine as of the latest Outlook 2016 for Windows.