0

I am currently trying to build a coupon system, The coupon has several informations on it (Address, name, google map, a QR code etc) Right now Iam trying to use a button in order to print the coupon only. The coupon is generated on a white page only the body the container DIV and a printing button exist on the page. The QR code is generated using a jquery plugin. My main problem is that no css styles are attached to the printing material although I have made the following statement on my header

<link href="/media/css/coupon.css" rel="stylesheet" media="screen" type="text/css" />
<link rel="stylesheet" href="/media/css/coupon.css" type="text/css" media="print" />

Also, I am seeking for a solution in order to force the coupon to be printed on landscape mode as the container DIV is too large for a single page on portrait mode. You can take a look on my live example over here

I have used for testing Chrome, Mozilla and Opera with OSX but still no luck.

TheodoreV
  • 304
  • 4
  • 17
  • Your question is already answered: [Landscape printing from HTML](http://stackoverflow.com/a/1392794/672118). –  Jun 08 '12 at 02:16
  • Thank you for your answer, but still no CSS rules are attached to my printing div – TheodoreV Jun 08 '12 at 02:18
  • Can you clarify what exactly you mean, please? –  Jun 08 '12 at 02:21
  • As you can can see on my example , I have some css rules for the background of the coupon, the background is missing on printing. Also the map is missing too. I have tried to attach the same CSS as `media="screen"` and `media="print"` but still no luck, am I missing something? – TheodoreV Jun 08 '12 at 02:26
  • You can force the page to be in landscape by adding this to the stylesheet: `@media print{@page {size: landscape}}` To understand more you can read the answer to this question: http://stackoverflow.com/questions/138422/landscape-printing-from-html – sarcastyx Jun 08 '12 at 02:19

0 Answers0