Problem Collapsing Content in Firefox

[smichener]

I'm using Javascript "toggleDiv" functionality to expand and collapse content contained within a div. The solution works fine in IE but in Fireforx the following problem occurs.

The div will expand/collapse properly if I merely put text and/or line breaks inside the div. But If I put a table inside the div the space previously occupied by the table still remains after I hide the content.

Does anyone have a solution for this problem?

Thanks


Steve

 

[jemminger]

show your code...

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

 

[smichener]

Here's the code.

<script>
function toggleDiv1(){
var ndDiv = document.getElementById('divRecentShares')
if(ndDiv.className == 'divRecentSharesHide'){
ndDiv.className = 'divRecentSharesShow';
}
else{
ndDiv.className = 'divRecentSharesHide'
}
}

function toggleDiv2(){
var ndDiv = document.getElementById('divMyShared')
if(ndDiv.className == 'divMySharedHide'){
ndDiv.className = 'divMySharedShow';
}
else{
ndDiv.className = 'divMySharedHide'
}
}
</script>
<style>
.divRecentSharesHide {display:none;}
.divRecentSharesShow {display:block;}
.divMySharedHide {display:none;}
.divMySharedShow {display:block;}
</style>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="/browser/images/subTitleShareActivity.gif" width="173" height="14" /></td>
</tr>
<tr>
<td height="1" bgcolor="666666"><img src="/images/spacer.gif" width="1" height="1"></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="10"><img src="/images/spacer.gif" width="1" height="1"></td>
</tr>
</table>
<div class="v2default">4 new item shares have been made available to you. - <a href='#' onClick='toggleDiv1();'>Show/Hide
New Share Items</a></div>
<div class='divRecentSharesH


ide' id='divRecentShares'>
<table width="100%" border="0" cellspacing="1" cellpadding="2" align="left" class="v2small" bgcolor="dddddd">
Numerous table rows go here, left out to save space.
</table>
</div>
<div class="v2default">You are currently sharing <b>5</b> items with other users
- <a href='#' onClick='toggleDiv2();'>Show/Hide Items I am Currently Sharing
With others</a></div>
<div class='divMySharedHide' id='divMyShared'>My Shared Items go here</div>

 

[smichener]

I want to stress that the code does what I need it to do in the absence of the table within the div id=divRecentShares. Adding that table prevents the desired "collpase" from occuring.

 

[smichener]

Well I found a hacked solution to this problem. Try typing any character at all right after the table within the div id=divRecentShares and you will see that the entire div collpases as it should in Firefox. Take it out and the white space will remian. Unbelievable!

 

[jemminger]

try changing
.divRecentSharesShow {display:block;}

to
.divRecentSharesShow {display:table;}



-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

 

[smichener]

That's interesting, thanks. It now collapses but now the table itself is acting strange, cell widths are being completely ignored and vary row to row. Widths appear to be totally dependant on cell content. I imagine I'll have to find a CSS solution for this, and it appears my less that stellar CSS skills are the reason I ran into trouble in the first place. Thanks for setting me on the right path.

Steve