title: Gap between list-items with floated elements in IE7 (with isolated test case)
body: <p>I'm having huge difficulties in removing the gap between list items in <strong>IE7</strong>.</p>
  
  <p>The problem with gap between the list-items occurs when I am floating elements inside the li:s.</p>
  
  <p>A simple test case is here (with 2 different possible solutions that didn't work):
  <a href="http://jsfiddle.net/UJMr8/1/" rel="nofollow">http://jsfiddle.net/UJMr8/1/</a></p>
  
  <p>...And here is the HTML from the test:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="even"&gt;
          &lt;span class="left"&gt;left&lt;/span&gt;
          &lt;span class="right"&gt;right&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="odd"&gt;
          &lt;span class="left"&gt;left&lt;/span&gt;
          &lt;span class="right"&gt;right&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="even"&gt;
          &lt;span class="left"&gt;left&lt;/span&gt;
          &lt;span class="right"&gt;right&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="odd"&gt;
          &lt;span class="left"&gt;left&lt;/span&gt;
          &lt;span class="right"&gt;right&lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>With the following css:</p>
  
  <pre><code>li     { height: 30px; line-height: 30px; padding: 0 10px; }
  .even  { background: #ccc; }
  .odd   { background: #eee; }
  .left  { float: left; }
  .right { float: right; }
  </code></pre>
  
  <p>Any suggestions or thoughts on this? Thanks!</p>