Question

I am attempting to bypass the need for a PDF component by building a good print stylesheet.

I have two CSS files, site.css and print.css. They are loaded via the following:

<link href="site.css" rel="stylesheet" type="text/css" />
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>

site.css is a large, long and boring css file with the addition of

.printonly
{
    display: none;
}

This is applied to elements in the document I have added for the sole intention of printing which I do not want on the page. It only exists in the site.css file.

When I have the image loaded through <img class="printonly" src="image.png" id="logo" alt="logo"/> It is not visible on the printed sheet.

If I drop the class="printonly", then it places the picture on the printed page just fine.

This makes me believe that it is picking up site.css even when trying to print.

Is there any way around this, or can anyone suggest anything?

---

For completion sake, I have included the entire print.css, however, I am not sure it is really needed:

body {
    width: 210mm;
    height: 297mm; }

#logo {
    margin-left: 50%;
    margin-right: 50%; }

.noprint {
    display: none; }

Answer 1

You can either make the first stylesheet for screen media only, or you can change the display value for those images back to inline in your print media stylesheet.