# Star rating system - IE display problems

**URL:** <https://www.ruby-forum.com/t/star-rating-system-ie-display-problems/76032>\
**Category:** Rails\
**Created:** [November 15, 2006, 1:13pm UTC](https://www.ruby-forum.com/t/star-rating-system-ie-display-problems/76032 "2006-11-15T13:13:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bjhess](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/ce7236/32.png) [@bjhess](https://www.ruby-forum.com/u/bjhess)\
**Post date:** [November 15, 2006, 1:13pm UTC](https://www.ruby-forum.com/t/star-rating-system-ie-display-problems/76032/1 "2006-11-15T13:13:44Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![bjhess](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/ce7236/32.png) [@bjhess](https://www.ruby-forum.com/u/bjhess)\
**Post date:** [November 15, 2006, 10:45pm UTC](https://www.ruby-forum.com/t/star-rating-system-ie-display-problems/76032/2 "2006-11-15T22:45:56Z")

</div>

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;  
}

---

<div class="post-metadata">

**Author:** ![bjhess](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/ce7236/32.png) [@bjhess](https://www.ruby-forum.com/u/bjhess)\
**Post date:** [November 16, 2006, 2:47pm UTC](https://www.ruby-forum.com/t/star-rating-system-ie-display-problems/76032/3 "2006-11-16T14:47:51Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![bjhess](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/ce7236/32.png) [@bjhess](https://www.ruby-forum.com/u/bjhess)\
**Post date:** [November 19, 2006, 5:22pm UTC](https://www.ruby-forum.com/t/star-rating-system-ie-display-problems/76032/4 "2006-11-19T17:22:54Z")

</div>

Anyone else have experience with this plugin/technique?