CSS @media print not working at all
Solution 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; }
}
Solution 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!
Julez
Hello, My name is Julian and i just started about 2 years ago with webdeveloping. I really enjoy doing it and i'm very dedicated.
Updated on July 22, 2022Comments
-
Julez almost 2 years
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.
-
Nathan Tuggy over 9 yearsHmm.
!important
might be a bit much for this, since it makes styles far harder to override. -
Richard over 9 yearsIf 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 over 9 yearsWell, I can't disagree on inline styles, obviously.
-
edencorbin over 7 yearswas looking for background color : ' ), no wonder I didn't see the change.
-
Matthew Young almost 6 years+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!