jQueryUI ThemeRoller styles not displaying in print version

I'm using ThemeRoller and jQueryUI on my page and the styles are not being applied to the print version.

Is there a setting somewhere in jQueryUI that would change media to all instead of screen? Or is the开发者_运维百科re something else that's preventing these styles from being applied to the print version.

Background images applied in CSS do not print (by default). If this is the issue you are seeing it could be why. Are there specific things that aren't printing?

In most browsers, printing background colors and images is disabled. You need to enable that before you will be able to see the styles properly when printing.

In IE, do a print preview, then click the Page Setup button. You'll see a Print Background Colors and Images checkbox.

In FireFox, do a print preview, then click the Page Setup button. You'll see a Print Background (colors & images) checkbox.

In Chrome, you can't without the IETAB extension unfortunately. See this support thread.

And, to prove that background images applied in CSS do in fact print when the setting in the browser is turned on, take the following code and put it in a basic HTML page. Open it up in IE, FireFox, or other browsers that support the image printing setting. Then, toggle the setting on/off. You'll see the small arrow image appear/disappear in the print preview.

    <style type="text/css">
        .link {
            background: url(http://www.famfamfam.com/lab/icons/silk/icons/control_play.png) no-repeat;
        }
        .link a {
            padding-left: 18px;
        }
    </style>

    <div class="link">
        <a href="#">Test Link</a>
    </div>

You can resolve this simply by ensuring that the jQuery Theme Roller CSS file has the media attribute. It has nothing to do with jQuery UI, it is in the intrinsic nature of browsers.

change

<link rel="stylesheet" href="URL to your print.css" type="text/css" media="screen" />

to this (or add both)

<link rel="stylesheet" href="URL to your print.css" type="text/css" media="print" />