Datatables + IE7 = height problem?

xDisruptor

I am having issues with the auto-adjusting the height of the table under IE7. My markup is pretty simple:

[code]








[/code]

---------- My initialization code is: -------------

[code]
$('#datatable').dataTable({
"bAutoWidth": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"aoColumns": [ "Foo1", "Foo2", "Foo3", "Foo4" ],
"aaData": [
[ "Foo1", "Foo2", "Foo3", "Foo4" ],
[ "Foo1", "Foo2", "Foo3", "Foo4" ],
[ "Foo1", "Foo2", "Foo3", "Foo4" ],
[ "Foo1", "Foo2", "Foo3", "Foo4" ],
... [repeat many many times] ...
[ "Foo1", "Foo2", "Foo3", "Foo4" ]
]
});
});
[/code]

------- And css: --------

[code]
html, body {
height: 100%;
}

body {
background:#f0f0f0;
font-size: 13px;
font-family: "Trebuchet MS", Arial, sans-serif;
color: #525c5f;
overflow: hidden;
}

a { color: #3985b1; text-decoration:none; }
a:visited { color: #3985b1; }
a:hover { color: #3985b1; }
a:focus { outline: 0; }
a:hover, a:active { outline: 0; }


#wholepagecontainer {
border:1px solid #d1d1d1;
position: relative;
height: 90%;
margin: 20px 20px 20px 20px;
}


#content {
margin:0;
padding: 0;
border-top: 1px solid #fcfbfc;
overflow-y: scroll;
overflow-x: scroll;
color: #6d757d;
}

#datatable th {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 15px;
color: #525c5f;
color: #fff;
height: 28px;
border-left: 1px solid #3b8eb3;
border-right: 1px solid #0b6891;
border-top: 1px solid #0a4b67;
border-bottom: 1px solid #0a4b67;
cursor: pointer;
}
[/code]

------------------------------------

I've tested this with datatables versions 1.8.x, 1.9.1 and the latest nightly. Jquery version 1.7.2. This issue doesnt occur under IE8 and IE9. It also disappears under IE7 only if I instruct IE9 to behave as IE7 in Quirks Mode (using the developer tools). Any ideas as to what might be causing the problem?