Using Mozilla 1.2b (20021020): Setting the display style of a div to "none" via JavaScript will result in unexpected behavior if the div contains a form. Technically, the style does get set to "none", but there is no visual indication of this (i.e., the div does not disappear). In addition, the div's style properties will be ignored when it gets displayed again. There's a demonstration of this bug at the URL above, which will probably do a much better job of describing it than I have.

->DOM Style

->component owners

Here's the problem: Initially, DIV is defaults as a block element, which basically means "display:block;" Then, when you click the button, it's set to "display:none;", which works just fine. Then, when you click the button again, it's set to "display:inline;". Note that inline-elements cannot contain block elements, e.g., the form-element. My guess would be that when you change the style of the the div-element to inline, the DOM automatically tries to fix things by pulling the form element out of the div-element and from there on, things break. jst: Maybe you could provide us with some insights what actually happens in the DOM under these circumstances? If you change the JS you use to toggle between block and none, everything works just fine.

CSS display properties do not affect the DOM. Having a block inside an inline is perfectly valid in CSS, with well-defined rendering. The only issue I see on this testcase is that when the div's display is set to "none" the second and following times the content below it does not move up (as it should). Other than that, the layout is exactly correct.

Actually it's not well defined at all, but you are right, it is definitely valid.

confirming bug

This got fixed by the checkin for bug 171830, as far as I can tell.

Appears to work fine using Win FF 1.5 to set the div.display to block or inline. Marking VERIFIED.