308803 - HTML Rendering Bug with Tables and setting style.display

Status: RESOLVED DUPLICATE of bug 97506

(Firefox :: General, defect)

Description

[Asziid]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; de-DE; rv:1.7.10) Gecko/20050717 Firefox/1.0.6 (ax)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; de-DE; rv:1.7.10) Gecko/20050717 Firefox/1.0.6 (ax)

There is a bug in the rendering engine of Firefox. This bug makes table rows
collapse to the left and makes it impossible to hide/show table rows dynamically.

Have a look at the following HTML snippet:

<table>
<tr>
<td>Table head left</td>
<td>Table head right</td>
</tr>
<tr id="row1">
<td>Table cell 1 left</td>
<td>Table cell 1 right</td>
</tr>
<tr>
<td>Table cell 2 left</td>
<td>Table cell 2 right</td>
</tr>
<tr>
<td>
<input type="button" value="Set to block" name="settoblock"
onclick="document.getElementById('row1').style.display = 'block';">
</td>
<td>
<input type="button" value="Set to none" name="settonone"
onclick="document.getElementById('row1').style.display = 'none';">
</td>
</tr>
</table>

When clicking on [Set to none] the second row of the table is made invisible.
When clicking on [Set to block], the TRs display style is set to "block" again
("block" should be the default for TRs - see CSS spec of W3C).

Unfortunatelly the Firefox browser does not simply make the TR visible but
renders both TDs of the second row on the left side as if this would be a table
with two cells within the left cell of the second row.

I might use style.visibility instead of style.display, but this attribute is not
available in Internet Explorer and I need to write the same JavaScript for both
browsers.

Is this a known problem to Firefox/Gecko?

Reproducible: Always

Steps to Reproduce:
1. use HTML snippet to create HTML file
2. open HTML file with firefox
3. click on [Set to block]

Actual Results:  
Second row is not rendered correctly. Both cells are rendered below the left
cell of prior row.

Expected Results:  
Both cells should be rendered exactly below the cells above.

Comment 1

[Asziid]

Attachment: Example HTML file which shows the problem

Comment 2

[Asziid]

When you click on "Set to none" after you clicked on "Set to block" the line is
not made invisible correctly. A blank table row is inserted. Repeatetly clicking
between both buttons creates even more space between row 1 and 3.

Very strange!

Comment 3

[José Jeria]

Default value of the table row is "table-row", instead toggle between "none" and
"" for a cross-browser solution.

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