title: Line-height differences between Firefox and Safari
body: <p>This is driving me a bit nuts...I'm working on a site and trying to get a <code>&lt;ul&gt;</code> to render consistently across Safari (v 7.0.1) and Firefox (v 25.0.1). I've simplified the CSS and HTML just about as much as I can... there is still a difference in the distance between the "job title" (the <code>&lt;a&gt;</code> tag) and "location" (the <code>&lt;p&gt;</code> tag) of several pixels between the two browsers.</p>
  
  <p>Fiddle is at <a href="http://jsfiddle.net/7BZGU/7/" rel="nofollow">http://jsfiddle.net/7BZGU/7/</a></p>
  
  <p>Here's my code -- is there something obvious I'm doing wrong? I understand browsers render stuff differently, but I'm not sure why two modern browsers have such a difference when dealing with pretty vanilla code...</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div id="current-openings"&gt;
          &lt;h3&gt;Current Openings&lt;/h3&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Junior Risk Reporting Analyst&lt;/a&gt;
                  &lt;p&gt;Chicago, IL&lt;/p&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Trading Data Analyst&lt;/a&gt;
                  &lt;p&gt;Houston, TX&lt;/p&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#current-openings {
      margin: 30px 0 10px 50px;
      font-family: Verdana;
  }
  
  #current-openings h3 {
      font-size: 25px;
  }
  
  #main ul {
      margin: 15px 0 0 0;
      line-height: 5px;
  }
  
  #main ul li {
      list-style-type: none;
      padding: 4px 0 25px 21px;
  }
  
  
  #main p {
      font-size: 11px;
      font-style: italic;
  }
  </code></pre>