redrawing elements in IE on the fly

hiding/unhiding a div

[djtaylor]

I'm trying to make a <div> hidden and unhidden, toggled by a javascript function. The problem is that while this works, in IE it unhides the hidden div and it overlaps content directly below it (looks really bad and unusable).
The div is <div id="qr_open_xx" style="display: none; position: relative;">
Firefox and Opera are able to handle this properly and push the content the needed space down so there is no overlapping.
The funny thing is, in IE, after I click the link to unhide the div, they overlap. But if I mouse over the image in the next "bigcontainer", IE redraws everything correctly, but only if I do that.
Any suggestions would be greatly appreciated.

Here is the code:

<script language="javascript">
function Togglediv(divName) 
{ 
with (document.getElementById(divName).style)
{
if (display == "none")
display = "";
else display = "none";
}
}
</script>
<table align="center" class="bigcontainer">
<tr bordercolor="#99C7FF" bordercolorlight="#C6DBFF" bordercolordark="#0D46DF" bgcolor="#FFFFFF">
<td width="30%" align="center" valign="middle" class="imagecontainer"><a href="images/1106686752194.gif" target="_blank" class="img"> <img src="images/thumbs/1106686752194.gif" id="47" alt="1106686752194.gif preview" border="0" style="background-color: #DAEAFE" /></a><br />
pretty image </td>
<td class="imageinfocontainer">ID: 47<br />Filename: 1106686752194.gif<br />Size: 323x257<br />Submitted: Sat. Feb. 26, 01:24:46 AM CST<br />Image Source: a cool show<br />Email: [e-mail]<br />Image Rating: 5<br /></td>
</tr>
<tr><td>
<table>
<tr>
<td>1106686752194.gif</td>
<td><a href="javascript:Togglediv('qr_open_47');" title="Open Fast Reply Window">Fast Reply</td>
</tr>
</table>
<tr><td colspan="2">
<div id="qr_open_47" style="display: none; position: relative;">
Reply:
<form action="submitreply.php" method="post">
<textarea cols="70" rows="8" name="Post" class="textarea" tabindex="1"></textarea>
</form>
</div>
</td></tr>
</form>
</td></tr>
</table><table align="center" class="bigcontainer">
<tr bordercolor="#99C7FF" bordercolorlight="#C6DBFF" bordercolordark="#0D46DF" bgcolor="#FFFFFF">
<td width="30%" align="center" valign="middle" class="imagecontainer"><a href="images/1106969870472.jpg" target="_blank" class="img"> <img src="images/thumbs/1106969870472.jpg" id="46" alt="1106969870472.jpg preview" border="0" style="background-color: #DAEAFE" /></a><br />
</td>
<td class="imageinfocontainer">ID: 46<br />Filename: 1106969870472.jpg<br />Size: 600x600<br />Submitted: Sat. Feb. 26, 01:23:55 AM CST<br /></td>
</tr>
<tr><td>
<table>
<tr>
<td>1106969870472.jpg</td>
<td><a href="javascript:Togglediv('qr_open_46');" title="Open Fast Reply Window">Fast Reply</td>
</tr>
</table>
<tr><td colspan="2">
<div id="qr_open_46" style="display: none; position: relative;">
Reply:
<form action="submitreply.php" method="post">
<textarea cols="70" rows="8" name="Post" class="textarea" tabindex="1"></textarea>
</form>
</div>
</td></tr>
</form>
</td></tr>
</table>

[createErrorMsg]

What version of IE are you using? I loaded your code into IE6/Win and the toggle worked just fine.

cEM

[Storyman]

Might the browser cache have anything to do with it?

[djtaylor]

I was confused when you said it worked with IE 6 because that's what I was testing with as well.
The thing is, I didn't include my external CSS with the example and after viewing the tables with the CSS, IE does display it incorrectly.
The problem was with the "bigcontainer" class. position: relative; was the culprit. Not sure why that would cause this problem however.
Well, I feel a bit silly since that was the only problem, but your comment did help, CreateErrorMsg :)
Thanks!

[djtaylor]

oops, I meant after removing the CSS, IE DID display it correctly.