单击打印按钮后，打印页面变形

Question

after clicking on the print button , on printview you can see that the page style is bad formed . you can see the demo :

http://rogatech.somee.com/print.aspx?DarkhastId=13921230

how can I solve this problem? I test some other codes form internet but no one couldn't help me...

asp.net codes:

<input type="button" onclick="JavaScript:printPartOfPage('Div1')" value="print" />
<div align="right" id="Div1" style=" width:21cm; height:29.7cm; margin-top:20px; direction:rtl ">
<div style="border-color: Black; border-width:1px; border-style:solid; width:595; height:130px"><img src="roga arm.png" alt=""  style=" width:110px; height:110px; margin-top:5px; margin-right:5px; margin-bottom:5px;" />
<span align="left" style=" float:left ;text-align:right;margin-left: 70px; margin-top:5px">شماره درخواست :  <asp:Label ID="DarkhastIdLabel" runat="server" 
                            Text='<%# Eval("DarkhastId") %>' /></span>
               <div align="left" style="margin-top:-80px;margin-bottom:7px;margin-left: 110px; ">پیوست : </div>

   <br />


<div style=" float:left;margin-left: 116px; margin-top:-5px ; margin-bottom:15px; " align="left">تاریخ : </div>
               <div align="center"  style=" font-family:'BKoodakBold'; font-size:22px; color:Black; font-weight:bold;  margin-top:-40px; vertical-align:middle;"> گروه مهندسی و تحقیقاتی روگاتکنیک</div>
</div>
<br />
<div style="border-color: Black; border-width:1px; border-style:solid; width:595">
<div style=" margin: 5px 20px 100px 5px;">

//listview code

</div>
        </div>
    </div>

javascript:

<script type="text/javascript">
<!--
    function printPartOfPage(elementId) {
        var printContent = document.getElementById(elementId);
        var windowUrl = 'about:blank';
        var uniqueName = new Date();
        var windowName = 'Print' + uniqueName.getTime();
        var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');

        printWindow.document.write(printContent.innerHTML);
        printWindow.document.close();
        printWindow.focus();
        printWindow.print();
        printWindow.close();
    }
// -->
</script>

Answer 1

Your stylesheets have the attribute media="screen" specified. So there are no styles that'll apply to print media at all.

You should either remove that attribute or specify a separate css file with the attribute media set to "print" to apply to print media.

Answer 2

finally and after attempts , I could solve my problem. It hasn't need to any other stylesheet for print. at first I have deleted browser history cached, and then add some style like direction and align to my dives and now all the thing looks okay. thanks all for your attention.