Closed Bug 175686 Opened 21 years ago Closed 21 years ago

{ib}Setting display = 'none' results in unexpected behavior on a div that contains a form


(Core :: Layout: Block and Inline, defect, P4)

Windows XP





(Reporter: bugzilla, Unassigned)




(Keywords: testcase)

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: Browser-General → DOM Style
->component owners
Assignee: asa → jst
QA Contact: asa → ian
Here's the problem:
Initially, DIV is defaults as a block element, which basically means
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

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.
Assignee: jst → block-and-inline
Component: DOM Style → Layout: Block & Inline
Summary: Setting display = 'none' results in unexpected behavior on a div that contains a form → {ib}Setting display = 'none' results in unexpected behavior on a div that contains a form
Actually it's not well defined at all, but you are right, it is definitely valid.
confirming bug 
Ever confirmed: true
Priority: -- → P4
Keywords: testcase
This got fixed by the checkin for bug 171830, as far as I can tell.
Closed: 21 years ago
Depends on: 171830
Resolution: --- → FIXED
Appears to work fine using Win FF 1.5 to set the div.display to block or inline. Marking VERIFIED.
You need to log in before you can comment on or make changes to this bug.