hi my name is james philip i have a probelm with css and html i need to print a form in a vertical way i have managed to rotate it in the webpage but that is not what i want to do i want it to remain horizontal on the webpage but when the user clicks print is when i wan the output to change to vertical thanks for the help below is my rotation code

<style>
.rotate {

/* Safari */
-webkit-transform: rotate(90deg);

/* Firefox */
-moz-transform: rotate(90deg);

/* IE */
-ms-transform: rotate(90deg);

/* Opera */
-o-transform: rotate(90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}
</style>

and below is the code for the whole webpage

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">

<title>Form</title>
</head>
<body>

<center>

<div id="printable" align="center">
<font face="algerian, sans-serif" size="+2">AROPOLIS INSUARANCE BROKERS LTD. </font><br><font size="-1">
2<sup>nd</sup> Floor, Shamneel Court, Parklands Road, Nairobi, Kenya. <br>
P.O. Box 1157, Sarit Centre, Post Offive, Nairobi 00606, Kenya. <br>
Telephones 020 - 4444746 / 7 / 8, Fax 020 - 4444745. Email info@acropolisinsurance.com</font>
</div>
</center>
<p>



  <style>
body{
  -webkit-print-color-adjust:exact;
}
</style>
  <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>

    <style>
.break { page-break-before: always; }
</style>
<style>
@page {
  size: a4 portrait;
  margin: 0;
  padding: 0;
  margin-top: 20mm;
}

</style>

<style>
.rotate {

/* Safari */
-webkit-transform: rotate(90deg);

/* Firefox */
-moz-transform: rotate(90deg);

/* IE */
-ms-transform: rotate(90deg);

/* Opera */
-o-transform: rotate(90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}
</style>

</p>

<center>
<table width="782"  border="1" style="border-collapse:collapse;">
  <tr>
    <td width="702"><div align="center"><strong>CLAIM FORM FOR PROPERTY DAMAGE OR LOSS.</strong></div>
      Applicable to Fire, Special Perils, Home Covers, Theft, All-Risks, Money, Baggage and Glass. The issue of this form is not an admission of liability on the part of the company. All questions must be answered in full.
    </td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td width="468"><p>Name of Insurer:  
    </p></td>
    <td width="300"><p>Type of Cover:  
      </td>
  </tr></table>

<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td width="267">Policy <br/>Number:  <input type="text" class="input" size="30"></td>
    <td width="263">Renewal<br/>date: <br/></td>
    <td width="230"><p>Last premium <br/>
    date paid on: </p></td>
  </tr>
</table>


<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td class="hdr"><font color="#FFFFFF" style="border-collapse:collapse;">INSURED</font></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td>Name: <?php echo $firstname; ?> <?php echo $middlename; ?> <?php echo $lastname; ?></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td>Occupation / Profession: <?php echo $occupation; ?></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td>Address: <?php echo $physadd; ?></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td>Telephone: <?php echo $mobileno; ?></td>
    <td>Fax/Email: <?php echo $email; ?></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td class="hdr"><font color="#FFFFFF" >CIRCUMSTANCES GIVING RISE TO A CLAIM</font></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td width="267">Date of <br/>Loss </td>
    <td width="263">Time of <br/>Loss </td>
    <td width="230"><p>When/Who discovered <br/>the loss or damage 
         </p></td>
  </tr>
</table>

<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td height="1" style="border-collapse:collapse;"><p>Describe fully how the loss or damage occured
      </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
<p>&nbsp;</p>


    </td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td class="hdr"><font color="#FFFFFF">GENERAL INFORMATION</font></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td>Type of premises involved</td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td><p>Were the permises unoccupied?
     Yes 
        <input type="checkbox"> 
     |
       No <input type="checkbox">. if so, when were they last occupied?</p>
    <p>&nbsp;</p></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td><p>Are the premises self-contained?
     Yes <input type="checkbox"> 
     |
       No <input type="checkbox">. if not, please list the names of other occupants</p>
    <p>&nbsp;</p></td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td>Are you the owner of premises? Yes <input type="checkbox"> 
    | No 
    <input type="checkbox"></td>
    <td>Are you responsible for repairs? Yes <input type="checkbox"> 
    |
    No <input type="checkbox"></td>
  </tr>
</table>



<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td height="1"><p>Have you any suspicion as to parties implicated? Yes
      <input type="checkbox">
      | No
      <input type="checkbox">
    </p></td>
  </tr>
</table>

<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td height="1"><p>Is there any other insurance in force providing covers for this loss? If so, give particulars including insurers name, address, policy numbers, type of policy, etc.</p>
      <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>


    </td>
  </tr>
</table>
<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td height="1"><p>Have you suffered similar loss or damage in the past? If so, give particulars and whether claim was made on insurers</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </td>
  </tr>
</table>


<table width="782" border="1" style="border-collapse:collapse;">
  <tr>
    <td height="1" style="border-collapse:collapse;"><p>At the time of loss, what was<br/>
        the value of: a) the buildings? _______________________   b) all the property in the premises? _______________________</p>
    </td>
  </tr>
