css - Using print stylesheet, page overflows to two pages in print preview -
css - Using print stylesheet, page overflows to two pages in print preview -
i using css print stylesheet provide alternate style page elements when printed, , hide ones don't wish printed.
when page previewed in browser (tested ie8), overflows onto sec page, though of elements appear fit on single page - please see screenshots.
what has alter in print stylesheet prevent , maintain page single printed page? tried setting display:none bottom-most panels, yet page still broken two.
also, how prevent display of border around page , page numbering?
css stylesheet
/* specify class items should not print */ .noprint { display: none; } /* ensure content spans total width */ .fullwidth { width: 100%; margin: 0; float: none; } /* print styles elements */ .newscript { position: absolute; float: none; margin: 0pt auto; clear: both; /* background-image: url( '../_images/blank_rx.jpg' ); */ width: 433pt; height: 400pt; /* height: 550pt; */ /* position: relative; */ font-family: "times new roman"; } .script2, #patientdetails { position: absolute; float: none; color: #3a5a85; font-family: "times new roman"; font-weight: bold; } .newscript .doctor { position: absolute; float: none; left: 10pt; top: 10pt; width: 400pt; height: 80pt; text-align: center; color: #3a5a85; font-family: "times new roman"; font-size: 24pt; font-weight: bold; } .newscript .hr1 { position: absolute; float: none; left: 5pt; top: 120pt; height: 3pt; width: 450pt; color: #0a0a0a; } .newscript .patientnamelbl { position: absolute; float: none; color: #000000; left: 18pt; top:125pt; font-size: 24pt; } .newscript .patientname { position: absolute; float: none; left: 24pt; top: 150pt; font-size: 24pt; } .newscript .doblbl { position: absolute; float: none; color: #000000; left: 350pt; top: 125pt; font-size: 24pt; } .newscript .dob { position: absolute; float: none; left: 350pt; top: 150pt; font-size: 24pt; } .newscript .hr2 { position: absolute; float: none; left: 5pt; top: 180pt; height: 3pt; width: 450pt; color: #0a0a0a; } .newscript .addresslbl { position: absolute; float: none; color: #000000; left: 18pt; top: 190pt; font-size: 24pt; } .newscript .address { position: absolute; float: none; left: 24pt; top: 220pt; font-size: 24pt; } .newscript .datelbl { position: absolute; float: none; color: #000000; left: 352pt; top: 190pt; font-size: 24pt; } .newscript .currentdate { position: absolute; float: none; left: 352pt; top: 220pt; border-bottom: dotted 1pt #000000; font-size: 24pt; } .newscript .hr3 { position: absolute; float: none; left: 5pt; top: 304pt; height: 3pt; width: 450pt; color: #0a0a0a; } .newscript .rxlogo { position: absolute; float: none; left: 18pt; top: 314pt; width: 28pt; height: 33pt; } .newscript .lbldrugname { position: absolute; float: none; left: 75pt; top: 314pt; width: 100%; /* height: 20pt; */ /* font-family: "times new roman"; */ font-size: 24pt; text-align: left; } .newscript .drugname { /* 75 225 */ position: absolute; float: none; left: 75pt; top: 340pt; /* height: 30pt; */ /* width: 310pt; */ font-size: 24pt; border: solid 0pt #ccc; background-color: #ffffff; } .newscript .lblstrength { /* 75 225 */ position: absolute; float: none; left: 75pt; top: 370pt; /* width: 360pt; */ /* height: 20pt; */ font-size: 24pt; text-align: left; } .newscript .strength { /* 75 225 */ position: absolute; float: none; left: 75pt; top: 395pt; /* height: 20pt; */ /* width: 310pt; */ font-size: 24pt; border: solid 0pt #ccc; background-color: #ffffff; } .newscript .lbldform { /* 75 225 */ position: absolute; float: none; left: 75pt; top: 430pt; /* width: 100pt; height: 20pt; */ font-size: 24pt; text-align: left; } .newscript .dform { /* 75 225 */ position: absolute; float: none; left: 75pt; top: 460pt; /* height: 20pt; width: 125pt; */ font-size: 24pt; border: solid 0pt #ccc; background-color: #ffffff; } .newscript .lblquantity { /* 75 225 */ position: absolute; float: none; left: 75pt; top: 490pt; /* width: 100pt; height: 20pt; */ font-size: 24pt; text-align: left; } .newscript .quantity { /* 75 225 */ position: absolute; float: none; left: 75pt; top: 520pt; /* height: 20pt; width: 75pt; */ font-size: 24pt; border: solid 0pt #ccc; background-color: #ffffff; } .newscript .lbldayssupply { /* 75 225 */ position: absolute; float: none; left: 75pt; top: 550pt; width: 100%; /* height: 20pt; */ font-size: 24pt; text-align: left; } .newscript .dayssupply { /* 75 225 */ position: absolute; left: 75pt; top: 580pt; /* height: 20pt; */ /* width: 100%; */ font-size: 24pt; border: solid 0pt #ccc; background-color: #ffffff; float: none; } .newscript .lblsig { /* 75 225 */ position: absolute; float: none; left: 15pt; top: 610pt; width: 100pt; height: 20pt; font-size: 24pt; text-align: left; } .newscript .sig { /* 75 225 */ position: absolute; float: none; left: 15pt; top: 640pt; width: 450pt; height: 80pt; font-size: 24pt; border: solid 1pt #ccc; background-color: #ffffff; } .newscript .hr4 { position: absolute; float: none; left: 5pt; top: 720pt; height: 3pt; width: 450pt; color: #0a0a0a; } .newscript .txtdaw { position: absolute; float: none; left: 80pt; top: 730pt; font-size: 12pt; text-align: center; } .newscript .lblrefills { position: absolute; float: none; left: 15pt; top: 765pt; font-size: 24pt; } .newscript .refillnum { position: absolute; float: none; left: 100pt; top: 765pt; /* width: 35pt; height: 20pt; */ font-size: 24pt; text-align: center; vertical-align: middle; border: solid 0pt #ccc; background-color: #ffffff; } .newscript .daw { position: absolute; float: none; left: 185pt; top: 800pt; width: 60pt; height: 30pt; font-size: 24pt; text-align: center; vertical-align: middle; border: solid 1pt #ccc; background-color: #ffffff; } .newscript .lbldaw { position: absolute; float: none; left: 100pt; top: 840pt; font-size: 24pt; text-align: center; }
aspx page
<%@ page language="c#" autoeventwireup="true" masterpagefile="~/site1.master" codefile="print_newrx.aspx.cs" inherits="rxvue.print_newrx" %> <asp:content id="content1" contentplaceholderid="head" runat="server"> <link rel="stylesheet" type="text/css" href="_css/newrx.css" /> <link rel="stylesheet" type="text/css" href="_css/print_rx.css" media="print" /> </asp:content> <asp:content id="content2" contentplaceholderid="maincontent" runat="server"> <form id="form1" runat="server"> <asp:panel id="newscript" runat="server" cssclass="newscript fullwidth"> <asp:panel id="doctor" runat="server" cssclass="doctor fullwidth"> <asp:literal id="docdetails" runat="server"></asp:literal> </asp:panel> <asp:panel id="patientinfo" runat="server" cssclass="patientinfo fullwidth"> <asp:literal id="patientdetails" runat="server"></asp:literal> <asp:panel id="script2" runat="server"> <asp:label id="lbldrugname" runat="server" text="drug name" cssclass="lbldrugname"></asp:label> <br /> <asp:label id="lblstrengthandum" runat="server" text="strength:" cssclass="lblstrength"></asp:label> <br /> <asp:label id="lblform" runat="server" text="form:" cssclass="lbldform"></asp:label> <br /> <asp:label id="lblquantity" runat="server" text="quantity:" cssclass="lblquantity"></asp:label> <asp:textbox id="frmquantity" runat="server" cssclass="quantity"></asp:textbox> <br /> <asp:label id="lbldayssupply" runat="server" text="days supply:" cssclass="lbldayssupply"></asp:label> <asp:label id="lblsig" runat="server" text="sig:" cssclass="lblsig"></asp:label> <br /> <hr class='hr4'/> <div class="txtdaw">this prescription filled generically<br />unless prescriber writes 'd w' in box below </div> <asp:label id="lblrefills" runat="server" text="refills:" cssclass="lblrefills"></asp:label> <br /> <div class="lbldaw">dispense written</div> </asp:panel> </asp:panel> </asp:panel> <asp:panel id="newscriptbottom" runat="server" cssclass="newscriptbottom noprint"> <asp:button id="btncancelnew" runat="server" text="back" cssclass="btn_newscript noprint" onclick="btncancelnew_click" causesvalidation="false" /> <asp:button id="btnprint" runat="server" text="print" cssclass="btn_newscript noprint" causesvalidation="false" onclientclick="window.print();"/> </asp:panel> </form> </asp:content>
rendered html body tag styled
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> rxvue </title><link rel="stylesheet" type="text/css" href="_css/main.css" /> <!-- <link rel="stylesheet" type="text/css" href="_css/newrx.css" /> <link rel="stylesheet" type="text/css" href="_css/print_rx.css" media="print" /> --> <link rel="stylesheet" type="text/css" href="_css/print_rx.css" /> <!--[if ie]> <style> fieldset { position: relative; } legend { position: absolute; top: -.5em; left: .2em; } </style> <![endif]--> <script type="text/javascript" language="javascript"> </script> </head> <body> <div id="mainwrap"> <div id="wrap" class="clearfix"> <div id="header" class="noprint"> <!--<h1>rxvue v2.0</h1><img src="images\title.jpg"--> </div> <div id="topnav" class="noprint"> <div id="ctl00_buttons"> <div id="ctl00_nousers"> <ul> <li><a href="patient.aspx">search patients</a></li> <li id="favs"><a href="favorites.aspx">favorites</a></li> <li style="float:right"><a href="help.aspx">help</a></li> <li style="float:right"><a href="sessend.aspx">log off</a></li> </ul> </div> </div> </div> <div id="main" class="fullwidth"> <form name="aspnetform" method="post" action="print_newrx.aspx" id="aspnetform"> <div> <input type="hidden" name="__viewstate" id="__viewstate" value="/wepdwukltkwmte2otyzoq8wcb4gumvmvxjsbsnodhrwoi8vbg9jywxob3n0l1j4vnvll3bhdgllbnquyxnweb4ox2n1cnjlbnrty3jpchqy6qmaaqaaap////8baaaaaaaaaawcaaaaqkrhdgfpymply3rzlcbwzxjzaw9upteumc4wljasien1bhr1cmu9bmv1dhjhbcwguhvibgljs2v5vg9rzw49bnvsbaubaaaaku9wdxnju00uuhjvzhvjdhmuunhwdwuurgf0yu9iamvjdhmuu2nyaxb0eqaaaahty3jpchrjrazzaxrlsuqizg9jdg9ysuqjcgf0awvudelebg5hbwuiy2f0zwdvcnknc3ryzw5ndghbbmrvtqrmb3jta3npzwhxdwfudgl0eqdyzwzpbgxzdhjlzmlsbe51bwjlcghyee51bwjlcgpkyxlzu3vwcgx5b2rhd0nvzgulzgf0zvdyaxr0zw4nzgf0zu9mu2vydmljzqaaaaabaqebaqaaaaeaaqmdcagicayicagpu3lzdgvtlkrhdgvuaw1ld1n5c3rlbs5eyxrlvgltzqiaaado3qqaaqaaac8aaacwfqaabgmaaaajsujvufjprkvobgqaaaaabguaaaafndawtucgbgaaaanuquigbwaaaakkmsbequlmwsaaaaaaaaakqgmaaaaaaaaabggaaaagode1ndy4cgaaaayjaaaaataidqaaxwkhqmsica0aaf1ih6jlcasedl9jdxjyzw50rg9jdg9ymrmdaaeaaad/////aqaaaaaaaaamagaaaejeyxrht2jqzwn0cywgvmvyc2lvbj0xljaumc4wlcbddwx0dxjlpw5ldxryywwsifb1ymxpy0tlevrva2vupw51bgwfaqaaaclpchvzsvnnllbyb2r1y3rzllj4vnvllkrhdgfpymply3rzlkrvy3rvcheaaaagc2l0zulecgrvy3rvcklecwzpcnn0tmftzqhsyxn0tmftzqhhzgryzxnzmqhhzgryzxnzmgrjaxr5bxn0yxrlb3ppcgnvzgugag9zdelecxdvcmtqag9uzqnkzwefbm90zxmmc3rhdgvmawnlbnnlbhvqaw4jzmf4tnvtymvya05qsqaaaqebaqebaqebaqebaqebcagcaaaaaqaaadgjaaagawaaaaagbaaaaavht1lbtakdaaaacgygaaaacevmtvngt1jebgcaaaactlkgcaaaaauxmduymwyjaaaabdizntmgcgaaaa0oote0kty4ms0ymdi4bgsaaaajqkc1mdk3ndy0cqmaaaagdqaaaayymdm0mzqjawaaaakdaaaacqmaaaalhg9fy3vycmvudfbhdgllbnqymgyaaqaaap////8baaaaaaaaaawcaaaaqkrhdgfpymply3rzlcbwzxjzaw9upteumc4wljasien1bhr1cmu9bmv1dhjhbcwguhvibgljs2v5vg9rzw49bnvsbaubaaaakk9wdxnju00uuhjvzhvjdhmuunhwdwuurgf0yu9iamvjdhmuugf0awvudbsaaaajcgf0awvudeledghvc3rvbmlxdwvjrazzaxrlsuqjzmlyc3royw1lcgxhc3royw1lbgnpdhkfc3rhdguhemlwq29kzqhhzgryzxnzmqhhzgryzxnzmgtkyxrlt2zcaxj0aa1oyxntywzldhldyxbza3nlebfhbhrlcm5hdgvmyw5ndwfnzqlob21lughvbmujd29ya1bob25lcmzhy2lsaxr5suqmzmfjawxpdhloyw1lfgzhy2lsaxr5qwrtaxr0zwreyxrlfwzhy2lsaxr5ugf0awvude51bwjlchbmywnpbgl0euj1awxkaw5ndwzhy2lsaxr5rmxvb3inzmfjawxpdhlodxjzzqxmywnpbgl0evjvb20lzmfjawxpdhlczwqschjpbwfyevboexnpy2lhbklefhbyaw1hcnlqahlzawnpyw5oyw1lawmaaqebaqebaqmaaqebaqmbawebaqebaqmbdfn5c3rlbs5jbnqzmgxtexn0zw0usw50mziid1n5c3rlbs5eyxrlvgltzqemu3lzdgvtlkluddmyd1n5c3rlbs5eyxrlvgltzqxtexn0zw0usw50mzicaaaacaiwfqaacagktgaaaqaaaaydaaaabe9qvvmgbaaaaarurvnubguaaaaks0lor1mguefsswygaaaaak5zbgcaaaafmte3ntqgcaaaaaoyifnnsvriiexocggnamabjl1qmggbbgkaaaabtqogcgaaaa0ootk5ktk5os05otk5bgsaaaaacagzaaaabgwaaaanvevtvcbgqunjteluwqgnambdcg7ewaggdqaaaaewcgyoaaaaatajcwaaaaklaaaacqsaaaaicpeoaaakcxyczg9kfgqcaw9kfgicaq8pfgieb1zpc2libgvnzgqcbq9kfgicaq9kfgicaq9kfgqcaq9kfgicaq8wah4evgv4dau5iedpwufmpgjylz48ynivpjxici8+ruxnu0zpukqsie5zidewntizpgjylz4oote0kty4ms0ymdi4zaidd2qwagibdxychwuf5au8zgl2iglkpsdwyxrpzw50zgv0ywlscyc+pghyignsyxnzpsdocjenlz48zgl2ignsyxnzpsdwyxrpzw50bmftzuxibcc+ugf0awvudcdzie5hbwu8l2rpdj48zgl2ignsyxnzpsdwyxrpzw50bmftzsc+vevtvcwgt1bvuzwvzgl2pjxocibjbgfzcz0nahiyjy8+pgrpdibjbgfzcz0nywrkcmvzc0xibcc+qwrkcmvzczwvzgl2pjxkaxygy2xhc3m9j2fkzhjlc3mnpjigu01jveggte48ynivpktjtkdtifbbuksgtlkgmte3ntq8ynivpkhvbwu6icg5otkpotk5ltk5otkgv29yazogpc9kaxy+pgrpdibjbgfzcz0nzgf0zuxibcc+rgf0ztwvzgl2pjxkaxygy2xhc3m9j2n1cnjlbnreyxrljz43lze0lziwmte8l2rpdj48zgl2ignsyxnzpsdet0jmymwnpkrpqjwvzgl2pjxkaxygy2xhc3m9j2rvyic+ns8xoc8xoty1pc9kaxy+pghyignsyxnzpsdocjmnlz48zgl2ignsyxnzpsdyegxvz28npjxpbwcgc3jjpsdfaw1hz2vzl25ld3j4x3j4bg9nby5nawynlz48l2rpdj48zgl2ignsyxnzpsdkcnvnbmftzsc+sujvufjprkvopc9kaxy+pgrpdibjbgfzcz0nc3ryzw5ndggnpjqwme1hpc9kaxy+pgrpdibjbgfzcz0nzezvcm0nplrbqjwvzgl2pjxkaxygy2xhc3m9j1f1yw50axr5jz4xmdwvzgl2pjxkaxygy2xhc3m9j0rhexntdxbwbhknpjewpc9kaxy+pgrpdibjbgfzcz0nu2lnjz4kmsbequlmwsa8l2rpdj48zgl2ignsyxnzpsdyzwzpbgxudw0npja8l2rpdj48zgl2ignsyxnzpsdkyxcnpjwvzgl2pjwvzgl2pmrk7rv36bijjbbovj1xnuym6meocxojikiwrjuudtyd6vm=" /> </div> <div> <input type="hidden" name="__eventvalidation" id="__eventvalidation" value="/wewbakxxtxkagl9pnlfawl+95vycqkrtls2bisibnbb9kvuh1zsdz1fksgkv3bvd6x5jukqvgpkqliz" /> </div> <div id="ctl00_maincontent_newscript" class="newscript fullwidth"> <div id="ctl00_maincontent_doctor" class="doctor fullwidth"> goyal<br/><br/><br/>elmsford, ny 10523<br/>(914)681-2028 </div> <div id="ctl00_maincontent_patientinfo" class="patientinfo fullwidth"> <div id='patientdetails'><hr class='hr1'/><div class='patientnamelbl'>patient's name</div><div class='patientname'>test, opus</div><hr class='hr2'/><div class='addresslbl'>address</div><div class='address'>2 smith ln<br/>kings park ny 11754<br/>home: (999)999-9999 work: </div><div class='datelbl'>date</div><div class='currentdate'>7/14/2011</div><div class='doblbl'>dob</div><div class='dob'>5/18/1965</div><hr class='hr3'/><div class='rxlogo'><img src='_images/newrx_rxlogo.gif'/></div><div class='drugname'>ibuprofen</div><div class='strength'>400mg</div><div class='dform'>tab</div><div class='quantity'>10</div><div class='dayssupply'>10</div><div class='sig'> 1 daily </div><div class='refillnum'>0</div><div class='daw'></div></div> <div id="ctl00_maincontent_script2"> <span id="ctl00_maincontent_lbldrugname" class="lbldrugname">drug name</span> <br /> <span id="ctl00_maincontent_lblstrengthandum" class="lblstrength">strength:</span> <br /> <span id="ctl00_maincontent_lblform" class="lbldform">form:</span> <br /> <span id="ctl00_maincontent_lblquantity" class="lblquantity">quantity:</span> <input name="ctl00$maincontent$frmquantity" type="text" id="ctl00_maincontent_frmquantity" class="quantity" /> <br /> <span id="ctl00_maincontent_lbldayssupply" class="lbldayssupply">days supply:</span> <span id="ctl00_maincontent_lblsig" class="lblsig">sig:</span> <br /> <hr class='hr4'/> <div class="txtdaw">this prescription filled generically<br />unless prescriber writes 'd w' in box below </div> <span id="ctl00_maincontent_lblrefills" class="lblrefills">refills:</span> <br /> <div class="lbldaw">dispense written</div> </div> </div> </div> <div id="ctl00_maincontent_newscriptbottom" class="newscriptbottom noprint"> <input type="submit" name="ctl00$maincontent$btncancelnew" value="back" id="ctl00_maincontent_btncancelnew" class="btn_newscript noprint" /> <input type="submit" name="ctl00$maincontent$btnprint" value="print" onclick="window.print();" id="ctl00_maincontent_btnprint" class="btn_newscript noprint" /> </div> </form> </div> </div> <div id="clearfooter"></div> </div> <div id="footer"> <span class="image"> <img src="_images/poweredby.gif" alt="powered webrx"/></span> </div> </body> </html>
thank you.
try adding style float:left
main table have data.
css printing stylesheet
Comments
Post a Comment