How to prevent gridview contained in div from being overlayed by footer when overflow is visible

See more:

ASP.NET

CSS

Gridview

I have posted this question in a few other forums and have not gotten any replies.

I have also tried searching online for an answer and have not been able to find one. Basically, I have a webpage where I display some account information in a gridview. The end user can sort the data by the various header fields and I have a button where they can print out all of the data. Initially, I had paging enabled but was asked to remove it and add a scrollbar instead.

So I created a table that contained the table header information and placed it on top of the gridview and added the gridview inside of a div and set the overflow to get the scrollbar. I am running into problems when the end user clicks on the print button.

When the overflow is set to be visible, the footer is displayed on top of the gridview contents. I did not have this problem when I was enabling and disabling the paging on the gridview.

I have a master page where the footer is defined. When the end user clicks on the print button, the page is displayed with the overflow, the print popup is displayed, and then the page is reset back to not displaying the overflow in the div.

I have a separate stylesheet that I am using for the printing. Is there someway that I can fix this problem? I have tried setting the z-index and that did not work. I also tried dynamically calculating the height based on how many entries in the gridview and that didn't seem to work either. I have been looking at this for a while and am stuck. This is my first asp.net project.

I have included some code snippets below. Thanks in advance for your help!
Code in StyleSheet:

#footer  
{ 
  position: absolute; 
  bottom: 0; 
  width:100%; 
  height: 50px; 
  background-color: #4E7DD1; 
  clear: both; 
  text-align: center; 
  color: #B6CEF9; 
  font-family: verdana, arial, sans-serif; 
  font-size: 11px; 
  line-height: 18px; 
} 

CSS on div for gridview:

<div id="ListAllAccountsResultsDiv" style="min-height:300px;max-height:300px;width:1015px;overflow:auto;text-align:left;z-index:2"  runat="server">

Code in Page_Load:

if (IsPostBack) 
{ 
     object ctl = this.FindControl(this.Request.Params.Get("__EVENTTARGET")); 
     if (ctl.GetType().ToString() == "System.Web.UI.WebControls.LinkButton") 
     { 
            System.Web.UI.WebControls.LinkButton lb = (System.Web.UI.WebControls.LinkButton)ctl; 
            System.Web.UI.Control divResults = Page.FindControl("ListAllAccountsResultsDiv"); 
                                                 
             if (lb.ID == this.listAllAcctsBtnPrinterFriendlyFormat.ID) 
             { 
                  if(ListAllAccountsResultsDiv.Style["overflow"].Equals("auto"))
                  { 
                       ListAllAccountsResultsDiv.Style.Remove("overflow"); 
                       ListAllAccountsResultsDiv.Style.Add("overflow", "visible"); 
                       ListAllAccountsButtons.Style.Add("display", "none"); 
                       String cstext = "window.print();setTimeout(\"__doPostBack('" + this.listAllAcctsBtnPrinterFriendlyFormat.UniqueID + "','')\",1000);"; 
                       ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "PopupScript", cstext, true); 
                  }                             
                  else 
                  {                                 
                       ListAllAccountsResultsDiv.Style.Remove("overflow"); 
                       ListAllAccountsResultsDiv.Style.Add("overflow", "auto"); 
                       ListAllAccountsButtons.Style.Remove("display");                         
                   } 
              } 
        } 
 }