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:

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:

If you are going to use your own icons as bullets, the best option is to add such a bullet list as a table. For example, here's the code of 1 row of bullet list:

Where the first <td> is responsible for the icon and has a block image inside, the second one is empty and intended to create an indent between the icon and text. The last <td> has a block text. You could paste this part of the code right into a container:

However, in some versions of Outlook, the custom icon bullets are displayed misaligned with the text horizontally:

To fix it, you need to wrap the last table in one more <table>!

As an example:

Here is a result from Outlook:

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 five additional padding to the bottom:

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:

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:

In a situation where there are a lot of nested styles, as well as different sizes for text, the Text block looks like this:

Due to the fact that the text is wrapped in several <span> tags that indicate the text size, the <p> does not specify any text size, which means that <p> will have the default size in the letter, for example 16px. In other words, 16px + line-height 150% for the <p> creates a conditional container, behind which the inner text with a large size cannot get out and is cut off in Outlook:

To fix the problem, you need to remove unnecessary styles and set all font sizes and line spacing only for the <p>:

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.