How to make Ajax Progressbar at the center of the page while scrolling also

Question

<script language="JavaScript">
function adjustDivs(){
var df=document.getElementById('<%=UpdateProgress.ClientID %>');
df.style.position='absolute' ;
df.style.left = (document.documentElement.scrollLeft+45) + '%';
df.style.top = (document.documentElement.scrollTop+300) + 'px';
}
window.onload=adjustDivs;
window.onresize=adjustDivs;
window.onscroll=adjustDivs;
</script>
<ajax:UpdateProgress ID="UpdateProgress" runat=server >
<ProgressTemplate>
<table width="200" style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;" height="75" id="updateProgressTable" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor=darkblue>
<b>
<font face="Verdana" size=2pt color="#FFFFFF"><asp:Label ID=lblmessage runat=server Text="Please wait..."></asp:Label></font>
</b>
</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">
<table border="0" id="table2" cellspacing="4" cellpadding="3">
<tr>
<td><img id="Img1" src="~/images/icon-loading.gif" runat=server/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" valign="bottom" bgcolor="#FFFFFF"></td>
</tr>
</table>
</ProgressTemplate>
</ajax:UpdateProgress>

 The progress box now appears in the center of the screen even when you scroll in Ie but not in chrome .
any one help me