CODEWITHSUNDEEP
htmlcssprinting
Fizzix
Fizzix

Reputation: 24395

Why won't my HTML page print according to my CSS document?

So basically, I have my CSS document that is stopping things from being printed.

Heres my CSS:

/* Making the page A4 compatible */

body 
{
    margin: 0;
    padding: 0;
    font: 12pt "Tahoma";
}

* 
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.page 
{
    width: 21cm;
    min-height: 29.7cm;
    padding: 2cm;
    margin: 1cm auto;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage 
{
    height: 237mm;
}

@page 
{
    size: A4;
    margin: 0;
}

@media print 
{
    .page 
    {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}

I made the page perfectly A4 compatible, while stopping basically everything from being printed besides a div that has the class of page.

I then call my print via window.print(); from a button far outside of this div, which is just inside of the closing body tag.

Although, I am getting 4 pages being printed. One that is perfect, two that are blank, and one with just the button on it?

All these pages have the annoying footer on them with the URL, date, time and page number. I searched everywhere and this bit of code was meant to remove this, although it didn't do anything at all:

@page 
{
    margin: 0;
}

Does anyone have any suggestions to why this is happening?

Upvotes: 2

Views: 871

Answers (2)

vishalkin
vishalkin

Reputation: 1235

Depending upon the position of your Page No. 

@page {
  @bottom-right {
  // you may have to change this right to left or center as per how it is printed
    content: "";
  }
}

Upvotes: 0

MilanSxD
MilanSxD

Reputation: 222

<input id="Button1" name="b_print" type="button" runat="server" class="ipt" onclick="printdiv(divIDtoprint);" value=" Print "/>

<script lang="javascript">
function printdiv(printpage) {
    var headstr = "<html><head><title></title></head><body>";
    var footstr = "</body>";
    var newstr = document.all.item(printpage).innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = headstr + newstr + footstr;
    window.print();
    document.body.innerHTML = oldstr;
    return false;
}

Basically just temporarily removes the other stuff on the page, prints whatever you want to print, then puts the old page back in it's place.

Upvotes: 1

Related Questions