title: How to set line spacing of an ordered list consistently across browsers?
body: <p>I have an ordered list which uses large Georgia for the numbering and smaller Arial font for the text (as recommended at <a href="https://stackoverflow.com/questions/6112609/how-to-align-two-columns-of-text-in-css">How to align two columns of text in CSS</a>). I am using p tags within the li's so i can set the font size which also sets the associated line height (ensuring that there is normal line spacing if the li's run over more than one line). This is nearly fine, however in firefox the spacing between the bullets is much tighter than any other brower, all others seem to be adding a margin above the p tags despite explicitly setting the margins to 0. When i look at it using developer tools in Chrome it seems to add -webkit-margin-before: 1em;
  -webkit-margin-after: 1em; to the p tags which are not overridden. This may not be the cause as it also happens in non webkit browsers apart from FF and everything else i've read says these are overridden by setting the margins (which are set in the code below and at the top of my css file with an all element css margin reset). I would be immensely grateful if anyone could point out why I'm getting more spacing on all non FF browsers as I've been trying to work it out for ages and just cannot see why it's happening! FYI I have tried explicitly setting the line heights of each element but this has exactly the same effect. You can see the code below.</p>
  
  <p>Thanks so much for your help and for any advice anyone can give!</p>
  
  <p>Dave</p>
  
  <pre><code>ol {
  color: #ec008c;
  margin: 0;
  padding: 0 0 0 1.6em;
  list-style-position: outside;
  font-family: georgia, serif;
  font-size: 16px;
  font-weight: bold;
  }
  
  ol li {
  margin: 0;
  padding: 0;
  }
  
  ol li p {
  font-family: arial, sans-serif;
  font-weight: normal;
  font-size: 10px;
  color: #000000;
  margin: 0 0 4px 0;
  padding: 0;
  display: block;
  }
  
  &lt;div id="playlist"&gt;
  &lt;div id="playlistinner"&gt;
  &lt;p id="playlisttitle"&gt;The List&lt;/p&gt;
  &lt;ol&gt;
  &lt;li class="listitem"&gt;&lt;p&gt;&lt;strong&gt;Entry 1&lt;/strong&gt; - entry details&lt;/p&gt;&lt;/li&gt;
  &lt;li class="listitem"&gt;&lt;p&gt;&lt;strong&gt;Entry 2&lt;/strong&gt; - entry details&lt;/p&gt;&lt;/li&gt;
  &lt;li class="listitem"&gt;&lt;p&gt;&lt;strong&gt;Entry 3&lt;/strong&gt; - entry details that are much longer and span more than one line&lt;/p&gt;&lt;/li&gt;
  &lt;li class="listitem"&gt;&lt;p&gt;&lt;strong&gt;Entry 4&lt;/strong&gt; - entry details&lt;/p&gt;&lt;/li&gt;
  &lt;li class="listitem"&gt;&lt;p&gt;&lt;strong&gt;Entry 5&lt;/strong&gt; - entry details&lt;/p&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>