Margin after list items in IE

I am using this code to show a <ul>:

<ul>
  <li class="odd"  id="lid-3">Breakbeat</li>
  <li class="even" id="lid-11">Classical</li>
  <li class="odd"  id="lid-16">Downbeat</li>
  <li class="even" id="lid-30">Filmmusik</li>
  <li class="odd"  id="lid-24">Folk&am开发者_开发技巧p;amp;Country</li>
  <li class="even" id="lid-40">Jazz/Blues</li>
  <li class="odd"  id="lid-48">Latin</li>
  <li class="even" id="lid-64">Pop/Mainstream</li>
  <li class="odd"  id="lid-68">Reggae</li>
  <li class="even" id="lid-75">Rock</li>
  <li class="odd"  id="lid-81">Techno/Electro</li>
  <li class="even" id="lid-35">Urban</li>
  <li class="odd"  id="lid-88">World</li>
</ul>

And this CSS:

ul span {
    display: block;
    padding: 1px 0 1px 5px;
    cursor: pointer;
    font-size: 12px;
} 

ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

ul li {
    padding: 0px 0 2px 5px;
    cursor: pointer;
    height: 14px;
    margin: 0;
    display: block;
    overflow: hidden;
    position: relative;
}

Whatever I do, the list items have a bottom margin. Where does it come from? How can I solve that problem?

Set the line-height on the li to 1em - this will make the line-height the same as the font-size.

Even better, set the line-height to 1.4, which gives it a nice spacing so the items don't run together.

This will mean if you increase the size of the font, you won't need to also change the line-height within the li's if you do - and will update if a user sets a larger font-size.

You have a height of 14px.... if you add a line-height of 14px it should fix the problem:

ul li {
    cursor: pointer;
    display: block;
    height: 14px;
    line-height: 14px;
    overflow: hidden;
    padding: 0 0 2px 5px;
    position: relative;
}

Edit: Actually 16 12 works better:

ul li {
    padding: 0px 0 2px 5px;
    cursor: pointer;
    height: 16px;
    line-height:12px;
    margin: 0;
    display: block;
    overflow: hidden;
    position:relative;
}

Keep the same markup, and replace all of your CSS with this;

ul {
    padding: 0;
    margin: 0;
}

ul li {
    padding: 0;
    margin: 0;
}