0

I have this form, which i print in order to do my work.

Now, the issue is, in the portrait mode, it gets minimized, i mean it looks small, like half of the page of an A4 Letter, while in landscape mode it looks just fine.

Here is my media print css:

@media print  {
textarea{
        border:none;
    }
textarea#difekti {
padding-bottom:40px;
border:none;
    }
#menu-home { display:none }
#status-print { display:none }
#submit-f {display:none};
#MainContent {
    display: block;

}
#tab1 table, td, th {
  border: 1px solid red;   
}

#tab1 thead {
  float: left;   
}


#tab1 thead th {
  display: block;   
  background: yellow;
}

#tab1 tbody {
  float: right;   
}
#programi {
    display:none;
}
#kursor {
    display:none;
}
#adresa { }
* {position:static !important;}

}

Any suggestion? Besides, i have issues with IE too. Can i create an additional media print for IE? Thanks

Alb M
  • 151
  • 10

3 Answers3

0

You should change this to a separate CSS file and link it to your HTML document using media="print" at the bottom most of any CSS link.

<link rel="stylesheet" type="text/css" media="print" href="path/to/your/css" />

This will also help you avoid the issue with IE.

Tepken Vannkorn
  • 9,648
  • 14
  • 61
  • 86
  • I do it in all my development, it helps me with maintenance and also it is a best practice. Accordingly, @media print {} comes in CSS3, so that the later IE will not render it. – Tepken Vannkorn Feb 01 '13 at 08:55
0

The @page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with @page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

@page { size:5.5in 10in; margin: 1cm }
0

@media print and (orientation: portrait) { styles here }

@media print and (orientation: landscape) { styles here }

Mile Mijatović
  • 2,948
  • 2
  • 22
  • 41