With the following code, there is a problem. If the table fits into the browser window and you click on the link, the div scrolls down properly.
But, if browser window is smaller (resize browser so bottom is on the line), the entire body will scroll when you click the link. (body has owerflow:hidden)
Is there anything I can do to prevent that from happening, where top of table is scrolled out of browser window? Cannot change the general design.
Note: this is a simplification of the page just to show my problem. The example table is scrolled to display the text, in real life the div is fitted inseide window.
<html>
<head>
<title>Test</title>
</head>
<body style="overflow: hidden">
<table border="1">
<tr>
<td width="100" height="400" valign="top"><br>
<table><tr><td height="200"></td></tr></table>
Place browser bottom here<br>
__________
</td>
<td>
<div style="overflow: auto; height: 400px; width: 400px">
<table width="380">
<tr>
<td valign="top" width="380" height="1000"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#pageanchor">Click this link to reach the anchor at
the bottom</a></td>
</tr>
<tr>
<td><a name="pageanchor"></a>This text is displayed at the end of the scrollable div</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>Might be easier to style some of this with CSS, rather than a gazillion tables. Send us a link to the actual page -- that might help.
KDLA
But, if browser window is smaller (resize browser so bottom is on the line), the entire body will scroll when you click the link. (body has owerflow:hidden)
Is there anything I can do to prevent that from happening, where top of table is scrolled out of browser window? Cannot change the general design.
Note: this is a simplification of the page just to show my problem. The example table is scrolled to display the text, in real life the div is fitted inseide window.
<html>
<head>
<title>Test</title>
</head>
<body style="overflow: hidden">
<table border="1">
<tr>
<td width="100" height="400" valign="top"><br>
<table><tr><td height="200"></td></tr></table>
Place browser bottom here<br>
__________
</td>
<td>
<div style="overflow: auto; height: 400px; width: 400px">
<table width="380">
<tr>
<td valign="top" width="380" height="1000"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#pageanchor">Click this link to reach the anchor at
the bottom</a></td>
</tr>
<tr>
<td><a name="pageanchor"></a>This text is displayed at the end of the scrollable div</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>Might be easier to style some of this with CSS, rather than a gazillion tables. Send us a link to the actual page -- that might help.
KDLA