Landscape printing with CSS

Question

I have added an CSS file this way:

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

The css contains amongst other the following:

.landscape {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%;
filter: progid : DXImageTransform.Microsoft.BasicImage ( Rotation = 3 );
}

The body tag of my html page is set with class=landscape.

Then the question. While viewing the page in IE9 it is rotated 90 degrees (landscape), but when I print the page is still in portrait? Everything else is OK with the page, so it loads the CSS for prints, but it seems like IE9 ignores the landscape for printing. Anyone know why and how I can print it in landscape?

I have also tried the following which seems like it only works in Chrome

@media print { 
  @page{
      size: A4 portrait;
      margin-left:0.0cm;
      margin-right:0.0cm;
  }
}

I have found several "answers" on google, but most of them sums up to the two alternatives I have presented, which doesn't really work for me..

EDIT: As presented below:

-ms-transform: rotate(90deg);

.. doesn't work either. I have a big table which I just want to print in landscape because of the big nr of columns. How hard can it be?

Solution 1

Seems like the only way to get a perfect landscape-print is to go through the print dialog and choose landscape from there. Its really hard to do this automatically with success in each browser.

Solution 2

try:

@media print{@page {size: landscape}}

Comments

[RetroCoder]

In IE this works for me by canceling the print dialog, and then selecting the print preview dialog and selecting "Landscape" and "View Full Width" and then printing.