334792 - {inc} Table cells overlap when multiple rows change from display: none

Status: RESOLVED FIXED

(Core :: Layout: Tables, defect)

Description

[Ralph Stuermer]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

It is difficult to describe. See images in http://www.stuermer.li/firefox1502-problem.zip an reproduce the problem.

To see the problem extract zip-archive and do following steps:

1) Start preisrechner.html 
2) Click to Yale Polo (see img-1.jpg)
3) Click to Premium Polo (see img-2.jpg)
4) Click to Yale Polo again (see img-3.jpg)
5) See the display problem (img-4.jpg) ! Don't move mouse !
6) Move mouse cursor over button (green arrow) and it the display problem will disappeared

Repeat step 1 to 6 again and again also with some other items.

This Problem exist not by click on button on right site or on links on top of page.

for any further question

Ralph Stürmer
Germany
[e-mail]

Sorry for my bad english.

Reproducible: Always

Steps to Reproduce:
1.Download http://www.stuermer.li/firefox1502-problem.zip
2.Extract all Files
3.Read readme-first.txt

I use the default configuration.
Actual Results:  
Moved form elements. See img-4.jpg in zip package.

Expected Results:  
See img-2.jpg

Comment 1

[dennis]

Am assuming you are the author of that page. Most likely this is due to faulty js/html. This display bug happends whenever any the items are clicked followed by any below that item. Try adding a nowrap="nowrap" property to the <td> containing those input fields as it looks to me that firefox is trying to wrap text. Second, thats some really awful html code :( You may want to try simplify and use stylesheets. It makes styling more consistent and reduces filesize, especially in this extreme case. I've also noticed that when you re-maximize the page from this forced width and redo the steps to recreate this bug that the buttons on the (right  the gray ones) suddenly become twice as large which gives me a very good reason to believe the html code is bad. Moving your mouse over these very same buttons corrects the graphical bug.

Comment 2

[agb5]

The HTML contains 521 validtions errors according to the W3C validation service @ http://validator.w3.org/
Start by fixing these errors and then see if the problem still exists.

Comment 3

[Ralph Stuermer]

I simplified the code to follow (need no other file or image) the problem is
the same as before. 

http://www.stuermer.li/preisrechner.html

and no problem with IE or Opera!

Comment 4

[agb5]

IMO the problem is that your are giving a TR a style of display='' which causes it to render like a block element instead of a table row.

Theoretically a visible TR should be display='table-row' ?

changing display='' to display='inherit' might be a solution which works everywhere.

Comment 5

[Eli Friedman]

Attachment: Testcase

It's an incremental reflow problem (the table cells should not overlap).

Comment 6

[Eli Friedman]

Bug summary isn't perfect, but good enough for the moment.

Comment 7

[Eli Friedman]

Attachment: More simplified testcase

A little bit less complicated.

Comment 8

[Zibi Braniecki [:zbraniecki][:gandalf]]

it's fixed on reflow branch

Comment 9

[Steve England [:stevee]]

Weirdness observed with:
-  Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.9a1) Gecko/2006120606 Minefield/3.0a
(in testcase, 'TestTestTestTestTestTestTestTestTest' is overwritten with 'ZZZZZZZZZZZZZZZZZZZZ')

No weirdness observed with:
- Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.9a1) Gecko/2006120804 Minefield/3.0a1
(in testcase, 'TestTestTestTestTestTestTestTestTest' is written normally, with 'ZZZZZZZZZZZZZZZZZZZZ' displayed to its right)

-->RESOLVED FIXED 

300030

Comment 10

[Ryan VanderMeulen [:RyanVM]]

Adding in-testsuite? nomination per bz's request in m.d.t.l. Sorry for the bugspam.