Outlook 07/10/13 and inline li items

Is there a way to force Outlook 07/10/13 to display li's in an ordered list both inline & without bullets?

I am creating a responsive layout and using a list in the footer. It's working great everywhere but Outlook (of course).

I have inline styles & an embedded style sheet, but without posting everything, here's a sample of the code.

<table class="w600" bgcolor="#ffffff" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding:30px 0 0 0;"><navFoot role="navigationFoot">
        <ul class="navFoot" style="list-style:none; list-style-type:none; ">
          <li class="sel" style="float:left; display:inline-block; margin:0; padding:6px; border-right: 1px solid #eee;list-style:none;  "><myaccount><a style="font-family:Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#999999;" href="#">List Item<span class="mobile-navFoot-play">&#187;</span></a><myaccount></li>
         <li class="sel" style="float:left; display:inline-block; margin:0; padding:6px; border-right: 1px solid #eee;list-style:none;  "><myaccount><a style="font-family:Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#999999;" href="#">List Item<span class="mobile-navFoot-play">&#187;</span></a><myaccount></li>
         <li class="sel" style="float:left; display:inline-block; margin:0; padding:6px; border-right: 1px solid #eee;list-style:none;  "><myaccount><a style="font-family:Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#999999;" href="#">List Item<span class="mobile-navFoot-play">&#187;</span></a><myaccount></li>
         <li class="sel" style="float:left; display:inline-block; margin:0; padding:6px; border-right: 1px solid #eee;list-style:none;  "><myaccount><a style="font-family:Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#999999;" href="#">List Item<span class="mobile-navFoot-play">&#187;</span></a><myaccount></li>
         <li class="sel" style="float:left; display:inline-block; margin:0; padding:6px; border-right: 1px solid #eee;list-style:none;  "><myaccount><a style="font-family:Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#999999;" href="#">List Item<span class="mobile-navFoot-play">&#187;</span></a><myaccount></li>
        </ul>
      </navFoot></td>
  </tr>
</table>
Redferret, 4 years ago

Why are you trying to do this anyway? formatting list items like this is not really advisable for email. the float definitely wont work in Outlook, try it with align="left" on each but you should consider using table cells instead


Gmail app apologist
ckopyar, 4 years ago

Yes, the float element isn't targeting outlook, but other browsers. I was looking to add in another mso tag or conditional statement to make these items display inline in outlook as well.

This will be a re-purposed element, so I am taking the extra time to make it functional and compliant.

I am using a list so that the mobile style sheet is more adaptable and would prefer to make this method work, if possible.

Redferret, 4 years ago

That makes sense, try the align left fix, block elements should align correctly in Outlook with this, not sure about inline-blocks though


Gmail app apologist

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098