By now, people’s grasp as a whole has grown quite a bit I feel and I think that this time does not warrant a full-fledged tutorial (also, my lack of time doesn’t help either). However, there are some significant issues with my most current Star Rating tutorial and I have always wanted to take another go at it.

In my thoughts, here is what the CSS Star Rating, part Deux is missing:

• Cross-browser support: I received multiple emails and comments stating that it was pretty quirky in browsers like IE6 and even Firefox.
• Ajax & Back end code : This is a need, but I’m not gonna tackle it. Plenty of people have contributed to the creation of the ajax or back end code, including slim, jon, and an especially nice presentation and project over at masuga. Needless to say, these guys do a great job and I don’t need to replicate their work.
• Tables and other wierdness: I had tons of report that the rater didn’t work in table cells and only God knows how many other situations.
• Inline Ratings: People also wanted to place their ratings inline. The current rater didn’t allow for that at all. Also, my feeble attempts to coerce it to work were of no avail.
• Uber mini Ratings: People also wanted little mini raters. Well, guess what. Problems arose with those too :(
• Pseudo-State: I say pseudo, because using only CSS, I cannot create a rating system that will hold when you click it and when you refresh it. Back end scripts an databases are needed for that. Basically, it still would be nice when you click the 3rd star, for it to stay there for a little bit.
• Percentage-based widths: This wasn’t really a request, but It seemed if a person wanted to make a different sized rater, there was a lot of repeating of 20px. 40px, 60px….etc. There just was a lot of exact dimension redundancy.

Well, thats the list! No wonder I wasn’t really happy with the thing. I remember when I first created it, it was my baby. Now, I hate the previous version. Whatever. Ok, enough rant from me. Lets get you guys up into the nerdy stuff.

Ok, so for a refresher, here is the XHTML:

No big shockers with the code. Basically new to the scene here is the fact that the inline rater is wrapped with a span and the small rater has an additional “small-star” class added. I’m sure you can imagine that you can call “small-star” any class you would like and adapt the CSS to your liking for the right size and image you would like.

Next, in true throw-it-in-your-face tutorial style, here is the CSS:

Basic Rater CSS

.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{
background: url('/star.gif') left -1000px repeat-x;
}
.star-rating{
position:relative;
width:125px;
height:25px;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
background-position: left top;
}
.star-rating li{
display: inline;
}
.star-rating a,
.star-rating .current-rating{
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:25px;
line-height:25px;
outline:none;
overflow:hidden;
border: none;
}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{
background-position: left bottom;
}
.star-rating a.one-star{
width:20%;
z-index:6;
}
.star-rating a.two-stars{
width:40%;
z-index:5;
}
.star-rating a.three-stars{
width:60%;
z-index:4;
}
.star-rating a.four-stars{
width:80%;
z-index:3;
}
.star-rating a.five-stars{
width:100%;
z-index:2;
}
.star-rating .current-rating{
z-index:1;
background-position: left center;
}

The real difference between this CSS and my previous Star Rating tutorials has to do with the addition of :active and :focus pseudo states to hold the rating when clicked, percent-based widths, and the elimination of the use of floats to accomplish the CSS. It is important to mention also the use of overflow:hidden to keep the rater from spilling out over its set width and height as well as the use of a set pixel height line-height. I found that Internet Explorer really had issues with the rater CSS when resizing text, so if I set it to an exact pixel height, issues were resolved.

Inline Rater CSS

.inline-rating{
display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;
vertical-align: middle;
}

I found that if I wrapped the Star Rater unordered list with a span with a class of “inline-rating” and used the CSS rules above, I could achieve an inline rater. My apologies for the non-standard CSS attributes, but achieving an inline-block behavior in CSS is not an easy task. Most importantly to me is that it works and works in quite a few browsers.

Smaller Rater CSS

.small-star{
width:50px;
height:10px;
}
.small-star,
.small-star a:hover,
.small-star a:active,
.small-star a:focus,
.small-star .current-rating{
background-image: url('/star_small.gif');
line-height: 10px;
height: 10px;
}

I’ve tried to make adapting the rater much easier for all of you. As you can see in the CSS above, you will not have to change a ton. Just add a class to your unordered list; In this case I used “small-star.” Update the width and height to the desired values. Make sure to change your image and line-heights as well. This makes creating other variations of the rater much more simple. If you need to make a 3 star, 4 star …N star rating system, you are gonna have to get your hands a little more dirty…sorry :(.

I am much more happy with the performance and support of this version and I feel that it will help to resolve the shortcomings that the previous versions had.