CODEWITHSUNDEEP
htmloutlookhtml-email
Lieutenant Dan
Lieutenant Dan

Reputation: 8274

outlook 2010 <li> styles and <br> are ignored

Having a problem with HTML resolving in Outlook 2010.

There should be an equal space between each <li> I have sucesfully done this with the UL style applied inline as you can see below of line-height:2; .

However this disrupted an <li> with multiple lines -- making it look strange because the <li> with multiple lines should online be line-height:1; so you can tell it's the same <li> but in Outlook 2010 the below resolves with <li> #2 following the first <li> being immediately below the first <li> with no space.

As you can see I am trying padding-top:5px; inline I have also tried padding-bottom: on the top element, I have also tried <br> and </br> and border-bottom:3px solid #fff; and I cannot create this break space correctly between these <li>'s nothing resolves in Outlook 2010. I'm about to try a white image, but would rather not, any suggestions?

<ul style="line-height: 2;">
  <li style="line-height:1;border-bottom:2px solid #fff;">lorim impsum ipsum lorim impsum ipsum<br>
    lorim impsum ipsum
</li>
  <li><span style="padding-top:5px;display:block;">lorim impsum ipsumlorim impsum ipsum</span></li>

Basically the above resolves like:

• lorim impsum ipsum lorim impsum ipsum
  lorim impsum ipsum 
• lorim impsum ipsum lorim impsum ipsum

and it needs to be: (in Outlook, Gmail and Web it's fine)

• lorim impsum ipsum lorim impsum ipsum
  lorim impsum ipsum 

• lorim impsum ipsum lorim impsum ipsum

Upvotes: 0

Views: 1385

Answers (4)

Zaman Afzal
Zaman Afzal

Reputation: 2109

This is how I fixed it. I've added pre-style in the header.

pre {
        white-space: pre-line !important;
        font-family: your-font !important;
    }
<pre>Your text. \n Your second line text.</pre>

Upvotes: 0

Vlad Bozhenok
Vlad Bozhenok

Reputation: 11

You may try to replace <br> by <div>&nbsp;</div> it works for me.

I also see that Outllok works correctly if you put <br></br>in this case it renders 3 lines but it breaks other modern email clients, they will render 6 lines.

Upvotes: 1

Damon
Damon

Reputation: 1

I have given up on using <li> for bulleted lists in my emails. Too many finicky issues with MS Outlook. Here is what I have found to work best.

I use a CSS tag to push the left margin to the right a bit (20px, in this example), then use "text-indent" to pull the first line back (-15px, in this example)

I also use the numeric character reference ID for the bullet (&#8226;)

p.bullet {
    margin: 10px 0px 20px 20px;
    text-indent: -15px;
}

<p class="bullet">&#8226;&ensp;List item 1.</p>
<p class="bullet">&#8226;&ensp;List item 2.</p>

I have had no issues with it rendering correctly in MS Outlook, or other mobile email apps.

Upvotes: 0

Gortonington
Gortonington

Reputation: 3587

Outlook removes styles in li tags, and one of those is padding. Use this guide for more info on CSS accepted in different email clients - https://www.campaignmonitor.com/css/

The alternative would be to use a table with tds using the &bull; in the left td and the copy on the right, like below:

<table>
<tr>
  <td style="line-height:1;border-bottom:2px solid #fff;">&bull;</td>
<td>lorim impsum ipsum lorim impsum ipsum<br>
    lorim impsum ipsum
</td>
</tr>
<tr>
  <td>&bull;</td>
<td><span style="padding-top:5px;display:block;">lorim impsum ipsumlorim impsum ipsum</span></td>
</tr>
</table>

Upvotes: 0

Related Questions