219259 - When I press a button that changes the 'style.display' from 'none' to 'block' for a <tr> the <tr> disapears but the space it took stays empty instead of being filled by the objects beneath the <tr>

Status: RESOLVED DUPLICATE of bug 97506

(SeaMonkey :: General, defect)

Description

[Sela Lerer]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.4) Gecko/20030624
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.4) Gecko/20030624

I made a page with a code that makes a table row apear or disapear when you
click another table row (it's a message bord). The JavaScript function that
perform this is:
function showMsg(id)
{
	var theMsg=document.getElementById(id);
	if(theMsg.style.display!='block')
	{
		theMsg.style.display='block';
	}
	else
	{
		theMsg.style.display='none';
	}
}
When the row apears it moves all elements beneath it downwards to evacuate space
for it self, but when it disapears it does not move all the elements beneath it
upwards as it should, instead it just leaves them where they are and when it
apears again the elements are being pushed downwards again and so forth.

Reproducible: Always

Steps to Reproduce:
1.Make and html table with 3 rows.
2.Write this function in a javascript:
function showMsg(id)
{
	var theMsg=document.getElementById(id);
	if(theMsg.style.display!='block')
	{
		theMsg.style.display='block';
	}
	else
	{
		theMsg.style.display='none';
	}
}
3.In the onclick of the first row call this function with the id of the second row.
4.In the style of the second row write "display:none;"
5.Click the first row several times and watch what happens.

Actual Results:  
The 3rd row is pushed down every non prity time you click the first row and
doesn't come back up.

Expected Results:  
Every prity time you click the 1st row it should go back to its original place.

Comment 1

[Olivier Cahagne]

can you attach a minimized testcase via "Create a new attachment" or publish a
working page on the Net ? This will ease reproducability.

Comment 2

[Alfonso Martinez]

Your example is wrong, the proper display for a tr is table-row, see
http://www.w3.org/TR/CSS2/visuren.html#propdef-display

You can workaround the bug in IE by setting display="" which works in both browsers.

Invalid.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Reopening.  While using 'table-row' would indeed lead to better behavior, the
fact that the space keeps growing is a bug in Mozilla.

Comment 4

[Boris Zbarsky [:bzbarsky]]

Bug 97506 pretty much covers this problem.

*** This bug has been marked as a duplicate of 97506 ***