Just a quick bit of CSS that we came up with to display a percentage star rating that I’d like to share. This method requires two images – one with all of the stars highlighted, and one with them all greyed out:

Note that these images are both 100 pixels wide (for simplicity) .

CSS

.starCont {
width: 100px;
height: 16px;
display: -moz-inline-box;
display: inline-block;
background-image:url(/images/zero-star.gif);
background-repeat: no-repeat;
background-position: bottom left;
vertical-align:text-bottom;
}
.stars {
display: -moz-inline-box;
display: inline-block;
height: 16px;
background-image:url(/images/five-star.gif);
background-repeat: no-repeat;
background-position: bottom left;
vertical-align:text-bottom;
}

.stars span {
visibility: hidden;
font-size: 1px;
}

HTML

<span class="starCont"><span class="stars" style="width:<%= percentage %>px"><span><%= percentage %>%</span></span></span>

Serving Suggestion

Use as part of a voting system whereby the percentage values are injected into the page via the value of *percentage*. If your star images are larger than 100px in width, then you will need to adjust the value that is calculated by an amount proportianal to the actual width.