bad rendering of table elements when hiding/showing table rows using javascript

RESOLVED DUPLICATE of bug 97506

Status

()

--
major
RESOLVED DUPLICATE of bug 97506
14 years ago
14 years ago

People

(Reporter: philipp.grosswiler, Assigned: bugzilla)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

14 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

I am trying to use one big container (<div> around <table>), with one main area
inside the <table> using 100% height, and multiple smaller areas below the main
area (but all in the big container).

Firefox correctly renders the first time you open the page. But when you start
to play around by hiding/showing some of the smaller areas, Firefox renders the
table incorrectly. It seems like Firefox isn't calculating the new heights of
the table rows correctly.

However, it works in IE as it should.

Reproducible: Always
Steps to Reproduce:
First Pass:
1. Open the page http://217.148.9.14/tests/table-display.html
2. You will see three areas, "Green", "Blue" and "Orange". There is one big
"Red" area behind all them (the main container <div>).
3. Click on "Orange" to hide the area. There is already the first bug: it does
hide the area, but it doesn't resize the table, so the area is still the same
height as before.
4. Now click on the very same "Orange" button to make the area visible again.
5. Click on "Orange" the third time, and Firefox does it correct, the area is
hidden and the table height is correctly rendered.

Second Pass:
1. Open the page http://217.148.9.14/tests/table-display.html
2. You will see three areas, "Green", "Blue" and "Orange". There is one big
"Red" area behind all them (the main container <div>).
3. Click on "Orange" and "Blue". This will show the same problem like above.
4. Now click on "Blue" again. This will make the "Blue" area visible again and
at the same time correct the "Orange" area by resizing.
5. Click "Blue" again to hide it. Firefox is doing it correct now.
6. Click on "Orange" and then "Blue". Firefox suddenly shows scrollbars where it
shouldn't.
7. Now "fake" click on any button and Firefox corrects the display. By "fake"
click I mean to only press the mouse button down, without releasing it.
Actual Results:  
Firefox renders the table layout incorrectly after pressing some buttons in a
certain way.

Expected Results:  
Firefox should render the layout correctly in the beginning, as it does when
playing around further.

For your convienence, I copied the source code of the HTML causing the problem:

<div style="background-color: red; width: 100%; height: 400; overflow: auto;">

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
	<tr>
		<td width="100%" height="100%">
			<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
	<td>
<button onclick="document.getElementById('_green').style.display = (
document.getElementById('_green').style.display == 'none' ) ? '' :
'none';">Green</button>
	</td>
</tr>
				<tr id="_green">
					<td width="100%" height="100%">
<div style="background-color: green; width: 100%; height: 100%; overflow: auto;">
</div>
					</td>
				</tr>
			</table>
		</td>
	</tr>

	<tr>
		<td width="100%">
			<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
	<td>
<button onclick="document.getElementById('_blue').style.display = (
document.getElementById('_blue').style.display == 'none' ) ? '' :
'none';">Blue</button>
	</td>
</tr>
				<tr id="_blue">
					<td>
<div style="background-color: blue; width: 100%; height: 100; overflow: auto;">
</div>
					</td>
				</tr>
			</table>
		</td>
	</tr>

	<tr>
		<td width="100%">
			<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
	<td>
<button onclick="document.getElementById('_orange').style.display = (
document.getElementById('_orange').style.display == 'none' ) ? '' :
'none';">Orange</button>
	</td>
</tr>
				<tr id="_orange">
					<td>
<div style="background-color: orange; width: 100%; height: 100; overflow: auto;">
</div>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

</div>

Comment 1

14 years ago

*** This bug has been marked as a duplicate of 97506 ***
Status: UNCONFIRMED → RESOLVED
Last Resolved: 14 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.