I'm having a bit of a problem with an expanding div inside of another that is set to scroll. This is only tested in IE7 because it will only ever be used with IE7 (Air Force) and I need to find a solution asap.
The behavior is unusual so the easiest way to see it is to copy the code locally and click on the "read more" links - watch the space around the scrolling div expand in addition to the content inside of it... I've tried so many different things and I can't get it to stop happening.
Below is a very stripped down version of the page with enough in it to show the problem.
Help?
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
td {
font-family: Tahoma;
font-size: 8pt;
border: 1px solid blue;
}
</style>
<script type="text/javascript">
function toggle(sender, item)
{
if (item.style.display == "none")
{
item.style.display = "";
sender.innerHTML = "[Read Less]";
}
else
{
item.style.display = "none";
sender.innerHTML = "[Read More]";
}
}
</script>
</head>
<body>
<table>
<tr>
<td style="width:100px; height:100px"> </td>
<td style="width:300px;"> </td>
<td style="width:100px;"> </td>
</tr>
<tr>
<td style="height:160px"> </td>
<td>
<div style="width:386px; height:150px; overflow:scroll; border:1px solid red;">
<table cellspacing="2" cellpadding="3" align="center" border="0">
<tr align="center">
<td align="center" valign="top" style="width:70px;">
<span>21 Aug 2007</span>
</td>
<td align="left" style="width:295px;">
<div style="padding-bottom:5px;">
<span>This is a test! Yay!</span>
</div>
<div style="float:left;">
<a onclick="toggle(this, more_1);" style="color: #4c5a7f;" href="#">[Read More]</a>
</div>
<div style="float:right">
-<span>Last, First</span>
</div>
<div id="more_1" style="display:none; clear:both; padding: 5px">
<span>
Developers… <br />
Please Help <br />
me figure out <br />
my crazy expanding <br />
Ghost Problem<br />
<br />
<br />
Please!<br />
Developers… <br />
Please Help <br />
me figure out <br />
my crazy expanding <br />
Ghost Problem<br />
<br />
<br />
Please!<br />
Developers… <br />
Please Help <br />
me figure out <br />
my crazy expanding <br />
Ghost Problem<br />
<br />
<br />
Please!<br />
</span>
</div>
</td>
</tr>
<tr align="center">
<td align="center" valign="top" style="width:70px;">
<span>21 Aug 2007</span>
</td>
<td align="left" style="width:295px;">
<div style="padding-bottom:5px;">
<span>This is a test! Yay!</span>
</div>
<div style="float:left;">
<a onclick="toggle(this, more_2);" style="color: #4c5a7f;" href="#">[Read More]</a>
</div>
<div style="float:right">
-<span>Last, First</span>
</div>
<div id="more_2" style="display:none; clear:both; padding: 5px">
<span>
Developers… <br />
Please Help <br />
me figure out <br />
my crazy expanding <br />
Ghost Problem<br />
<br />
<br />
Please!<br />
Developers… <br />
Please Help <br />
me figure out <br />
my crazy expanding <br />
Ghost Problem<br />
<br />
<br />
Please!<br />
Developers… <br />
Please Help <br />
me figure out <br />
my crazy expanding <br />
Ghost Problem<br />
<br />
<br />
Please!<br />
</span>
</div>
</td>
</tr>
</table>
</div>
</td>
<td> </td>
</tr>
<tr>
<td style="height:100px"> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Add to del.icio.us 
Can you digg it?
Linear Mode
