Question

I have created a style for media= print like this:

#content .inner h2 {
background:Red;
border-bottom:solid 1px #dfdfdf;
color:#000000;
font-size:20px;
padding-left:10px;
}

But red color is not shown when i print preview. If i set the media=screen and use this stylesheet. then red color is shown. any hint for this?

Answer 1

Depends which browser you are using, but I suspect MSIE?

By default, many browsers will choose not to render the background color for a page when going to print mode (there is usually a setting / option in the print preferences dialog to change this).

Another thing to consider – when you are referencing the style sheet it is possible you either:

• didn’t correctly specify the media type so it isn’t loading
• the browser has buggy behavior and doesn’t ever load the style
• your print style is being overridden by another style

There are lots of tools freely available which can help you to identify the styles being applied to any given element on a page. If you use FireFox, check out the Web Developer extension (also available for Google Chrome on the authors site). If you use MSIE or other browsers, you might be able to get a book marklet script called Aardvark to work (no link because last time I checked the main site was listed as having malware – browse with care).