CSS Internet Explorer compatability question

[hereisnowhy]

On my blog, I've added a star rating system for each post based on this tutorial. The CSS I've used is as follows:

        .star-rating{
		list-style:none;
		margin: 0px;
		padding:0px;
		width: 100px;
		height: 20px;
		position: relative;
		background: url(star_rating2.gif) top left repeat-x;		
	}
	.star-rating li{
		padding:0px;
		margin:0px;
		/*\*/
		float: left;
		/* */
	}
	.star-rating li a{
		display:block;
		width:20px;
		height: 20px;
		text-decoration: none;
		text-indent: -9000px;
		z-index: 20;
		position: absolute;
		padding: 0px;
	}
	.star-rating li a:hover{
		background: url(star_rating2.gif) left center;
		z-index: 2;
		left: 0px;
	}
	.star-rating a.one-star{
		left: 0px;
	}
	.star-rating a.one-star:hover{
		width:20px;
	}
	.star-rating a.two-stars{
		left:20px;
	}
	.star-rating a.two-stars:hover{
		width: 40px;
	}
	.star-rating a.three-stars{
		left: 40px;
	}
	.star-rating a.three-stars:hover{
		width: 60px;
	}
	.star-rating a.four-stars{
		left: 60px;
	}	
	.star-rating a.four-stars:hover{
		width: 80px;
	}
	.star-rating a.five-stars{
		left: 80px;
	}
	.star-rating a.five-stars:hover{
		width: 100px;
	}
	.star-rating li.current-rating{
		background: url(star_rating2.gif) left bottom;
		position: absolute;
		height: 20px;
		display: block;
		text-indent: -9000px;
		z-index: 1;
                top: 0px;
                bottom:0px;
                overflow: hidden;
	}

The HTML I've used is as follows:

<ul class='star-rating'><li class='current-rating' style='width:20px'> Currently 3/5 Stars.</li>
  <li><a href='http://www.thisishereisnowhy.net/cgi-bin/mt/MT-3.2-en_US/mt-RateIt.cgi?entry_id=<MTEntryID>;value=1' title='****ty' class='one-star'>1</a></li>
  <li><a href='http://www.thisishereisnowhy.net/cgi-bin/mt/MT-3.2-en_US/mt-RateIt.cgi?entry_id=<MTEntryID>;value=2' title='Not that great' class='two-stars'>2</a></li>
  <li><a href='http://www.thisishereisnowhy.net/cgi-bin/mt/MT-3.2-en_US/mt-RateIt.cgi?entry_id=<MTEntryID>;value=3' title='Average' class='three-stars'>3</a></li>
  <li><a href='http://www.thisishereisnowhy.net/cgi-bin/mt/MT-3.2-en_US/mt-RateIt.cgi?entry_id=<MTEntryID>;value=4' title='Good' class='four-stars'>4</a></li>
  <li><a href='http://www.thisishereisnowhy.net/cgi-bin/mt/MT-3.2-en_US/mt-RateIt.cgi?entry_id=<MTEntryID>;value=5' title='****ing awesome!' class='five-stars'>5</a></li>
</ul>

The problem is that the stars looked all screwed up in IE once someone has rated that particular entry. I've tried several things to try to make it work, but to no avail. Any help you guys can offer would be greatly appreciated.

Thanks.

-Andy

[KDLA]

It could be that negative setting in the text-indent. IE doesn't take kindly to negative settings sometimes. Try taking the negative out.

KDLA