[thelist] CSS list image weirdness

[Miles Tillinger]

In IE6 the following code has a problem where the bullet image has a pixel shaved off of it, but only on the second list item.  After hovering on the list item link the bullet image renders properly.  If I scoll the page the bullet on the 3rd item disappears until I hover on its link.

If I change the line height in the ul li to 16px (which is what I actually want it to be) the bullet images for item 2 and 3 disappear completely.  After trying different line heights I realised that in some cases the bullet image seems to be getting pushed out of the visible area of the list item.

Has anyone had to deal with this small but painful issue?  Maybe the CSS or HTML just needs some tweaking but I just can't work it out!

Cheers,

Miles.

<style>
#yportlet {
	border: 2px solid #FC3;
	border-top: 0px;
	border-bottom: 0px;
	background: #FFF;
	color: #666;
	width: 100%;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 100%;	
	}

html>#yportlet {
	width: 100%;
}

#yportlet ul {
	font-size: 100%;
	list-style:none;
	margin: 0;
	padding: 0;
	padding-left: 2px;
	padding-right: 2px;
	}

#yportlet ul li {
	/* Bullet image at http://www.streetdaddy.com/bullet.gif */	
	background: url(bullet.gif) no-repeat 2px 3px;
	margin: 0;
	padding: 0 0 5px 15px;
	line-height: 12px;
	color: #666;
}

#yportlet a, #yportlet a:link, #yportlet a:visited {
	background: transparent;
	color: #666;
	text-decoration: none;
	}

#yportlet a:hover {
	background: transparent;
	color: #006;
	text-decoration: none;
}
</style>

<div id="yportlet">
  <ul>			
    <li><a href="javascript:void(0)">Lorem ipsum dolor</a></li>			
    <li><a href="javascript:void(0)">Consectetur adipisicing elit</a></li>
    <li><a href="javascript:void(0)">Sed do eiusmod tempor </a></li>
    <li><a href="javascript:void(0)">Incididunt ut</a></li>
    <li><a href="javascript:void(0)">Labore et dolore</a> </li>
    <li><a href="javascript:void(0)">Magna aliqua</a></li>
    <li><a href="javascript:void(0)">Ut enim ad minim</a> </li>
    <li><a href="javascript:void(0)">Quis nostrud exercitation</a> </li>
    <li><a href="javascript:void(0)">Lorem ipsum dolor</a></li>
    <li><a href="javascript:void(0)">Consectetur adipisicing elit</a></li>
    <li><a href="javascript:void(0)">Sed do eiusmod tempor</a> </li>
    <li><a href="javascript:void(0)">Incididunt ut</a></li>
  </ul>
</div>