CODEWITHSUNDEEP
htmlcssprinting
Julez
Julez

Reputation: 1369

CSS @media print not working at all

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.

Upvotes: 39

Views: 120519

Answers (4)

Ujjwal Singh
Ujjwal Singh

Reputation: 4998

window.print() is an async function, and therefor if you are managing the DOM right after calling it - you may run into such blank print issues. The solution is to move the DOM management to event callback functions for the beforeprint and afterprint events:

onbeforeprint
onafterprint

Note: register both these callbacks before calling the window.print function

Upvotes: 0

Nikhil Thakare
Nikhil Thakare

Reputation: 21

you need to add print media style inside the div element which you print

Upvotes: 2

Nostalgia80
Nostalgia80

Reputation: 543

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!

Upvotes: 28

Richard
Richard

Reputation: 950

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

Upvotes: 53

Related Questions