CSS @media print not working at all
css, html, printing
Solution
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; }
}
Problem
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.