HTML+CSS Inline-Safe Star Rating Indicator

After using a simple approach of star rating display using the <img> tag for years, I wanted to use a better solution for a new project. I had to play around with some solutions on the net, using them to create an inline-safe one.At first, I tried to go with José Airosa’s Easy CSS Star Rating Layout (1) and Markus Weichselbaum’s How to use CSS to display rating stars (2).

The basic idea in both of them is to have a <div> width-ed according the rating value, and another <div> to complement it (contrast it) with the maximum possible rating value. The <div> could have a repeated background-image of an empty/full star (for star-based ratings) or background-color (for bar ratings).

As two values play roles here, generally it should be possible to use just two <div>s to achieve the display. Indeed, (2) really uses just two <div>s. Although (1) uses three <div>s, the third <div> still might offer some other advantage.

Note also that I only needed to display ratings, I didn’t need ability to let the user to vote for a rating.
Also, I wanted the indicator to be able to display any value (e.g. 3.7 stars).

My problem with (1) and (2) was that, <div>s being block elements, the rating was always displayed on a new line. I tried a number of adjustments setting the <div>s’ display to be inline or inline-block, and/or using <span>s instead of <div>s. After having some success using inline-block, I was disappointed by Internet Explorer 8, who was still displaying the rating on a new line.

Finally, I came to an extended text (sorry I lost the link), which mentioned that  Internet Explorer 8 is actually able to support inline-block, but only when applied to generically non-block elements (i.e. not to <div>s). This finally led me to a right combination of <span>s and inline-block.

So, the HTML markup I used is:

<span class="rating_bar" title="Rating 3.70 stars"><span style="width:74%"></span></span>

(Note that the <span>’s title is not obligatory. It only allows most browser to display a human-readable or human-audible hint when rating is hovered.)

And these are the corresponding CSS rules:

Use like this:
<span class="rating_bar"><span style="width:27%"></span></span>
/* Default */
.rating_bar {
	/* 70 = 14*5; 14 is the width of the background picture */
	width: 70px;
	/* Otherwise layout might break*/
	/* when inherited align is center or right: */
	/* This is the picture of a single empty star */
	background: url(/img/stars/star_empty_14x12.png) 0 0 repeat-x;

.rating_bar span {
	/* 12 is the height of the background picture */
	height: 12px;
	/* This is the picture of a single full star */
	background: url(/img/stars/star_full_14x12.png) 0 0 repeat-x;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s