CSS @media print not working at all

Question

I'm struggling for hours now why the @media print is not working, I search on Google even on this site and nothing helped, so that's why I post this question. I'm testing it on Google chrome print preview (ctrl p) but i also printed to page and it stays blank.

I try'd to make a separate css file and also a embedded css style into the page.

Here is my code

Headers

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

HTML

<div id="bruikleenovereenkomst">
 <div id="blo_header">
 </div>
 <div id="blo_side_top"></div>
 <div id="blo_side_bottom"></div>
</div> 

CSS normal styles

div#bruikleenovereenkomst {
 width:595px;
 height:842px;
 background-color:#fff;
 position:relative;
}
div#blo_header {
 width:100%;
 height:125px;
 background-color:#FBE983;
 z-index:9
}
div#blo_side_top {
 width:57px;
 height:420px;
 background-color:#B6CAE5;
 position:absolute;
 right:0;
 top:0;
 z-index:99;
}
div#blo_side_bottom {
 width:57px;
 height:420px;
 background-image:url(../images/leaflet.png);
 background-repeat:no-repeat;
 position:absolute;
 right:0;
 bottom:0;
 z-index:99;
}

CSS print styles (print.css) note: the div#bruikleenovereenkomst is just a black block for testing.

@media print{
 body {
 margin:0;
 }
 h1#logo {
 display:none;
 }
 ul#menu {
 display:none;
 }
 div#bruikleenovereenkomst {
 width:100%;
 height:500px;
 background-color:#000;
 }
 div#blo_header {
 display:none;
 }
 div#blo_side_top {
 display:none;
 }
 div#blo_side_bottom {
 display:none;
 }
}

All I get with printing is just a blank page.

• ase: perhaps background are not printed? Try putting some real content there and see if it works.
• Julez: But i need a colored printed page.... Is there a way that i can give divs a color for printing ?
• ase: Reading other answers on stackoverflow it seems this is a setting in the browser that you cannot override with css.
• Julez: ... yes i found it now, im so sorry i thought it was just the @media print doesnt working but it was just the background-color not working.
• RoToRa: @user1502014 You can turn on printing background colors/images in your browser options. It's not something you can remotely override. If your colors transport an important information and you can't rely on your users to turn that option on, you will need to use something else other than background colors to transport that information. Independently from printing: You shouldn't be using colors alone to transport information anyway for good accessibility. Not everyone can see colors!

Answer 1

If you are using @media print, you need to add !important in your styles, or the page will use the element's inline styles that have higher priority.

E.g.

<div class="myelement1" style="display:block;">My div has an inline style.</div>

In @media print, add !important and be a winner

@media print {
 .myelement1, .myelement2 { display: none !important; }
}

• Nathan Tuggy: Hmm. !important might be a bit much for this, since it makes styles far harder to override.
• Richard: If the !important is only for @media print, it shouldn't affect the normal page styling. It's not elegant, but if you have inline styles, you need a way to overwrite them, as they're not very elegant themselves.
• Nathan Tuggy: Well, I can't disagree on inline styles, obviously.
• Matthew Young: +1 to you man, !important was the secret I was going nuts like changing font sizes to like 500% to try and force a change. Thanks for the tip!
• Sam Alexander: dont know why this is accepted. it doesnt work

Answer 2

First, I'd try adding a space after print. May not make a difference, but.....

@media print {
 /*print css here*/
}

Next, printing in browsers usually ignores background colors. Try using 'box-shadow'....

@media print {
 #bruikleenovereenkomst {
 width: 100%;
 height: 500px;
 box-shadow: inset 0 0 0 1000px #000;
 }
}

Smashing Magazine has some excellent pointers: http://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ Note that they talk about printing from a Webkit browser (Chrome or Safari, for example), and attempting to force the printer to render the colors as they appear on-screen by using a separate media query.....

@media print and (color) {
 * {
 -webkit-print-color-adjust: exact;
 print-color-adjust: exact;
 }
}

Hope this helps!

• edencorbin: was looking for background color : ' ), no wonder I didn't see the change.

Answer 3

you need to add print media style inside the div element which you print

Answer 4

window.print() is an async function, and therefor if you are managing the DOM right after calling it - you may run into such blank print issues. The solution is to move the DOM management to event callback functions for the beforeprint and afterprint events:

onbeforeprint
onafterprint

Note: register both these callbacks before calling the window.print function