Question

I have a site that I’m trying to make a printable version and I’m using a new print stylesheet, but I’m having a problem. I have a DIV for star ratings that is just an empty DIV in the html file, but in the regular CSS I have background images for the actual stars.

The DIV in the html file looks like this:

<div class="example_rating"></div>

The code in the regular stylesheet looks like this:

.example_rating {

  height:40px;

  width:200px;

  margin-left:20%;

  background: url('../stars.png') no-repeat scroll 0 0 transparent;

  }

My problem is that the star ratings aren’t showing up at all in the printable format of the web page. I don’t have the DIV hidden or anything, but I’m not sure what I can do to get it to show up in the printable format.

I realize the question may be a little vague, but I’m not sure how else to explain it. I can definitely give more details if need though. Thanks!

Answer 1

In your CSS, the stars are rendered as a background image, and when printing, backgrounds aren’t usually displayed by default.

You’ll either have to display the stars as an <img>, or tell your users to enable printing of backgrounds.

EDIT:

The easiest way to get round this would be to print the star rating as text as well as the background image, and then have the font inside the div transparent (and yellow in the print stylesheet). Example:

<div class="example_rating">
  4/5 stars.
</div>

Stylesheet:

.example_rating {
  color:Transparent;
  /* Alternatively: text-indent: -9999px; */
  height:40px;
  width:200px;
  margin-left:20%;
  background: url('../stars.png') no-repeat scroll 0 0 transparent;
}

EDIT 2:

You could try putting this in your print stylesheet:

.example_rating {
  background: none;
}
.example_rating:after {
  content: '4/5 stars'
}

This puts some text inside the div using CSS, and if you put it in your print stylesheet only, it will only appear when you print!