css sprites in IE6

Question

I'm using the following code for star rating. The code works fine in firefox but it sucks (as usual) in IE6. The stars doesn't even show up in IE6, though they work perfectly. it uses sprites to display the stars. Also, I've fixed the PNG transparency issue with IE6.

<div id="ajaxratemasuga"><div class="ratingblock">
    <ul style="width: 90px;" class="rating" id="unit_ul1730">
        <li style="width: 0px;" class="current-rating">Currently 0.00/3</li>
        <li><a rel="nofollow" class="r1-unit rater" title="1 out of 3" href="javascript:direct_rating1('/videos-103415','1','1730','59.92.50.233','5','0')">1</a></li>
        <li><a rel="nofollow" class="r2-unit rater" title="2 out of 3" href="javascript:direct_rating1('/videos-103416','2','1730','59.92.50.233','5','0')">2</a></li>
        <li><a rel="nofollow" class="r3-unit rater" title="3 out of 3" href="javascript:direct_rating1('/videos-103417','3','1730','59.92.50.233','5','0')">3</a></li>
    </ul>
</div></div>

CSS

.rating {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(../images/starrating.png) repeat-x scroll left top;
    height:30px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
}

.unit-rating a.r1-unit:hover {
    width:18px;
}

.unit-rating a.r1-unit {
    left:0;
}

.unit-rating li a {
    display:block;
    height:30px;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
    padding:0;
    position:absolute;
    text-decoration:none;
    text-indent:-9000px;
    width:18px;
    z-index:20;
}

I'm not sure whether I've provided all the CSS necessary. If u need more please to analyse please comment.

Answer 1

As far as I know, the twin helix solution does not let background images repeat. You are better off using DD_BelatedPNG, which allows background repeat and positioning.