</table>
<p class="break"></p>
<table border="1" width="782" style="border-collapse:collapse; size: a4 portrait;">
  <tr>
    <td colspan="3" class="hdr" ><font color="#FFFFFF" >Complete in all cases involving THEFT, MALICIOUS DAMAGE or MISSING ARTICLES</font></td>
  </tr>
  <tr>
    <td colspan="3"><p>When were the Police notified (date &amp; time)?
    </p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>Address of the Police Station?</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>what other steps have you taken to recover property?
    </p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>Give full details of method of entry to premmises</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>If alarm intalled, did it function properly? If not, give reasons
    </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>Are guards employed? If so, name the firm
    </p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>Do other parties i.e. banks have an interest on property lost or damaged? If so, state reasons

      </p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3" class="hdr"><font color="#FFFFFF" >Compete in all cases involving loss in transit</font></td>
  </tr>
  <tr>
    <td colspan="3"><p>Starting point and destination of transit
    </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>Who was accompanying property lost or damaged?</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>If employees, state names, age and duties</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="3"><p>Are they insured under Fidelity Guarantee Policy? If so, give insurer's name, address and policy number</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="2">How often is<br/> this transit made?</td>
    <td width="543" colspan="1">What is maximum ever<br/> carried at on time?</td>
  </tr>
  <tr>
    <td colspan="3" class="hdr"><font color="#FFFFFF" >AMOUNT CLAIMED</font></td>
  </tr>
  <tr>
    <td colspan="3">Kenyan Shilings <br/>
    Amount_________________________________Please refer to the following pages for details</td>
  </tr>
  <tr>
    <td colspan="3">I / we declare that I / wehave not withheld any material information and that all statments made on this form are true to the best of my / our knowledge and belief. And that articles and property described overleaf belong to me / us, and that no other person has any interest whether as owner, mortgagee, trustee or otherwise except as mentioned in the policy.</p>
    <p>Date____________________  Signature_____________________________________________</td>
  </tr>
    <td colspan="3"> <div align="right">(If policy Holder body corporate, title of person signing & Company Stamp)</div></td>
  </tr>



</table>
<p class="break"></p>
<table width="933" border="1" style="border-collapse:collapse;" class="rotate">
  <tr>
    <td bgcolor="#000000" colspan="7"><font color="#FFFFFF" size="2">DETAILS OF AMOUNT CLAIMED</font></td>
  </tr>

<tr>

<td width="863" colspan="7"><ul><li>If claim is for repairable damage, give particulars of the damage and a tradesman's estimate for the repairs necessary.</li>
     <li> If claim is for irreparable damage or loss, list items below completing all columns (if policy cover is on new reinstatement basis, the below row for wear, tear and dereciation is not applicable). Supporting estimates may be helpful.</li>
    <li>In cases where reported to Police, please furnish a Police Report.</li></ul>

   </td>

</tr>
  <tr >

    <td width="26">&nbsp;</td>
    <td width="296">Full description of the property</td>
    <td width="145">Where and when acquired</td>
    <td width="106">Replacement Cost Price</td>
    <td width="119">Deduction for Depreciation </td>
    <td width="111">Amount allowed for Salvage</td>
    <td width="84">Amount Claimed</td>
  </tr>
  <tr>
    <td>1</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>2</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>3</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>4</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>5</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>6</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>7</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>8</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>9</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>10</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>11</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>12</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>13</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>14</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="6"><div align="right"><strong>TOTAL AMOUNT CLAIMED:</strong></div></td>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="933" border="0">
  <tr>
    <td height="1"><u><strong>Note:</strong></u> In case of more details required, please use extra copy of this page and add to this report.</td>
  </tr>
</table>
</center>
<div id="non-printable" align="center">
<a href="logout.php">logout</a> | <a href= "javascript:window.print();">Print</a></div>
</body>
</html>

Please help ASAP thanks.

Try this:
Change the class table with "anyname" and set the id with "anyid".
Change <a href= "javascript:window.print();">Print</a></div>
with
<a href= "javascript:document.getElementById('anyid').className='anyname'; window.print();">Print</a></div>

You must play a little with css to rotate.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.