title: ul li elements have more space in between in IE than firefox
body: <p>I am facing interoperability issues in IE7 and Firefox. li elements height is somewhat more in IE than Firefox.</p>
  
  <p>Here is the attached image for more clarity.</p>
  
  <p><img src="https://i.stack.imgur.com/eJb9h.jpg" alt="interop">
  <a href="http://img225.imageshack.us/i/interop.jpg/" rel="nofollow noreferrer">http://img225.imageshack.us/i/interop.jpg/</a></p>
  
  <p>Code for html and CSS:</p>
  
  <pre><code>&lt;ul class="sa-progress"&gt;
  &lt;li class="sa-progress-current"&gt;&lt;span id="intro_idx" &gt;Select VPN Type&lt;/span&gt;&lt;/li&gt;
  &lt;li class="sa-progress-default"&gt;&lt;span id="local_idx" &gt;Local&lt;/span&gt;&lt;/li&gt;
  &lt;li class="sa-progress-default"&gt;&lt;span id="remote_idx" &gt;Remote&lt;/span&gt;&lt;/li&gt;
  &lt;li class="sa-progress-default"&gt;&lt;span id="vpn_idx" &gt;VPN&lt;/span&gt;&lt;/li&gt;
  &lt;li class="sa-progress-default"&gt;&lt;span id="remote_dyn_idx" &gt;Remote Users&lt;/span&gt;&lt;/li&gt;
  &lt;li class="sa-progress-default"&gt;&lt;span id="traffic_idx" &gt;Traffic Profile&lt;/span&gt;&lt;/li&gt;
  &lt;li class="sa-progress-default"&gt;&lt;span id="review_idx" &gt;Review &amp;amp; Commit&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  ul.sa-progress {
      color: #333333;
      line-height: normal;
      padding: 7px 0 10px 10px;
  }
  ul.sa-progress {
      font-size: 12px;
  }
  </code></pre>
  
  <p>Please let me know what am missing here.
  Any help would be greatly appreciated.</p>
  
  <p>Thanks</p>