Strange padding/margin on list items

Worse in Firefox, but also in IE to a lesser degree

[Fotiman]

I have a list of nested lists. I'm seeing the list or list item background when I'm not expecting to. My intention is that there will be no vertical spacing between each item. In other words, a bottom border on one list item should butt up against the top border of the next list item or nested list.

The problem in Firefox is that 2 items display correctly, then there's background showing through, then 3 items display correctly, then background again, and then it repeats (2 items, background, 3 items, background) over and over. Note, if the background interval coincides with the end of a list, then it's li background showing through. Otherwise, it's ul background. (I gave them different colors so I could see what was happening)

In Internet Explorer, everything seems to be fine until I add borders to the list items. When I do that, I see the ul background showing at the end of every list.

Here is the HTML code, and below that the CSS code. Also, the #listParent li style has a commented block for showing the borders (uncomment it to see the IE bug).

If anyone has any ideas, I'd love to hear them. Does this have something to do with collapsing margins?

<div id="listParent"> 
 <ul> 
 <li><a href="#">Node 1</a></li> 
 <li><a href="#">Node 2</a> 
 <ul> 
 <li><a href="#">Node 2 - c1</a></li> 
 <li><a href="#">Node 2 - c2</a></li> 
 <li><a href="#">Node 2 - c3</a></li> 
 </ul> 
 </li><li><a href="#">Node 3</a> 
 <ul> 
 <li><a href="#">Node 3 - c1</a></li> 
 <li><a href="#">Node 3 - c2</a></li> 
 <li><a href="#">Node 3 - c3</a> 
 <ul> 
  <li><a href="#">Node 3 - c3 - c1</a></li> 
  <li><a href="#">Node 3 - c3 - c2</a> 
  <ul> 
  <li><a href="#">Node 3 - c3 - c2 - c1</a></li> 
  </ul> 
  </li> 
  <li><a href="#">Node 3 - c3 - c3</a></li> 
  <li><a href="#">Node 3 - c3 - c4</a></li> 
  <li><a href="#">Node 3 - c3 - c5</a></li> 
  <li><a href="#">Node 3 - c3 - c6</a></li> 
  <li><a href="#">Node 3 - c3 - c7</a></li> 
  <li><a href="#">Node 3 - c3 - c8</a></li> 
  <li><a href="#">Node 3 - c3 - c9</a></li> 
  <li><a href="#">Node 3 - c3 - c10</a></li> 
  <li><a href="#">Node 3 - c3 - c11</a></li> 
  <li><a href="#">Node 3 - c3 - c12</a></li> 
 </ul> 
 </li> 
 </ul> 
 </li> 
 </ul> 
</div> 

#listParent 
{ 
 width: 197px; 
 border: 1px solid blue; 
} 
* html #listParent { width: 195px; } 
#listParent ul 
{ 
 list-style: none; /* Remove bullets */  
 padding: 0; /* No padding on list */ 
 margin: 0; /* No margin on list */ 
 border: none; /* No border on list */ 
  
 background-color: #f00; 
} 
#listParent li 
{ 
 border: 0; /* No border on list items */ 
 padding: 0; /* No padding on list items */ 
 margin: 0; /* No margin on list items */ 
  
 background-color: #0f0; 
 /* Uncomment the following lines for IE bug */  
 /* 
 border: 1px solid #000; 
 border-top: 1px solid #ffcc66; 
 border-width: 1px 0; 
 */ 
} 
#listParent li a 
{ 
 display: block; /* Want the link to fill the li */ 
 padding: 5px; /* Want some padding around the text */ 
 text-decoration: none; /* Remove the underline */ 
} 
* html #listParent li a { width: 100%; } /* Fix for IE to fill the li */ 
#listParent li a:link, #listParent li a:visited 
{ 
 background-color: #666; /* Give the link a background color */ 
 color: #fff; /* Give the link a color */ 
} 
#listParent li a:hover, #listParent li a:active 
{ 
 background-color: #ccc; /* Change the link background color */ 
 color: #000; /* Change the link color */ 
} 
/* Create the indentations for each level */ 
#listParent ul ul a { padding-left: 15px; } 
#listParent ul ul ul a { padding-left: 25px; } 
#listParent ul ul ul ul a { padding-left: 35px; } 
#listParent ul ul ul ul ul a { padding-left: 45px; } 
#listParent ul ul ul ul ul ul a { padding-left: 55px; } 

[Fotiman]

Note, the post above did not keep all of my indenting. :-/

What is the best way for posting code? I've tried both pre and code, but it still doesn't seem to come out right. Oh well, my code problem is more important.

[Fotiman]

Update:
This strange behavior seems to be related to line height. My test case was actually nested inside some other HTML/styles. I pulled it out into it's own file and saw that the behavior was different.

This is the added code that seems be causing problems:
body
{
font: 12px/1.2em arial,sans-serif;
}

If I add this style:

#listParent li { line-height: 1.5em; }

The problem seems to go away for Firefox (but if I add the border, then I see the problem in IE still).

If anyone has any suggestions on why this happens, and if there's a better fix, I'd love to hear it.
Thanks.