Changing a table row's style.visibility and style.display in Javascript messes up the table

RESOLVED DUPLICATE of bug 97506

Status

()

Firefox
General
RESOLVED DUPLICATE of bug 97506
13 years ago
13 years ago

People

(Reporter: Earl Ruby, Unassigned)

Tracking

({testcase})

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

13 years ago
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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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

13 years ago
Created attachment 183798 [details]
Toggle visibility only

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.
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

13 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
Last Resolved: 13 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.