Hans Börjesson said:
Ok here is a validated document then. Still the same problem. Maybe you are
right this is a javascript problem but it does not have to be. I would say
that it could also be an html problem for example if nested <div> tags is
not feasible (now you say it is feasible so I guess you are right that it is
not a html problem but I was too stupid to realise this) or it can be a
rendering problem in the browser (IE and Opera does not behave in the same
way as for example Netscape in this case). Well I will give it a try in
javascript newsgroup but I guess they will forward me to yet another
newsgroup...
<snip code>
If you have a quick look at section 11.2 of the CSS2 specs:
http://www.w3.org/TR/REC-CSS2/visufx.html#visibility
you will see that the default value for the visibility property is inherit.
That is, inherit the visibility property value of the parent element.
When you first open this page div1 _inherits_ visible from the body element
(which BTW has inherited this from the html element). div 2 also _inherits_
visible.
When you click toggle div 1 the visibility property of div1 gets set to
hidden. Since the visibility property of div2 is still inherit then div2
disappears as well, since it inherits hiddenness.
When you click toggle div 1 again, the reverse happens, with the exception
that the value for div1 is now visible. Div2 inherits this and magically
reappears.
Now, click toggle div2. Sure enough div2 disappears. Click toggle div2
again. Now, the visibility property has a value of visible, not inherit.
Div2 reappears.
Now, click toggle div1. Div1 is now hidden, it disappears. What about div2
though. It no longer inherits this value, its visibility property has the
value visible, just like you told it to. Div2 remains visible.
That wasn't too hard after all now, was it.
Although the spec is somewhat unclear on this I think is quite in order to
have visible elements nested inside invisible elements. The spec actually
does say the visiblity property specifies whether the boxes *generated by an
element* are rendered. It does not say anything about boxes generated by
child elements, I think they should behave independently.
IMHO the browsers where this 'problem' of yours does not appear are, in
fact, the ones that are broken.
I doubt that you will get any joy over at clj as this is a CSS issue, not a
javascript one. That is why I answered here rather than over there.
If you want these divs to behave the way I think you do then change
mydiv.style.visibility = "visible";
to
mydiv.style.visibility = "inherit";
Cheers
Richard.