title: How can I make list item spacing more acceptable in html/css email for all viewers?
body: <p>First of all, this is for email, so I can't put css in the head, only in the table, td, ul, etc.</p>
  
  <p>I'll paste my code snippet and screenshots of what it looks like in IE, Firefox, and MS Outlook.</p>
  
  <pre><code>            &lt;html&gt;
               &lt;head&gt;
               &lt;/head&gt;
               &lt;body&gt;
                &lt;table cellpadding="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; border-left: solid 1px #e9e9e9; border: thin groove #CCCCCC"&gt;
                   &lt;tr bgcolor=#FF8100 valign="top"&gt;
                     &lt;td style="border-bottom-style: groove; border-bottom-width: thin"&gt;&lt;strong&gt;To Do&lt;/strong&gt;&lt;/td&gt;
                     &lt;td style="border-bottom-style: groove; border-bottom-width: thin"&gt;&lt;strong&gt;Document&lt;/strong&gt;&lt;/td&gt;
                   &lt;/tr&gt;
                   &lt;tr bgcolor=#FFCA99 valign="top"&gt;
                     &lt;td&gt;Review
                     &lt;/td&gt;
                     &lt;td&gt; 
                       &lt;ul style="margin: 0px 0px 0px 15px;"&gt;
                        &lt;li&gt;Good Faith Estimate - outlines all the fees and costs associated with your loan&lt;/li&gt;
                        &lt;li&gt;Uniform Residential Loan Application (If your property is in New York, Ohio or Mississippi, please sign this form and upload it to My Status or fax it back to me at @AGENT.FAX.)&lt;/li&gt;
                       &lt;/ul&gt;
                     &lt;/td&gt;
                   &lt;/tr&gt;
                  &lt;/table&gt;
                 &lt;/body&gt;
                &lt;/html&gt;
  </code></pre>
  
  <p>It looks great in IE, but in Firefox there's a huge margin, and in Outlook, only a tiny part of the bullet is showing.</p>
  
  <p>IE:</p>
  
  <p><img src="https://i.stack.imgur.com/qC7Et.png" alt="IE View"></p>
  
  <p>Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/G23GL.png" alt="FF View"></p>
  
  <p>Outlook:</p>
  
  <p><img src="https://i.stack.imgur.com/kVj8b.png" alt="Outlook View"></p>
  
  <p>I have to assume the audience is likely to use all of these options to view this email, so how can I make it look good universally?   I tried putting the padding in the ul style, I tried making a bullet image, using that as the li background image, and giving ul no style... that didn't work either.  Everything I try looks horrible on at least 2 out of the 3 email views.</p>
  
  <p>I'd really appreciate the help! </p>
  
  <p>(Gmail is the strictest on what css will be interpreted, so I have to follow their rules.  Those can be found here ->  <a href="http://www.campaignmonitor.com/css/" rel="nofollow noreferrer">http://www.campaignmonitor.com/css/</a>   You can see that Gmail on Android won't allow list-style-x, so I can't use any of them.  I can only use the ones with all green check marks.)</p>
  
  <p>Thanks!
  -Holly</p>