BS
4
Outlook 2021 and Office 365 bulleted lists indenting again
A couple of us have posted this under different topics, but no one seems to be responding...
All of the techniques to get bulleted lists properly left aligned are no longer working. The bullets start what appears to be about 40px left of the margin.
All of the old techniques for fixing this including Margin:0; Margin-left:0; do nothing. They still work for Outlook 2019 and earlier, but not for Outlook 2021 and Office 365 Outlook.
There is also no direct conditional statement I can find to target Outlook 2021 specifically, as it is still technically version 16.x.x.x which is the same as Outlook 2016 and 2019.
Has anyone found any solutions to this or have any ideas? Clients are starting to notice as their Outlook versions get upgraded.
I am having this issue too, struggling to find a way to resolve it, glad it's not just me going round in circles trying to figure it out 😬
Hi Lily,
I wonder if you were able to find any solutions to this issue. I am still struggling with it.
I just replied to my original post with what I have tried so far.
Has anyone had any luck on this issue?
I noticed Litmus updated their "Ultimate Guide to Bullet in HTML Email" on July 12, but it seems the only thing they added to the "Outlook Considerations" section is to "wrap the code in <div>" which they say "eliminates the margins and helps the bulleted lists flow within the confines of the email". This is still not fixing my unordered list indents in Outlook 2021 or Office 365. They did not specifically mention the issue with these versions. They even advertised this article again in their weekly email newsletter on July 28.
I have also tried removing the ul and li code altogether and using the • character and a combination of padding-left and text-indent to fix the second line indenting. This creates a nicely formatted bulleted list in Outlook, but it breaks in the Gmail App and the second lines are not indented.
So, I have still been unable to find a solution to this problem, and clients continue to bring it up. I am hoping someone else has some ideas.
Thanks!
Bill
I found this thread after reading through and trying out the <div> wrapper they suggest in "Ultimate Guide to Bullet in HTML Email". It's so frustrating that is stopped working in 2021! Dreading going back to using tables to get the margin-left to work.
Unfortunately, the only solution I have found is going back to using tables.
I can confirm that this is still an issue with the newer versions of Windows Mail and Outlook and like you mentioned the "Ultimate Guide to Bullet in HTML Email" <DIV> work around does not fix the issue either. I'm surprised this isn't getting more attention or at least more people calling for a fix.
The solution is to use the style for Outlook: mso-char-indent
It can even be used with negative numbers. It can be used in the <ul> element and in the <li>
One possible solution could be to try using the CSS property "text-indent" to adjust the position of the bullet points. For example, you can try adding the following CSS to your bulleted list:
ul {
list-style-position: outside;
margin-left: 0;
padding-left: 0;
text-indent: -20px; /* Adjust this value as needed */
}
This will move the bullet points to the left by 20px. You can adjust this value as needed to achieve the desired alignment.
Another possible solution could be to use table-based layouts for your email templates instead of relying on CSS. This may require more code and effort, but it can provide better cross-client compatibility.
ballsportsgames