Scrolling problem in internet explorer

Dear All

Please see the below script. Everything is fine up & down scrolling is working fine. But left & right scrolling is not working in internet explorer. Please help on this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="http://mehidy.pcriot.com/bmi-int-js/bmi.js" language="javascript"></script>
<head>
<title>Scrolling Freeze Panes html table like excel</title> 

<STYLE TYPE="text/css" MEDIA=all>

table {
border-collapse:collapse;
margin:0;
padding:0;
}
tr {
border:1px solid #000;
margin-bottom:4px;
padding:5px;
}
tr.last {
margin-bottom:none;
}

td {
border:1px solid #000;
}


.td1{background:#EEEEEE;color:#000;border:1px solid #000;}
.td2{border:1px solid #000;}

.th{background:blue;color:white;border:1px solid #000;}
A:link{COLOR:#0000EE;}A:hover{COLOR:#0000EE;}
A:visited{COLOR:#0000EE;}
A:hover{COLOR:#0000EE;}
.div_freezepanes_wrapper{position:relative;width:100%;height:550px;overflow:hidden;background:#fff;border-style:ridge;}
.div_verticalscroll{position:absolute;right:0px;width:18px;height:100%;background:#EAEAEA;border:1px solid #C0C0C0;}
.buttonUp{width:20px;position:absolute;top:2px;}
.buttonDn{width:20px;position:absolute;bottom:22px;}
.div_horizontalscroll{position:absolute;bottom:0px;width:100%;height:18px;background:#EAEAEA;border:1px solid #C0C0C0;}
.buttonRight{width:20px;position:absolute;left:0px;padding-top:2px;}
.buttonLeft{width:20px;position:absolute;right:22px;padding-top:2px;}
</STYLE>
 
 </head>
 
 <body>
<?php
//$host="localhost"; // Host name
$username="crosswea_mehidy"; // Mysql username
$password="123456"; // Mysql password
$database="crosswea_tech6"; // Database name
//$database="merchandising";

mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM newcomp ORDER BY ship_date ASC";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();
?>
 
 <div>
 
<div class="div_freezepanes_wrapper">

<div class="div_verticalscroll" onmouseover="this.style.cursor='pointer'">

<div style="height:50%;" onmousedown="upp();" onmouseup="upp(1);"><img class="buttonUp" src="images/uF035.png">
</div>
<div style="height:50%;" onmousedown="down();" onmouseup="down(1);"><img class="buttonDn" src="images/uF036.png">
</div>
</div>
<div class="div_horizontalscroll" onmouseover="this.style.cursor='pointer'">
<div style="float:left;width:50%;height:100%;" onmousedown="right();" onmouseup="right(1);"><img class="buttonRight" src="images/uF033.png">
</div>
<div style="float:right;width:50%;height:100%;" onmousedown="left();" onmouseup="left(1);"><img class="buttonLeft" src="images/uF034.png">
</div>
</div>

<table id="t1" cellpadding="2" style="border:1px solid #000;">



<tr>
<th class="th" width="300px">Order No#</th>
<th class="th">Days To Go</th>
<th class="th">Buying House</th>
<th class="th">Buyer</th>
<th class="th">Dept.Name</th>
<th class="th">Dept.For</th>
<th class="th">Brand</th>
<th class="th">Year</th>
<th class="th">Season</th>
<th class="th">Order.No</th>
<th class="th">Ship.Date<br/><font style="color: #666666; font-size: 50%;">YYYY-MM-DD</font></th>
<th class="th">Ship.Mood</th>
<th class="th">Days To Go</th>
<th class="th">Quantity</th>
<th class="th">Unit In</th>
<th class="th">Order Remarks</th>
<th class="th">Fabrics</th>
<th class="th">Composition</th>
<th class="th">Gsm</th>
<th class="th">Special Effect</th>
<th class="th">Yarn Count</th>
<th class="th">Fabrics Remarks</th>
<th class="th">Fabrics Booking Ref No#</th>
<th class="th">Items</th>
<th class="th">Size Range</th>
<th class="th">Total Combo</th>
<th class="th">Total FabCol</th>
<th class="th">Print</th>
<th class="th">Emb</th>
<th class="th">Wash</th>
<th class="th">Price In</th>
<th class="th">Unit Price</th>
<th class="th">Total Price</th>
<th class="th">Destination</th>
<th class="th">Master L/C No</th>
<th class="th">Payments Terms</th>
<th class="th">Shipping Line</th>
<th class="th">Commercial Invoice No</th>
<th class="th">Ex-Factor On</th>
<th class="th">Buying/Buyer Merchandiser</th>
<th class="th">Crosswaer A/c</th>
<th class="th">Order Confirm On</th>
<th class="th">Order Added in System On</th>
</tr>
<?php
$i=0;
while ($i < $num) {
$f6=mysql_result($result,$i,"buyinghouse");
$f1=mysql_result($result,$i,"buyer");
$f7=mysql_result($result,$i,"departmentname_no");
$f12=mysql_result($result,$i,"department_for");

$f8=mysql_result($result,$i,"year");
$f9=mysql_result($result,$i,"season");
$f2=mysql_result($result,$i,"order_no");
$f3=mysql_result($result,$i,"ship_date");

//$f4= date("Y-m-d");
$f4= date("F j, Y"); 

$start=strtotime($f4);

$end=strtotime($f3);

$sum=$end-$start;

$result1=floor($sum/86400);
$f5="$result1";

$f10=mysql_result($result,$i,"qty");
$f11=mysql_result($result,$i,"unitin");
$f13=mysql_result($result,$i,"items");
$f14=mysql_result($result,$i,"size_range");

$f15=mysql_result($result,$i,"fab_name1");
$f16=mysql_result($result,$i,"fab_comp1");
$f17=mysql_result($result,$i,"gsm1");
$f18=mysql_result($result,$i,"spcialeft1");
$f19=mysql_result($result,$i,"yarncount1");
$f20=mysql_result($result,$i,"fab_rmks1");
$f21=mysql_result($result,$i,"ttlcombo");
$f22=mysql_result($result,$i,"ttlfabcol");
$f23=mysql_result($result,$i,"print");
$f24=mysql_result($result,$i,"emb");
$f25=mysql_result($result,$i,"wash");
$f26=mysql_result($result,$i,"pricein");
$f27=mysql_result($result,$i,"unitprice");


$start1=($f10);
$end1=($f27);
$sum1=$end1*$start1;
$f28="$sum1";

$f29=mysql_result($result,$i,"brand");
$f30=mysql_result($result,$i,"buyer_mer");
$f31=mysql_result($result,$i,"mrchand_name");
$f32=mysql_result($result,$i,"ship_mood");

$f33=mysql_result($result,$i,"fab_bkngref");
$f34=mysql_result($result,$i,"masterlcno");
$f35=mysql_result($result,$i,"payments_terms");
$f36=mysql_result($result,$i,"shippingline");
$f37=mysql_result($result,$i,"invoiceno");
$f38=mysql_result($result,$i,"exfacton");
$f39=mysql_result($result,$i,"orderaddedon");
$f40=mysql_result($result,$i,"fab_name2");
$f41=mysql_result($result,$i,"fab_comp2");
$f42=mysql_result($result,$i,"gsm2");
$f43=mysql_result($result,$i,"spcialeft2");
$f44=mysql_result($result,$i,"yarncount2");
$f45=mysql_result($result,$i,"fab_rmks2");
$f46=mysql_result($result,$i,"destination");
$f47=mysql_result($result,$i,"id");
$f48=mysql_result($result,$i,"ord_rmks");



?>



<tr align="center" onmouseover="this.style.background='#EEEEEE';" onmouseout="this.style.background='';">
<td class="td1"> <?php echo $f2; ?> </td>
<?php
if($f5>60) {
    // Display RED
?>
<td align="center" valign="middle" style="background-color:#0F0;"><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
<?php
} elseif($f5>30 && $f5<61) {
    // Display YELLOW
?>
<td align="center" valign="middle" style="background-color:#FF0;"><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
<?php    
} else {
?>
<td align="center" valign="middle" style="background-color:#F00;"><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
<?php
}
?>

<td nowrap><?php echo $f6; ?></td>
<td nowrap><?php echo $f1; ?></td>
<td nowrap><?php echo $f7; ?></td>
<td nowrap><?php echo $f12; ?></td>
<td nowrap><?php echo $f29; ?></td>
<td nowrap><?php echo $f8; ?></td>
<td nowrap><?php echo $f9; ?></td>
<td nowrap><?php echo $f2; ?></td>
<td nowrap><?php echo $f3; ?></td>
<td nowrap><?php echo $f32; ?></td>

<?php
if($f5>60) {
    // Display RED
?>
<td align="center" valign="middle" style="background-color:#0F0;"><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
<?php
} elseif($f5>30 && $f5<61) {
    // Display YELLOW
?>
<td align="center" valign="middle" style="background-color:#FF0;"><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
<?php    
} else {
?>
<td align="center" valign="middle" style="background-color:#F00;"><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
<?php
}
?>

<td nowrap><?php echo $f10; ?></td>
<td nowrap><?php echo $f11; ?></td>
<td nowrap><?php echo $f48; ?></td>


<td>
<table>
<tr>
<td align="center" height="50px" width="100px"><font face="Arial, Helvetica, sans-serif" size="1px"><?php echo $f15; ?></font></td>
</tr>
<tr>
<td align="center" height="50px"><font face="Arial, Helvetica, sans-serif" size="1px"><?php echo $f40; ?></font></td>
</tr>
</table>
</td>

<td>
<table>
<tr>
<td align="center" height="50px" width="100px"><font face="Arial, Helvetica, sans-serif" size="1px"><?php echo $f16; ?></font></td>
</tr>
 <tr>
<td align="center" height="50px"><font face="Arial, Helvetica, sans-serif" size="1px"><?php echo $f41; ?></font></td>
</tr>
</table>
</td>

<td>
<table>
<tr>
<td align="center" height="50px" width="100px"><font face="Arial, Helvetica, sans-serif" size="1px"><?php echo $f17; ?></font></td>
</tr>
<tr>
<td align="center" height="50px"><font face="Arial, Helvetica, sans-serif" size="1px"><?php echo $f42; ?></font></td>
</tr>
</table>
</td>

<td>
<table>
<tr>
<td align="center" height="50px" width="100px"><font face="Arial, Helvetica, sans-serif" size="1px"><?php echo $f18; ?></font></td>
</tr>
<tr>
<td align="center" height="50px"><font face="Arial, Helvetica, sans-serif" size="1px"><?php echo $f43;?></font></td>
</tr>
</table>
</td>

<td>
<table>
<tr>
<td align="center" height="50px" width="100px"><font face="Arial, Helvetica, sans-serif" size="1px"><?php echo $f19;?></font></td>
</tr>
<tr>
<td align="center" height="50px"><font face="Arial, Helvetica, sans-serif" size="1px"><?php echo $f44;?></font></td>
</tr>
</table>
</td>


<td>
<table>
<tr>
<td align="center" height="50px" width="100px"><font face="Arial, Helvetica, sans-serif" size="1px"><?php echo $f20;?></font></td>
</tr>
<tr>
<td align="center" height="50px"><font face="Arial, Helvetica, sans-serif" size="1px"><?php echo $f45;?></font></td>
</tr>
</table>
</td>

<td nowrap><?php echo $f33; ?></td>
<td nowrap><?php echo $f13; ?></td>
<td nowrap><?php echo $f14; ?></td>
<td nowrap><?php echo $f21; ?></td>
<td nowrap><?php echo $f22; ?></td>
<td nowrap><?php echo $f23; ?></td>
<td nowrap><?php echo $f24; ?></td>
<td nowrap><?php echo $f25; ?></td>
<td nowrap><?php echo $f26; ?></td>
<td nowrap><?php echo $f27; ?></td>
<td nowrap><?php echo $f28; ?></td>
<td nowrap><?php echo $f46; ?></td>
<td nowrap><?php echo $f34; ?></td>
<td nowrap><?php echo $f35; ?></td>
<td nowrap><?php echo $f36; ?></td>
<td nowrap><?php echo $f37; ?></td>
<td nowrap><?php echo $f38; ?></td>

<td nowrap><?php echo $f30; ?></td>
<td nowrap><?php echo $f31; ?></td>
<td nowrap>11141.*A</td>
<td nowrap><?php echo $f39; ?></td>
<td align="center"><a href="updateano.php?id=<?php echo $f47; ?>">update</a></td>


</tr>


<?php
$i++;
}
?>


</table>
</div>
<br>
<br>
</div>

<script type="text/javascript">

var myRow=2;
  var myCol=2;
  var myTable;
  var noRows;
  var myCells,ID;
  
function setUp(){
    if(!myTable){myTable=document.getElementById("t1");}
     myCells = myTable.rows[0].cells.length;
    noRows=myTable.rows.length;

    for( var x = 0; x < myTable.rows[0].cells.length; x++ ) {
        colWdth=myTable.rows[0].cells[x].offsetWidth;
        myTable.rows[0].cells[x].setAttribute("width",colWdth-4);

    } 
}

function right(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myCol<(myCells)){
        for( var x = 0; x < noRows; x++ ) {
            myTable.rows[x].cells[myCol].style.display="";
        }
        if(myCol >1){myCol--;}

        ID = window.setTimeout('right()',100);
    }
}
  
function left(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myCol<(myCells-1)){
        for( var x = 0; x < noRows; x++ ) {
            myTable.rows[x].cells[myCol].style.display="none";
        }
        myCol++
        ID = window.setTimeout('left()',100);
        
    }
}
  
function down(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myRow<(noRows-1)){
            myTable.rows[myRow].style.display="none";
            myRow++    ;
        
            ID = window.setTimeout('down()',100);
    }    
}
 
function upp(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myRow<=noRows){
        myTable.rows[myRow].style.display="";
        if(myRow >1){myRow--;}
        ID = window.setTimeout('upp()',100);
    }    
}

</script> 

</body>
</html>
<script language="javascript">
<!--
bmi_SafeAddOnload(bmi_load,"bmi_orig_img",0);
//-->

</script>