Star rating system - IE display problems

Rails
1

Has anyone out there implemented a star rating system as described by
Dave Naffis?

http://www.naffis.com/blog/articles/2006/08/31/rails-ajax-star-rating-system

He really has an excellent HOWTO to set this up. Unfortunately I see
problems in IE. The overlayed, filled-in rating stars are not
overlaying over top of the blank stars. The overlay is starting about
2.5 stars right of where it should.

Figured I’d throw this out at this group since the comment thread on
his post is kind of dead.

2

it sounds like you have a css problem. Make sure you have this:

.star-rating li.current-rating{
background: url(…/images/stars2.gif) left bottom;
position: absolute;
height: 20px;
display: block;
z-index: 2;
}

3

This is what I have:

.star-rating li.current-rating{
background: url(/images/star_rating.gif) left bottom;
position: absolute;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}

The height difference is probably because I’m using the larger stars.
The z-index difference is probably because the hover star for users
submitting ratings is a z-index of 2; it should overlay all other stars
when the user hovers.

The text-indent thing is explained in the star rating tutorials. There
is some representative text that is pushed off the screen. I’m not
entirely sure why the text needs to be there, but it is. Is there a
bug with negative text-indents or negative layout settings in IE?

4

Anyone else have experience with this plugin/technique?