Background positioning on Safari + IE - a:hover position

[Pykex]

Here's the code:

<style type="text/css">
@import url('http://manga2.vandeft.com/template/default/style.css');
</style>
<div id="toolbox">
  <h2>Tool Box</h2>
  <form method="post">
	
	<label id="score"><a href="javascript:void(0);">Rating: <strong> 1</strong>/5 (1 vote)</a></label>
	<label class="ratingblock">
		<ul id="rate_ul_1" class="unit-rating" style="width:80px;">
			<li id="scorelen" class="current-rating" style="width:16px;">1/5</li>
				<li><a href="javascript: void(0);"  title="1 out of 5" class="r1-unit rater" rel="nofollow">1</a></li>
				<li><a href="javascript: void(0);" title="2 out of 5" class="r2-unit rater" rel="nofollow">2</a></li>
				<li><a href="javascript: void(0);"  title="3 out of 5" class="r3-unit rater" rel="nofollow">3</a></li>
				<li><a href="javascript: void(0);" title="4 out of 5" class="r4-unit rater" rel="nofollow">4</a></li>
				<li><a href="javascript: void(0);"  title="5 out of 5" class="r5-unit rater" rel="nofollow">5</a></li>
		</ul>
	</label>

	<br class="spacer" />
  </form>
  <br class="spacer" />
</div>

So on Firefox ( 3.08 ) and Opera ( 9.64 ), I can view the star images pretty well; there's no error.

For Internet Explorer ( 8 ) and Safari (4 public beta), the star images are cut off. Plus, for Safari, the a:hover star images are pushed lower and hovering over them doesn't show stars 2+.

What's wrong and how do I fix it?