Dev Stack Source

Answer : I looked into this a bit more and the actual problem seems to be with assigning initial to page width under the print media rule. It seems like in Chrome width: initial on the .page element results in scaling of the page content if no specific length value is defined for width on any of the parent elements ( width: initial in this case resolves to width: auto ... but actually any value smaller than the size defined under the @page rule causes the same issue). So not only the content is now too long for the page (by about 2cm ), but also the page padding will be slightly more than the initial 2cm and so on (it seems to render the contents under width: auto to the width of ~196mm and then scale the whole content up to the width of 210mm ~ but strangely exactly the same scaling factor is applied to contents with any width smaller than 210mm ). To fix this problem you can simply in the print media rule assign the A4 paper width and hight to html, body or direct...

Answer : You will not get anything on the paper with a basic CMYK inkjet or laser printer. The CMYK color mixing is subtractive , meaning that it requires the base that is being colored to have all colors (i.e., White ) So that it can create color variation through subtraction: White - Cyan - Yellow = Green White - Yellow - Magenta = Red White - Cyan - Magenta = Blue White is represented as 0 cyan, 0 yellow, 0 magenta, and 0 black - effectively, 0 ink for a printer that simply has those four cartridges. This works great when you have white media, as "printing no ink" simply leaves the white exposed, but as you can imagine, this doesn't work for non-white media. If you don't have a base color to subtract from (i.e., Black ), then it doesn't matter what you subtract from it, you still have the color Black. As others are pointing out, there are special printers which can operate in the CMYW color space, or otherwise have a white ink or toner. These can ...

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 a...