(New Editor) Common issues with Outlook

It often happens that e-mails are displayed incorrectly in Outlook compared to other mail clients. This can be caused by various reasons ranging from the lack of support for some styles to the fact that Outlook converts pixels to points. Let's consider what cases happen and how they can be solved.

If you have used bullet lists in emails, occasionally Outlook will add an extra bullet point to the end of the list:

To fix it, you have to paste the following line of code after the closing </ul> tag:

Another reason of the extra bullet is if one structure contains a list and spacer block. In this case, it is needed to locate the spacer block to the separate structure:

Usually, the indents between the elements of bullet lists are specified by margins:

But if you test it in Outlook, you'll notice that bullets appear with the default indents:

To save the needed indents, you have to remove <p> and put your text to the <li> tag, including the "style" attribute:

Additionally, now you can manage list indents globally.
Go to the "General Styles" tab → "Global Styles&Layout" and enable the "Custom Lists Styles" option.

This allows you to control bullet and numbered list indents without editing each <li> manually.

Let's imagine you created a custom list style with own icon or changed the list marker color to the custom one:

However after the sending to Outlook you can see just black list dots:

Unfortunately, it happened because not all Outlook version support custom list styles. More detailed you can find the information about support of this styles here please.

The 1px line is caused by Outlook converting pixels to points; if the result is ambiguous, for example, 12.5pt, the remaining 0.5 might result in a very thin white line:

Since this bug is caused precisely by conversion inaccuracies, the easiest solution will be to change the initial number to convert. That is, to fix it, you have to play around with paddings of the elements around the white line. For example, we will add 20 additional padding to the bottom (it is better to add even number):

If a white line appears inside the Stripe, you could set up the same background color for each block/container/structure/stripe instead of setting up a background just for one Structure.

Here is an example of how to set a background color for the stripe:

In case you face with the issue of white lines between parts of the image (if you decided to enter different parts of the images to different structures/containers), it is better to locate the entire image to one container or create such a design where all design elements will be located in 1 container:

The image may be stretched vertically or horizontally in some Outlook versions. Most likely, the original size of the image is larger than the width of the container, which means the image is scaled:

In the Stripo Editor layout, only one image size attribute is specified: width or height. To fix the problem, you need to specify a second missing attribute, so both width and height will be presented in the code:

In case you faced any issues with the buttons after the export to Outlook, for example, the button is squeezed, square instead of round, changed its color or even not visible, please try to check if you added the link to the button and turned on the Support of Outlook under Button Styles in General Styles:

Also, in case you had the activated Support of Outlook and still have issues, please try to deactivate and activate this toggle so the system will recalculate the VML values and update the button.
​
Additionally, in case of any issues with the button' color for example, please try to check if the link is started from https:// protocol.

Also more detailed you can find in these articles please - link 1 and link 2

If you export an email with a Sharepoint link to the Outlook application, you might notice that the links change color to the default blue.

To prevent this from happening, you need to wrap the link in a bit.ly link (or equivalent), that is, simply shorten the link.
​
For example, you can use https://bitly.com/.

It's a known problem that happens only with MacOS Outlook. It happens due to many reasons, like the fact that Outlook doesn't use pixels as a unit of measurement (they use so-called points) and others. As we understand it, depending on the size of button's paddings and other settings, the element's size is calculated differently for various devices.

Unfortunately, we cannot affect the MacOS behavior in this case and can recommend that you send emails using some Email Service Provider like Mailchimp, Hubspot or Brevo, etc. In this case, the issue won't happen for sure.

You can also ask someone who has Windows Outlook to make sendings, then the border won't appear too, or replace the button block with an image block.

After the export and sending from Outlook Web, you can see such rectangular edges in button.

At the moment, there is no way to fix it.

However you can try to cover the edges with extra borders in the design:

​Also in this case please try to turn off the Support of Outlook.

In case you used the custom font and long text for your CTA button, in some Outlook versions you can see that the button is cut (part of the text is not visible)

It happened because Outlook replaced the custom font to the standard one and in some cases the sizes of the button for Outlook is not visible.

In this case, it is better to change the button's size for Outlook directly in VML code (green code of the button).

Here please find the width, height and line-height of the button as it is shown on the screenshot:

The matter is that no Outlook desktop version supports the background images because of the background-image style applied for pics displaying in stripe, structure or container. This style is not supported by the Outlook email client.

Let's look at the example where we added the background image to the structure. Here is a screenshot from the editor mode.

Now, let's check how the same email looks in Outlook.

As we can see, the background image is missing in Outlook.

In this case, we can add the Outlook-friendly background image to the whole email template.

Go to the "General Styles" → "Global Styles and Layout" tab, enable the "Background image" control, and upload your image.

By the way, as another option, you can add an additional background color to the container, structure, and stripe in the editor.

More detailed you can find in this article please.

These colors will be visible in Outlook, and in the other ESP, there will be a background image.

Not all Outlook versions support adaptivity for mobile (it just automatically cut all responsive styles from the code).That is why you can see the same email as a mobile version for one service and as Web-version for mobile for Outlook.

We have investigated the most common email services without media queries and wrote an article about issues that can apply to them. More details in our blog: https://stripo.email/blog/we-choose-media-queries-stripo-manifesto/

