2

I want to print to A4 using css.

A4 is 297mm high - 6 mm margin top - 6 mm margin bottom = 285 mm should be left for content.

In IE 11 : I have to set page borders to 6 mm and disable header/footer --> Text appears where it should when I set content height to 284 mm (1 mm diff is close enough for me) IE 11: OK: Text at 284 mm is located at bottom of page 1

In Chrome 33: I don't have to change any settings --> Text is located far below from where it should be. It only works when I set content height to 267 mm (where did 18 mm diff go?) Chrome 33: Fail: Text at 284 mm is located somewhere near top of page 2

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css">
         @page {
            margin: 6mm;
            size: A4 portrait;
         }
         body {
            margin: 0mm;
         }
         table {
            page-break-after: always;
            border-spacing:0mm;
         }
         tr {
            vertical-align: bottom;
            height:284mm;
         }
      </style>
   </head>
   <body>
      <table>
         <tr>
            <td>Page 1</td>
         </tr>
      </table>
      <table>
         <tr>
            <td>Page 2</td>
         </tr>
     </table>
   </body>
</html>

Is there something wrong with my css or does Chrome not know the size of 1 mm?

HikeMike
  • 116
  • 1
  • 8
  • Printing is still flaky. I have mentioned similar troubles [here](http://stackoverflow.com/q/20282092/1016716). Would it have to do with margins in the printer driver? (That is, would Chrome take those margins into account when calculating the page height, but IE wouldn't, or vice versa.) – Mr Lister Feb 25 '14 at 19:29

1 Answers1

1

I figured it out just now. It is not enough to set height, I need to set width as well. (I still need to set height to 284 instead of 285, but that is ok (probably a rounding error))

tr {
    vertical-align: bottom;
    height:284mm;
    width:198mm;
}
HikeMike
  • 116
  • 1
  • 8