CSS @media Print Not Working At All
Answer :
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; }
}
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!
Comments
Post a Comment