In this case, it is better to export the template to any ESP (Email Service Provider) and make a sending from there. Since Outlook is email client and after the sending from it, you will see the desktop version on mobile.

The images are not displayed in Outlook because this service will display the pictures only if the user on a separate PC allows it. We can't affect it because there are internal settings for Outlook.

Please activate the appropriate settings and the images will be visible.

More information you can find in these articles: link 1 and link 2.

Let's image that you have the design where containers are located side by side in 1 row. However after the export and sending from Outlook, you can see that they suddenly appeared one under another:

In this case, please try to highlight your structure in Stripo, open the mobile view and turn off the responsive option of the structure:

In case after the export you can see that the image is rotated:

This happens because some graphic editors and image-capturing devices store the image orientation in the image file metadata. Some applications then read this orientation data and display the image accordingly.

To fix this, the image needs to be saved in a different way so that this metadata is removed.

Please try to resave the correct position of the image and upload it again back to your design:

After exporting and sending an email/template, certain parts of the text can change their format, color and add underlining.

It can happen due to the fact that many ESP services define parts of the text as links, such as: phone numbers, postal addresses, websites, and after sending the email/template, change their appearance.

For example, in the editor, the email will look like this:

But after exporting and sending, the text will already look like this:

In this case, we advise you to make these parts of the text as links directly in Stripo, edit them with a desired color and settings, and export the email:

The result should look like this:

Outlook does not support custom fonts and will replace it automatically to the standard one.

Bottom line: If consistency matters, stick to standard email-safe fonts.

Additionally, when you add any custom font to your Project in Stripo, you can add suitable safe fallback under the settings:

Also you can check the support of custom fonts here please.

Microsoft Word (s Outlook) uses points (pt) for font-size instead of pixels (px).

Outlook converts pixels to points and ends up with a decimal number. As a pixel is 0.75 of a point (at 96DPI), you can see 12 points in Outlook interface instead of 16px in Stripo UI ( for example, 16px X 0.75 = 12pt).

Each ESP and email clients uses their own algorithms and internal styles to change the email in Dark Mode.

As an Email editor, our goal is to provide you with high-quality email templates, however, there's no comprehensive way to cover all email services.

As an option, you can try to pick up a bit of different tones of colors for different elements of an email. In this case, the result may differ as dark modes don’t use direct color inversions. Additionally, images aren’t changed in Dark Mode.

Online resources like "The Ultimate Guide to Dark Mode for Email Marketers" can help. As an example, you can try to enhance the Dark Mode experience by using the @media (prefers-color-scheme: dark) media query to customize styles for specific email clients like Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS), and Outlook App (iOS).

You can also check the most common workarounds in our article.

Please keep in mind that Stripo cannot guarantee a perfect dark mode result because it is outside of our control.

Please be advised that this error message is likely to occur when you try to open the .oft file in the New Outlook version.

We can recommend either switching to the Classic Outlook version or using the EML file for New Outlook.

In case you faced the horizontal scroll on mobile after the sending of email from New Outlook, please try to switch to the classic version of Outlook and make sending from there.

Or as an option, please try to make such steps as workaround:
​
1. Export your OFT file from Stripo.

2. After this find your OFT file on your Desktop, right click on Stripo.oft file and open with Classic Outlook.

3. Set up the suitable subject line if it is needed.
4. Remove signature block from bottom of email.

5. Press on File>Save As>Outlook Template (*oft). Choose the suitable save location.

6. Open the new .oft file created in step 5 in either Classic or new Outlook. Emails sent from both versions will be responsive on mobile.

In case you used AMP blocks or features (such as Carousel, Accordion, Form) and exported it to Outlook, you will see that these blocks are not presented there.

It happened because Outlook does not support AMP features.

I am sending you the site where you can find information about services support such type of content.

If you want to make your own sending, your mail should be white-listed in the Google service, and I can offer you to read the article on how to do it

In this case, you can make a fallback block with the usual html blocks.
​

​

In case you exported the template to your email client and sent from there to Outlook, and can see that the email is empty (there is no content in the template), please try to use such workarounds:

- this code is added to prevent Gmail from adding a Download button to images. However some email clients or services can react on this code in the individual way.

2. Please check if the conditional comments that is added around the links for custom code is not broken:

Let's imagine that you added round corners to your images/containers/structures.

However after the export to Outlook you can see only square corners.

It happened because not all Outlook versions support border-radius style.

Here you can check the support please.

Unfortunately, it is the limitation of Outlook and we cannot influence it.

26. Why I cannot edit my eml file?

Typically, this format is used to store email messages that you receive in your mailbox. For example, if you open any email in Gmail and click Save, you will download a file with the .eml extension.

When you open this file, you can see the email itself, including the subject, sender, and recipient.

However, the new Outlook on Windows behaves differently when opening such files (including those exported from our system). In this specific version, Outlook allows you to enter the recipient’s email address and edit the content of the message.

If the exported file with the .eml extension is opened and there is no option to enter the recipient’s email address or modify the content, this means that the Outlook application being used does not support this behavior and simply treats the file as a regular saved email, which is not editable.

This is expected behavior for clients that do not support editing of this format, and it is not a bug on our side.
​
In this case, please try to switch back to Outlook Classic or export the OFT format.

Thank you for taking the time to read our articles. We hope you will find this information helpful.

If you have any additional questions, please email us at support@stripo.email.

We would be glad to talk with you.