Hello all,

I'm working on an intranet app targeting IE 6.0. I have a table nested in a scrollable div and I need to save the scroll position between postbacks, so I have a hidden field and 2 javascript functions. This works fine when the div is not nested in a table, but if the div in contained in a table, it doesn't work properly.

Due to the framework I'm working in, I have to have the table surrounding my div, and I can't add anything to the body tag. The actual project is an ASP.NET 1.1 server control, so that is why I have the script tag that calls the gridLoad function after the div.

This works:
Code:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="ScrollTest.aspx.vb" Inherits="AnotherTest.ScrollTest"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>ScrollTest</title>	
    <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
  </HEAD>
  <body >
  <script language="javascript">
  function saveScroll()
  {
	var pos = document.getElementById('hdnScrollPos');
	pos.value = event.srcElement.scrollTop;
  }
  function gridLoad(gridID, posID)
  {
	var el = document.getElementById(gridID);
	el.scrollTop = document.getElementById(posID).value;
  }
  </script>
	
    <form id="Form1" method="post" runat="server">
		<INPUT id="hdnScrollPos" type=hidden runat="server" NAME="hdnScrollPos">
		<div id="divScroll" style="OVERFLOW:auto;WIDTH:70px;HEIGHT:100px" onscroll="saveScroll()">
			<table>
				<tr>
					<td>1</td>
					<td>A</td>
				</tr>
				<tr>
					<td>2</td>
					<td>B</td>
				</tr>
				<tr>
					<td>3</td>
					<td>C</td>
				</tr>
				<tr>
					<td>4</td>
					<td>D</td>
				</tr>
				<tr>
					<td>5</td>
					<td>E</td>
				</tr>
				<tr>
					<td>1</td>
					<td>A</td>
				</tr>
				<tr>
					<td>2</td>
					<td>B</td>
				</tr>
				<tr>
					<td>3</td>
					<td>C</td>
				</tr>
				<tr>
					<td>4</td>
					<td>D</td>
				</tr>
				<tr>
					<td>5</td>
					<td>E</td>
				</tr>
				<tr>
					<td>1</td>
					<td>A</td>
				</tr>
				<tr>
					<td>2</td>
					<td>B</td>
				</tr>
				<tr>
					<td>3</td>
					<td>C</td>
				</tr>
				<tr>
					<td>4</td>
					<td>D</td>
				</tr>
				<tr>
					<td>5</td>
					<td>E</td>
				</tr>
				<tr>
					<td>1</td>
					<td>A</td>
				</tr>
				<tr>
					<td>2</td>
					<td>B</td>
				</tr>
				<tr>
					<td>3</td>
					<td>C</td>
				</tr>
				<tr>
					<td>4</td>
					<td>D</td>
				</tr>
				<tr>
					<td>5</td>
					<td>E</td>
				</tr>
			</table>
		</div>
		<asp:Button id=Button1 runat="server" Text="PostBack"></asp:Button>
		<script language="javascript">gridLoad('divScroll','hdnScrollPos');</script>
    </form>
			
  </body>
</HTML>
But this doesn't work when it's in a table...
Code:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="ScrollTest.aspx.vb" Inherits="AnotherTest.ScrollTest"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>ScrollTest</title>	
    <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
  </HEAD>
  <body >
  <script language="javascript">
  function saveScroll()
  {
	var pos = document.getElementById('hdnScrollPos');
	pos.value = event.srcElement.scrollTop;
  }
  function gridLoad(gridID, posID)
  {
	var el = document.getElementById(gridID);
	el.scrollTop = document.getElementById(posID).value;
  }
  </script>
	<table>
		<tr>
			<td>
    <form id="Form1" method="post" runat="server">
		<INPUT id="hdnScrollPos" type=hidden runat="server" NAME="hdnScrollPos">
		<div id="divScroll" style="OVERFLOW:auto;WIDTH:70px;HEIGHT:100px" onscroll="saveScroll()">
			<table>
				<tr>
					<td>1</td>
					<td>A</td>
				</tr>
				<tr>
					<td>2</td>
					<td>B</td>
				</tr>
				<tr>
					<td>3</td>
					<td>C</td>
				</tr>
				<tr>
					<td>4</td>
					<td>D</td>
				</tr>
				<tr>
					<td>5</td>
					<td>E</td>
				</tr>
				<tr>
					<td>1</td>
					<td>A</td>
				</tr>
				<tr>
					<td>2</td>
					<td>B</td>
				</tr>
				<tr>
					<td>3</td>
					<td>C</td>
				</tr>
				<tr>
					<td>4</td>
					<td>D</td>
				</tr>
				<tr>
					<td>5</td>
					<td>E</td>
				</tr>
				<tr>
					<td>1</td>
					<td>A</td>
				</tr>
				<tr>
					<td>2</td>
					<td>B</td>
				</tr>
				<tr>
					<td>3</td>
					<td>C</td>
				</tr>
				<tr>
					<td>4</td>
					<td>D</td>
				</tr>
				<tr>
					<td>5</td>
					<td>E</td>
				</tr>
				<tr>
					<td>1</td>
					<td>A</td>
				</tr>
				<tr>
					<td>2</td>
					<td>B</td>
				</tr>
				<tr>
					<td>3</td>
					<td>C</td>
				</tr>
				<tr>
					<td>4</td>
					<td>D</td>
				</tr>
				<tr>
					<td>5</td>
					<td>E</td>
				</tr>
			</table>
		</div>
		<asp:Button id=Button1 runat="server" Text="PostBack"></asp:Button>
		<script language="javascript">gridLoad('divScroll','hdnScrollPos');</script>
    </form>
			</td>
		</tr>
	</table>
  </body>
</HTML>
The code behind is the default provided by VS2003, the postback button does nothing but cause post back.

Any ideas on why it doesn't work when it is wrapped up in a table? or any ways around it?

Thanks,
Ranthalion