Javascript / CSS ::: style="height: (any amount)px" when used in concert with a JavaScript function for opening/collapsing <div> element will move the text, but not the element

RESOLVED INCOMPLETE

Status

()

Firefox
General
RESOLVED INCOMPLETE
10 years ago
7 years ago

People

(Reporter: Kenn, Unassigned)

Tracking

({css-moz})

2.0 Branch
x86
Windows XP
css-moz
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [CLOSEME 2010-07-30])

(Reporter)

Description

10 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9

i have a very basic expand/collapse function in JavaScript that works well in IE, but not in Firefox. This issue caught me by surprise and investigated it a bit further. Each one of the <div> elements has a border with a set height and a basic line of text in it. When the element above is expanded ( using the "display" style ), it will move the text from the <div> element below down, but will not move the border with it. If i take the "height" style out, it works flawlessly.
Example :
<div style="height:20px; border-width: 2px; margin:2px">Hello</div>
Repaired:
<div style="border-width: 2px; margin:2px">Hello</div>

I then attempted to nest the <div> tags:
<div style="border-width: 2px; margin:2px">
   <div style="height:20px">Hello</div>
</div>
This did not work. The same flawed result from the previous case occurs again.
Once again, i took the height style out and it worked flawlessly.

Reproducible: Always

Steps to Reproduce:
1.This is the JS:
function collapsable_Box(name, focus, number, close)
 {
  for (i=1 ; i <= number ; ++i)
   {
    if (i != focus) { if (close == 1) { document.getElementById(name+i).style.display = "none"; } }
    else
     {
    if (document.getElementById(name+focus).style.display == "block")
     { document.getElementById(name+focus).style.display = "none"; }
    else
     { document.getElementById(name+focus).style.display = "block"; }
    }
   }
  }
2.have the function called in an onclick event handler to react to the following:
<div id="profile5" style="height:20px; border-width: 2px; margin:2px">
 Hello, this is the collapsible box text.
</div>
<div style="border-width: 2px; margin:2px">I need to keep this border.</div>
3.Then, take out the height style from the first element. It will work.

If you need more of the coding, i will be happy to oblige. 
Actual Results:  
The result's are that it will move the text from the <div> element below down, but will not move the border with it. If i take the "height" style out, it works flawlessly.

Expected Results:  
It should have moved the whole block down, just like it does with the height style turned off. IE does not have this problem, surprisingly. ...really, that did surprise me. I have been battling IE all damned day now to see this happen. A little odd. LoL

I'm not sure what you would need to further investigate this issue. This is the first time i have reported a bug in this fashion, however, if you would like, i can send more information. Please forgive me if i did something wrong on this form.
 Thank you, Kenn.
(Reporter)

Updated

10 years ago
Keywords: css-moz
This bug was originally reported on Firefox 2.x or older, which is no longer supported and will not be receiving any more updates. I strongly suggest that you update to Firefox 3.6.6 or later, update your plugins (flash, adobe, etc.), and retest in a new profile. If you still see the issue with the updated Firefox, please post here. Otherwise, please close as RESOLVED > WORKSFORME
http://www.mozilla.com
http://support.mozilla.com/kb/Managing+profiles
http://support.mozilla.com/kb/Safe+mode
Whiteboard: [CLOSEME 2010-07-30]
Version: unspecified → 2.0 Branch
No reply, INCOMPLETE. Please retest with Firefox 3.6.8 or later and a new profile (http://support.mozilla.com/kb/Managing+profiles). If you continue to see this issue with the newest firefox and a new profile, then please comment on this bug.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.