Closed
Bug 294411
Opened 19 years ago
Closed 19 years ago
Changing a table row's style.visibility and style.display in Javascript messes up the table
Categories
(Firefox :: General, defect)
Tracking
()
People
(Reporter: eruby, Unassigned)
Details
(Keywords: testcase)
Attachments
(1 file)
5.79 KB,
text/html
|
Details |
User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.7) Gecko/20050414 Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.7) Gecko/20050414 Using Javascript to toggle the visibility of a table row causes the row to redisplay within the row's first element, as if the entire row was jammed into the first <td></td> element. I created some demo code to demonstrate the bug and I ran it through the w3c.org's HTML validator to make sure that I wasn't leaving a tag off somewhere. w3c.org said the code was valid. The DOM Inspector shows the document's nodes as I would expect them, but the display of the table is messed up. This code fails in Mozilla (1.4 and 1.7.7 on Linux and 1.6 on Windows) and Firefox 1.0.3 on Linux. It works just fine on Internet Explorer 6.0.2800.1106. Here's some sample code that shows the bug: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Mozilla/Firefox DOM/Display Bug</title> <meta http-equiv="Content-Type" content="text/html;"></meta> <script language="javascript" type="text/javascript" src="adhoc_test_files/nav.js"></script> <script language="javascript" type="text/javascript"> var objBlock = null; function toggleBlock(blockName) { objBlock = document.getElementById(blockName); if (objBlock.style.visibility == 'hidden') { objBlock.style.visibility = 'visible'; objBlock.style.display = 'block'; } else { objBlock.style.visibility = 'hidden'; objBlock.style.display = 'none'; } } </script> <style type="text/css"> .report h1 { text-align: center; } .report h2 { text-align: center; } .report th { background: #0066cc; font-family: Verdana, Arial, Helvetica, sans-serif; color: white; font-size: xx-small; } .Impact_16_th { font-family: impact; font-size: 16pt; color: #0066cc } .Verdana_12_th_bold { color: #0066cc; font-family: verdana, arial, sans-serif; font-size: 12pt; font-weight: bold; } .report td { background: white; font-family: Verdana, Arial, Helvetica, sans-serif; color: black; font-size: xx-small; } </style> </head> <body style="background-color: rgb(255, 255, 255);"> <h2 class="report">Mozilla/Firefox DOM/Display Bug Demo</h2> <p><a href="javascript:toggleBlock('block1')" target="_self">Click here to toggle the first table's first row</a></p> <table border="0" cellpadding="0" cellspacing="0" align="center" class="report"> <tr> <td> <table border="0" cellpadding="2" cellspacing="1" align="center" class="report"> <thead> <tr> <th>IB Region</th> <th>Orig Carrier</th> <th>Total Calls</th> <th>Completed Calls</th> <th>Raw Minutes</th> <th>ASR%</th> <th>Adj ASR%</th> <th>Avg Duration<br />(minutes)</th> </tr> </thead> <tbody> <tr id="block1"> <td>BORONIA</td> <td>Aislecom</td> <td align="right">13,152</td> <td align="right">2,549</td> <td align="right">3,035.6</td> <td align="right"> 19.4%</td> <td align="right"> 19.4%</td> <td align="right">1.2</td> </tr> <tr> <td> </td> <td>BanglaTel</td> <td align="right">3,142</td> <td align="right">657</td> <td align="right">5,143.5</td> <td align="right"> 20.9%</td> <td align="right"> 20.9%</td> <td align="right">7.8</td> </tr> <tr> <td> </td> <td>Advanced Telecom</td> <td align="right">727</td> <td align="right">237</td> <td align="right">1,404.5</td> <td align="right"> 32.6%</td> <td align="right"> 32.6%</td> <td align="right">5.9</td> </tr> </tbody> </table> </td> </tr> </table> <p><a href="javascript:toggleBlock('block2')" target="_self">Click here to toggle the second table</a></p> <table border="0" cellpadding="0" cellspacing="0" align="center" class="report" id="block2"> <tr> <td> <table border="0" cellpadding="2" cellspacing="1" align="center" class="report"> <thead> <tr> <th>IB Region</th> <th>Orig Carrier</th> <th>Total Calls</th> <th>Completed Calls</th> <th>Raw Minutes</th> <th>ASR%</th> <th>Adj ASR%</th> <th>Avg Duration<br />(minutes)</th> </tr> </thead> <tbody> <tr> <td>BORONIA</td> <td>Aislecom</td> <td align="right">13,152</td> <td align="right">2,549</td> <td align="right">3,035.6</td> <td align="right"> 19.4%</td> <td align="right"> 19.4%</td> <td align="right">1.2</td> </tr> <tr> <td> </td> <td>BanglaTel</td> <td align="right">3,142</td> <td align="right">657</td> <td align="right">5,143.5</td> <td align="right"> 20.9%</td> <td align="right"> 20.9%</td> <td align="right">7.8</td> </tr> <tr> <td> </td> <td>Advanced Telecom</td> <td align="right">727</td> <td align="right">237</td> <td align="right">1,404.5</td> <td align="right"> 32.6%</td> <td align="right"> 32.6%</td> <td align="right">5.9</td> </tr> </tbody> </table> </td> </tr> </table> <p>This page is valid according to <a href="http://validator.w3.org/">http://validator.w3.org</a>.</p> <p>The first row of the table's body has an ID of "block1". Clicking the first link toggles block1's visibility and display attributes using Javascript, making the first row of the table disappear and reappear. This works fine under IE, but under Mozilla and Firefox the row reappears inside the first detail element.</p> <p>The second table has an ID of "block2". Clicking the second link toggles block2's visibility and display attributes using Javascript, making the table disappear and reappear. This works under IE, Mozilla, and Firefox, although Mozilla and Firefox re-display the table on the left, when it should be centered.</p> <p>This was tested on Mozilla 1.4, Mozilla 1.7.7, Firefox 1.0.3, and Internet Explorer 6.0.2800.1106</p> </body> </html> Reproducible: Always Steps to Reproduce: Cut and paste the code I included into a file and load it into Mozilla. Actual Results: The browser doesn't display what the document contains (or what the DOM Inspector shows). Expected Results: The table's first row should disappear and reappear.
Comment 1•19 years ago
|
||
Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b2) Gecko/20050516 Firefox/1.0+ If I change your testcase to only toggle visibility, then it works as I would expect.
Comment 2•19 years ago
|
||
WFM Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4 WFM Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8b2) Gecko/20050516 Firefox/1.0+ ID:2005051623
Keywords: testcase
Comment 3•19 years ago
|
||
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 ***
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•