Javascript changes to CSS class "display" property causes layout corruption

RESOLVED DUPLICATE of bug 122316

Status

()

Firefox
General
--
major
RESOLVED DUPLICATE of bug 122316
12 years ago
12 years ago

People

(Reporter: Matthew Balman, Unassigned)

Tracking

1.5.0.x Branch
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

12 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051107 Firefox/1.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051107 Firefox/1.5

The following web page should demonstrate the problem.
<html>
<head>
<style>
.msg {
background-color: #E6E6E6;
}
</style>
<script language="Javascript">
var theRules = new Array();
if (document.styleSheets[0].cssRules)
theRules = document.styleSheets[0].cssRules
else if (document.styleSheets[0].rules)
theRules = document.styleSheets[0].rules

function act(ind) {
rule = theRules[ind];
if(rule.style.display == 'none') {
rule.style.display = 'inline';
}
else {
rule.style.display = 'none';
}
}
</script>
</head>

<body>
<table height="100%" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="top">
    <td colspan="2"><br>
<form name="frm" action="">
     <input name="b0" type="button" id="b0" value="Click to Hide/Show" onClick="act(0)">
    </form><br>
    <table width="100%" border="0" style="page-break-after:always">
     <tr class="smallheader">
<td width="20">#</td>
<td>Step</td>
   </tr>
<tr class="msg">
<td width="20">1.</td>
<td> text and more text, doesn't wrap very nicely</td>
   </tr>

<tr class="smallbody">
<td width="20">2.</td>
<td> text and more text, doesn't wrap very nicely</td>
   </tr>
<tr class="smallbody">
<td width="20">3.</td>
<td> text and more text, doesn't wrap very nicely</td>
   </tr>

<tr class="msg">
<td width="20">4.</td>
<td> text and more text, doesn't wrap very nicely</td>
   </tr>
<tr class="msg">
<td width="20">5.</td>
<td> text and more text, doesn't wrap very nicely</td>
   </tr>

<tr class="smallbody">
<td width="20">6.</td>
<td> text and more text, doesn't wrap very nicely</td>
   </tr>
<tr class="msg">
<td width="20">7.</td>
<td> text and more text, doesn't wrap very nicely</td>
   </tr>
</table>
</body>
</html>


Reproducible: Always

Steps to Reproduce:
1. Click "Click to 'Hide/Show'"
2. Click it again
3.

Actual Results:  
Layout corruption, i.e. sometimes the table rows overlap, always the table row comes back the entire row being the width of the first cell of the non-class rows.

Expected Results:  
It should hide and show with no change in visual appearance.

Also for Firefox v1.07
(Reporter)

Updated

12 years ago
Version: unspecified → 1.5 Branch

Comment 1

12 years ago
Created attachment 203303 [details]
testcase

Comment 2

12 years ago
Created attachment 203305 [details]
modified testcase that works

setting display back to 'table-row' seems to work

Comment 3

12 years ago
Based on testcases, resolving as duplicate.  The workaround is to switch between
display = '' and display = 'none' which works in both IE and Firefox.

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