Menu
this is a simple problem, I set a padding left of 15 pixels in my code in my ul element, the padding does not look the same at all in the two platforms ( gmail & outlook )
<ul style="padding-left: 15px !important; margin: 0 !important;">
<li
style="text-align: left !important; font-size: 14px; font-family: Helvetica, sans-serif, sans-serif !important;">
<span
style="color: #055151; line-height: 150%; font-family: Helvetica, sans-serif;">
Exemple de liste à puce</span>
</li>
</ul>
This how it looks in gmail :
And how it looks in outlook :
Not mentionning that there is a difference on mobile apps too.
Is there a way to fix this easily ? I am looking for something like in the Outlook version!
I need compatibility on those two platforms alone, no need to yahoo or something else!
Any help would be much appreciated really!!!
324
The problem is that each email client has different defaults, and also, there are further quirks like how Outlook ignores styling in the <ul>/<ol>. Therefore, we need to reset the defaults across all elements.
Also, for consistency, we must specify margins only in the <li> items. Not padding, and not the <ul>/<ol>.
<ul style="margin:0;padding:0;">
<li style="margin:0 0 0 30px;padding:0;">Point 1</li>
<li style="margin:0 0 0 30px;padding:0;">Point 2</li>
<li style="margin:0 0 0 30px;padding:0;">Point 3</li>
</ul>
Then, for Outlook desktops, we must fix the text-indent. Add the following in the <head> section:
<!--[if gte mso 9]>
<style>
li {
text-indent:-1em;
}
</style>
<![endif]-->
Now, if you wanted some space between the items, and at the top and bottom of the list, you could do the following:
<ul style="margin:0;padding:0;">
<li style="margin:20px 0 3px 30px;padding:0;">Point 1</li>
<li style="margin:3px 0 3px 30px;padding:0;">Point 2</li>
<li style="margin:3px 0 20px 30px;padding:0;">Point 3</li>
</ul>
This gives 20px above and below the list, and 6px in-between each list item (3 + 3). The 30px margin is the margin from the left.
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
