I'd really appreciate a hand getting my fixed-header table scrolling in IE7.
In IE7, my tall data table is forcing its containing DIV to expand vertically, and preventing that DIV's scrollbar from showing. I'm using the excellent cross-browser (including IE7) scrolling, fixed-headers table layout solution from: http://www.sitepoint.com/forums/showthread.php?t=615364&page=3 , but I've modified it so that the table fills the page.
Here's how that looks in-practice:
<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
#results { position: absolute; top: 2em; bottom: 0; width: 100%; }
#results div { width: 100%; height: 100%; overflow: auto; overflow-x: hidden; }
#results table { width: 100%; }
#results table th p { position: absolute; top: -2em; }
</style>
<body>
<div id='results'> <!-- provides position referece to headers -->
<div> <!-- scrolls the table it contains -->
<table> <!-- incorrectly expands parent div in IE7 -->
<tr><th><p>FIXED-HEADER HERE</p></th></tr>
<tr><td>TALL CONTENT HERE</td></tr>
</table>
</div>
</div>
</body>
I'm happy with how the headers and scrolling work in FF and IE8. Debug kit in IE7 shows that #results has the desired height, but both DIV and TABLE share the same extremely tall value, where DIV should actually be the height of #results. If I change DIV height from % to px units, it scrolls, but of course no longer resizes properly.
I'm using strict doctype. My table actually contains tabular data, typically 10 columns and 200 rows, so a table is semantically accurate. There's actually more content around this table of course.
I'd prefer not to use javascript for dynamic dimensions, unless it is so simple that it's bulletproof, since I always end up with stupid defects (oh, yeah, I didn't think to re-evaluate size when you hover over hyperlinks and the line height changes, etc.).
Thank you, Shannon