Style Attributes

Tailor the written content in your email to deliver the main message. Also, consider how compatible your design is with popular screen readers. The convenient thing about mso- prefixed properties is that they let you code self-contained hacks that you can save as snippets and drop into any template, without touching the stylesheet. Assuming your ESP doesn’t strip out unrecognized properties, this approach is also the least likely to cause any issues with inliners or the likes. So to prevent Outlook from rendering an inflated or deflated button, we apply a border of the same color as the fallback background color, to act as faux padding. Important declaration does override mso-padding-alt, but because Outlook ignores inline styles with !

• But don’t be surprised when your Outlook email is not displaying properly with the hover effect.
• Make sure to include ALT text; Outlook doesn’t display images by default unless people turn the feature on.
• 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.

“Justified” copy means that letter- and word-spacing is adjusted so that the text falls flush with both the left and right margins. While common in print, the inconsistent word-spacing can make justified copy hard to read. Text that is left-aligned has been proven to be easier to read for all.

Diagram showing CSS support in Outlook 2007-2019 on Windows

If that isn’t possible you can always employ this technique to show a GIF in most email clients, but hide it and show a static fallback image in Outlook. If none of the above helped fix your white lines or if you’re interested to read more about how and why these lines occur we wrote an in-depth article taking a deeper dive into it. We also recommend checking out this brilliant article from our friends over at ActionRocket. If you just need a very quick fix and your design allows for it, you can match the background color on your problem section to the containing section/table.

• I have a footer with 3 columns that are all strictly nested in a table-based layout for an HTML email template.
• First, you need to decide if the image is functional, illustrative, or decorative.
• I've tried putting the line-height on the block parent element, and the child paragraph element, and as on an ID in the style tag in the head, and every combination of the above.
• However the indent size dosn’t work in Outlook so we can only set the count, but this works either as long hand or short hand.

Stretched images (e.g., bars, borders, gradients, etc.) may not render correctly. Do not rely on HTML-defined dimensions for images that are critical to the email’s layout. You can pass props to the component via HTML attributes, to control its height. A full list of supported css can be found here, a tutorial is here.

If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family. It is Microsoft’s version of SVG, but the language has been depreciated what is the saver's credit and is very rarely used (yay, email!). Microsoft does have the documentation for VML archived online, so you can still look up how to use it to create vectors in Outlook, where it is still supported. Theoretically, when Microsoft transitions to it’s “One Outlook” model, we’ll be able to leave VML behind.

mso-text-raise

To view the full code snippets or take a deep-dive into the world of ghost columns, check out our fluid hybrid design guide and our explanation of ghost tables. If you’re seeing images that don’t look great in Outlook ensure you check that you’ve defined the correct width in the HTML. Outlook will always try to render your images at their native dimensions which can be annoying when you’re creating larger images and scaling them down, a common technique for high DPI devices. If your GIF includes a call-to-action or any information that is vital to the email’s messaging, you should always try to include it in the first frame.

Neither is necessarily good or bad, they just require different approaches and have different quirks that need to be taken into consideration. This only works when a border is set, and the options are just yes and no, if yes then a black shadow will be added to the bottom right at the same width as the border. Works just like margin also supports short hand values and longhand mso-para-margin-top, mso-para-margin-right, mso-para-margin-bottom, mso-para-margin-left. There are a few different font types used here ascii, ansi, bidi, fareast, hansi, symbol. Depending on what language you’re sending in ,you may need to adjust some of these styles accordingly (I need to do more testing around this).

Learn about common Outlook rendering issues and how to solve them

Paragraphs of copy also need room to breathe to aid readability. When scanning an email it should be easy to identify paragraphs and be able to keep your place. Those are the approaches I use to code CSS that targets Outlook only.

Resizing images

For this reason, this might be the best option for all your email messages. This means wrapping more images, paragraphs, and basically anything with a table and applying margin or padding styles to those. 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. Windows Outlook 2003 and above use Microsoft Word as a rendering engine, which can lead to some weird rendering issues. Outlook conditional comments allow us to add bits of HTML that are only read by the Word-based versions of Outlook.

For example, we could use media queries to switch 30-pixel padding on desktop to 10-pixel padding on mobile to take up less screen real estate. Instead, we’d suggest the use of cell height and/or width values, or colspan, rowspan and padding instead of empty cells. As long as you’re not using borders, this should help you achieve identical layouts in all browsers. While most email clients will respect your CSS, Outlook will not respect CSS to resize images.

Style Attributes

As with all email hacks, neither one is a universal fix, but hopefully one of them will help the next time Outlook is giving you a hard time. Then there are the mso- prefixed properties that don’t correspond to a CSS equivalent, but to an Office feature. Many of these have no effect on Outlook, whereas others have almost too much of an effect. This month marks 10 years since then-CEO Steve Ballmer announced the 2007 version of the Microsoft Office suite. To this day, its email client still sends shivers down the spines of email developers (developers developers…) around the world.