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.

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; } }