Receipt Printing

Question

I am trying to make a web app print receipts for my customer (he asked me for it) I've placed a table and everything however when I print it I just can't get it to print correctly into the fields of the receipts. Let me explain, the receipts are already made so I am merely making a place where the user inputs all the required fields and then prints it as if printing a normal web page, being the output paper this receipt (that looks sort of like this) anyway I've tried to move where the printer prints using a "print" css but it just won't obey...on top of that the text has gone wayyy small (I really don't know why) and honestly have no idea how to handle this anymore =/...does anyone out there knows?

---

Edit for Code

* {
    /* old-style reset here :) */
    border: 0px;
    padding: 0px;
}
table {
    left:0px;
    top:0px;
}
td, th {
    text-align: center;
    vertical-align: middle;
    color: #000;
}

input{
    outline:none;
}

.borde{
    background-color:#0FC;
    border: solid 2px #0FF;

}

The HTML is a plain table...with input fields...

Answer 1

This thread might help. It has some good links related to your problem.

Moreover, how is it showing the preview? Can you share the code?

Answer 2

Unless you've specified somewhere table to have position: absolute, you should add it to the css for the table element. I'm not sure how all browsers handle this, but it should have it anyway.

Answer 3

if you are serving multiple stylesheets, you need to make sure they aren't being applied at the same time. For instance:

<link type="text/css" rel="stylesheet" src="default.css" />
<link type="text/css" rel="stylesheet" src="default.css" media="print" />

will apply both stylesheets when printing but only the first in other circumstances.

If you only want your print stylesheet to be applied when printing, you need to specify media for all of your stylesheets. Something like:

<link type="text/css" rel="stylesheet" src="default.css" media="screen, projection" />
<link type="text/css" rel="stylesheet" src="default.css" media="print" />

and only the print stylesheet will be applied.