Overflowing div: IE displays scrollbars behind the div's content

[MatthewHSE]

I've got a div with a table inside. The table has 51 rows, each one cell wide. I want the height of the div to be 180px, and I set overflow to auto. The problem is that IE displays the div's scrollbars behind the table. Here's the code:

(Okay, I know I shouldn't use nested tables but in this case I can't help it. The "interior" table is script-generated and I can't change it. So here's the code in question.)

<table width="180" cellpadding="0" cellspacing="0">
<tr>
<td>Table Heading</td>
</tr>
<tr>
<td>
<div style="height: 180px; width: auto; overflow: auto;">
<table style="width: 100%;">
<tr>
<td width="100%">Many more rows follow this one.</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

Does anyone know why IE might be putting the scrollbars on the div, behind the table the div contains? Maybe because the table is set to 100% . . . but in that case, since it's script-generated, I can't change it. Any thoughts, anyone? (The innermost table is the ONLY code there that I have no control over; I can change anything else.)

Thanks,

Matthew

[DrDoc]

Well, though this is not a pretty solution, it might work for you:

<table width="180" cellpadding="0" cellspacing="0">
<tr>
<td>Table Heading</td>
</tr>
<tr>
<td>
<div style="height: 180px; width: auto; overflow: auto;">
<div style="width:160px;">
<table style="width: 100%;">
<tr>
<td width="100%">Many more rows follow this one.</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>

[DrDoc]

You can also give your div an ID ("foobar" for example) and put this script right after the div:

<script type="text/javascript">
changeThis = document.getElementById('foobar').innerHTML;
regexp = /<table[^>]*>/ig;
changeTo = changeThis.replace(regexp,"<table>");
document.getElementById('foobar').innerHTML = changeTo;
</script>

[MatthewHSE]

Thanks DrDoc. I tried the first solution and it worked fine in IE but created horizontal scrollbars in Mozilla. So, as suggested in another recent thread about divs, I set the width to 80%. That made everything happy.

Like you said, it's not a very pretty solution, but it works. Thanks for the advice!

Matthew