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




10 years ago
7 years ago


(Reporter: Kenn, Unassigned)



2.0 Branch
Windows XP

Firefox Tracking Flags

(Not tracked)


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



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

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>
<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>
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"; } }
    if (document.getElementById(name+focus).style.display == "block")
     { document.getElementById(name+focus).style.display = "none"; }
     { 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 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.


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
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 ( If you continue to see this issue with the newest firefox and a new profile, then please comment on this bug.
Last Resolved: 7 years ago
Resolution: --- → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.