firefox and ie

Hi
i have a report to print i m using php mysql
the first pages are fine and the last is strectched..
how i can fix the height that the graph in the report can be in the same page for firefox and ie
please find attached pdf and you will see the stretched page
that is my css for ie and for firefox

-->[b]for ie[/b]
<style type="text/css"  >
@media print {
input#BTNPRINT {
display: none;
}
}    
.table2 {
      position:relative;
        /*top:-50px;*/
 border:1px solid #000;
    
      font-family:arial,sans-serif;
      font-size:80%;
      height:100%;
      width:100%; 
}
body {
 
height:100%;
} 
#table4{
        border:3px solid #fff;
        position:relative;
        top:-5px;  
        
}
th{
	border:1px solid #000;
	border-collapse:collapse;
	padding:5px;
}	
#fn,#dp,#ar{width:110px;}
#fr,#to{width:90px;}
caption{
	
	font-size:100%;
	border:1px solid #000;
	border-bottom:none;
	padding:20px 0 0 0;
	text-align:left;
}
#td1{
	 
        background-color:#9cf;
         
}	

</style>

Select allOpen in new window

-->for firefox
<style type="text/css">
@media print {
input#BTNPRINT {
display: none;
}
}    
 
.table2 {
      position:relative;
        /*top:-50px;*/
 border:1px solid #000;
    
      font-family:arial,sans-serif;
      font-size:60%;
      height:100%;
      width:100%; 
}
body {
        height: 950px;
        width:850px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    } 
#table4{
        border:3px solid #fff;
        position:relative;
        top:-5px;  
        
}
th{
	border:1px solid #000;
	border-collapse:collapse;
	padding:5px;
}	
#fn,#dp,#ar{width:110px;}
#fr,#to{width:90px;}
caption{
	
	font-size:100%;
	border:1px solid #000;
	border-bottom:none;
	padding:20px 0 0 0;
	text-align:left;
}
#td1{
	 
        background-color:#9cf;
         
}	

</style>

Select allOpen in new window

any help please
CAMPION-The-Power-Behind-The-Wat.pdf