display property handling in js

RESOLVED DUPLICATE of bug 9458

Status

RESOLVED DUPLICATE of bug 9458
13 years ago
3 years ago

People

(Reporter: compufly, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

13 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

If I manually define 
style="display:inline-block;"
style="display:none;"
style="display:inline;"
style="display:block;"
in my html code (in a table or tr or td)
the render is ok.

If I try to use javascript to dynamically change the property :

 else if(ns6) { // Netscape 6 (mozilla)
   var divns6 = document.getElementsByTagName('tr');
   divns6[nObjet].style.display =
    (divns6[nObjet].style.display=='inline-block'?'none':'inline-block');

it doesn't work.
I can use block or inline, but inline-block isn't valid in your js console.
More, if I manually define style="display:inline-block;"
Then I try to prompt the value in display, I get an empty string or undefined.

Reproducible: Always

Steps to Reproduce:
1.Create an html page with a table and some tr td elements
2.put a style="display:inline-block;" in an element
3.Try to une js to dynamically change the display property

Actual Results:  
Nothing : Console error

Expected Results:  
I want the display to give the same render if I manually set the display property to inline-block than if I set it using js

Here's complete test code working fine in IE and supposed to work in FireFox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" language="javascript">
<!--
var ns4=document.layers;
var ie4=document.all;
var ns6=document.getElementById&&!document.all;

function Collapse(nObjet) {
 if(ie4) { // Internet explorer
   eval(nObjet).style.display = 
    (eval(nObjet).style.display=='inline-block'?'none':'inline-block');
 }
 else if(ns4) { // Netscape 4.x
   document.eval(nObjet).display = 
    (document.eval(nObjet).display=='inline-block'?'none':'inline-block');
	}
 else if(ns6) { // Netscape 6 (mozilla)
   var divns6 = document.getElementsByTagName('tr');
prompt(divns6[nObjet].style.display);
   divns6[nObjet].style.display =
    (divns6[nObjet].style.display=='inline-block'?'none':'inline-block');
 }
}
// -->
</script>
<title>Test</title>
</head>
<body>
<a href="javascript:void(0);" onClick="Collapse('tt');">TEST</A>
<table border="1" style="table-layout:fixed;">
<tr style="display:inline-block;" id="tt">
<td width="100">
<input type="text" maxlenght="1" size="1">
</td>
<td width="100">
test
</td>
<td  width="100">
test
</td>
</tr>
<tr>
<td  width="100">
test
</td>
<td  width="100">
test
</td>
<td  width="100">
test
</td>
</tr>
</table>
</body>
</html>

*** This bug has been marked as a duplicate of 9458 ***
Status: UNCONFIRMED → RESOLVED
Last Resolved: 13 years ago
Resolution: --- → DUPLICATE
(Assignee)

Updated

11 years ago
Product: Firefox → Toolkit
Product: Toolkit → Toolkit Graveyard
You need to log in before you can comment on or make changes to this bug.