css sprites in IE6

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.

but the images are loaded through a javascript like this :href="javascript:direct_rating1('/videos-103415','1','1730','59.92.50.233','5','0')"will DD_BelatedPNG still work?

Sam 2009-11-29 07:48:38

The background image used in UL is loaded via CSS. All you need to do is to assign a class (say "png") to every element that uses a png as bg image or an image element that sources a png file.

nimbupani 2009-11-29 15:04:21

i tried this one: <script src="DD_belatedPNG.js"></script><script> DD_belatedPNG.fix('.r1-unit rater, .r3-unit rater, .r2-unit rater, #unit_ul2405, .unit-rating, .current-rating'); </script>but it didn't help..does DD_belatedPNG supports hover pseudo class? i think that could be the problem..but by default, it should show the stars(all 3)..this thing drives me crazy :)

Sam 2009-11-30 13:03:47

ansaurus

tags:

views:

answers:

css sprites in IE6

related questions