272131 - Invalid .style.display behavior between 'none' and 'block'

Status: RESOLVED DUPLICATE of bug 97506

(Firefox :: General, defect)

Description

[Jon Rista]

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 have two instances where I use DOM-compliant javascript code to manipulate the
display style of table rows. I have a dynamic menu system on my site which has
several sub-menu sections. Clicking the main menu entry expands the menu down,
displaying previously hidden TR elements. The displaying works fine (except for
a minor problem with I will mention later) when I use javascript to do
.style.display = 'block' on the sub-menu item elements. When you click the main
menu entry again to hide the sub-menu items, the problem occurrs. The sub menu
items dissapear when I do .style.display = 'none', but a small blank section
below the main menu item remains. Its white, rather than the gray of the rest of
the menu, and every time I expand/contract the menu, another chunk of white is
left behind. 

This problem can also be seen when using the edit post feature of the forums
software on the same site. (NOTE: The fourms software is still in development,
and not all the features are completely implemented.) I ran into the same
problem  with hiding TR elements that I did with the menu, and its more serious,
so I'm posting this bug report. To gain access to the post editing tools,
register on the site, visit the forums, and create a new thread. Edit your post,
and click the toolbar buttons for colors, smileys, and fonts. As you click them,
the problem will be quite apparent.) I once agian use DOM-compliant javascript
to manipulate the display style of TR elements. It seem that when I change the
.style.display to 'none', rather than the whole box being treated in accordance
with W3D CSS and DOM specified standards, the space taken up previously by the
TR being hidden is not "cleared", and the TR being displayed is shown below an
empty spot above it. Repetitive clicking on the buttons for colors, smileys, and
 fonts causes more and more empty space to be added above the TR being displayed
(.style.display = 'block').

ALSO NOTE, the menu does not properly display the TR elements that were hidden
in the menu. The menu should have a consistent width of 120 pixels, for all main
menu and sub menu items. The main menu items that you initially click have a 110
pixel wide TD with the menu item text, and a 10 pixel wide TD with the arrow
image. The hidden TR elements have a single TD element that is 120 pixels wide
with a colspan="2".

THE SITE BEHAVES PROPERLY IN IE FOR ALL MENTIONED ISSUES.

Reproducible: Always
Steps to Reproduce:
WHEN USING SITE MENU
1. Click "DatGen" or "Modding" menu item (they have arrows next to them).
2. Click the same menu item again.
3. A white space appears below the menu item you clicked.
4. Repeat, and more white space is added for each expansion/contraction of the
menu item.


WHEN USING FORUM POST EDIT TOOLS
1. Register on the site.
2. Visit the forums.
3. Select a forum (i.e. General Discussion in the General Discussion section).
4. Use the tools at the bottom to create a new thread.
5. Read your thread, and choose edit from the bottons above the post. 
6. Click the colors, smileys, fonts, and font size buttons on the toolbar. 
7. Each time a button is clicked, the previous tool panel to the right
dissapears, but the space it used up stays behind. The next tool panel appears
right below the previous tool panels space.

USE INTERNET EXPLORER TO PREVIEW THE DESIRED RESULTS FOR DEBUGGING COMPARISON.
Actual Results:  
Extra space that should not exist appears after each run through the steps. The
space grows more and more each time the steps are run, until the site becomes
completely unusable and must be reloaded in its entirity.

Expected Results:  
Perform the same steps described in Internet Explorer to see the desired
results. The hidden menu items should display at the same width as the main menu
items, and when hidden, there should be no empty or extra space between the main
menu items.

An example of the HTML used for the menu and the javascript that runs the menu
will be attached after this bug is filed.

Comment 1

[Jon Rista]

Attachment: Sample HTML and Javascript code for the DaGen.info menu.

Comment 2

[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 ***