212344 - hidden div does not display in correct width when style is set to visibility: visible and display: inline

Status: RESOLVED DUPLICATE of bug 50626

(Core :: DOM: CSS Object Model, defect)

Description

[Carsten Klein]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4) Gecko/20030529
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4) Gecko/20030529

The hidden div in den aforementioned page, when navigating to
http://www.bg.bib.de/~bbsh2akl/bib/int/ does not show up correctly (just hover
your mouse over either one of the two available links from the menu on the
bottom of the page -> [css], or [xml]).

besides the obvious (M$ proprietary usage of removeNode() - simply ignore that,
it will be fixed soon), the div, when set to diplay:inline, visibility:visible,
does not calculate its width correctly, causing the contained text nodes and
anchors to exceed the div's display width.



Reproducible: Always

Steps to Reproduce:
1. 
2.
3.

Actual Results:  
incorrect display of a once former hidden div.

Expected Results:  
correct display of the div incl. its width.

Comment 1

[Carsten Klein]

Well, the html is not well-formed either, i have used some proprietary attributes.

But, the bug still remains, even when it is well-formed. I have noticed this one
before and thought that it was removed since then, but it wasn't.

DIV or other HTML Elements which are set to display: none at the time of loading
of the page, will not be rendered correctly, even when being set to display:
inline or block, whilst being positioned absolute or relative.

Comment 2

[Carsten Klein]

Hm, I've found another bug, that is being exposed by this, uhm, senseless site =)

When opening (making visible that is) one of the menus from the [int] page,
either [xml] or [css], and mouseover-ing about one of the two menu items, then
moving downward, leaving the context of the div, it will not be hidden,
seemingly the notification mechanisms, or the traversal of the event upwards the
dom does not work correctly (if you get what i mean).

The menu will not be hidden, as a result, although onmouseout it should be.
Seemingly Mozilla does not get it, when there is not enough space between the
inner div (that what defines the menuitem) and the outer div (what defines the
menu itself).

besides, there is more, when visiting the [welcome] from the starting page.
[menu] will give you more hints on what _has_ to be fixed =)
or tell me, that the container div does not have to adjust its block elements
(itself being inline) to render themselves as block elements, as such being of
100% width of the container element?

hope this helps...

Comment 3

[Mats Palmgren (inactive)]

div.menuVisible {visibility:visible;display:inline;position:absolute;}

You can't have an abs. pos. inline, the computed display value will be 'block':
http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

The block is 240px as you've specified in the style attribute.
The menu text is within <NOBR> so we can't line break it, thus it will overflow
since it does not fit within that width.


-> INVALID

Comment 4

[Carsten Klein]

Well, then IE is working incorrectly (*sigh* again), thank for your time...

I will close this one...

Comment 5

[Carsten Klein]

last comment:

changed width style attribute from 240px to auto and it works !

Hope this works with IE also. Thanks for the valuable information!

Comment 6

[Carsten Klein]

opening up again,

after setting the correct style attribute information, i discovered that the
event (mouseout) does not traverse the dom (at last, it seems like it does not).

When moving the mouse out of the (now visible) div, leaving it to the bottom of
the div, the div will not hide. 

It seems, that the mouseout event does not bubble to the containing div, as it
should be, or am I wrong?

Comment 7

[Carsten Klein]

this applies to only the [css] menu, not to the [xml] menu, wonder why?

perhaps it is something with my javascript code, but since it does work on the
[xml] menu it should work on the [css] menu, too. 

i will look into this right now...and post a summary when finished...

Comment 8

[Carsten Klein]

hm, the code seems pretty standard to me, no magic (and hopefully no errors) there.

so it should work on the above mentioned menu as well, but does not.

I noticed that when leaving the menu and re-entering it, then leaving it again,
with a light spin to the right or left, it will close as desired, but otherwise
will not, *strange*.

I surely don't want you to look deep into the code of mine, but if this _is_ a
bug, please look deeply into it, since I cannot find the reason for this
erroneous behaviour at all.

Comment 9

[Boris Zbarsky [:bzbarsky]]

Please file a separate bug with a clear description on the separate issue, ok? 
This bug already contains far too much text that is completely irrelevant to the
problem at hand....

Please cc me on the new bug you file.

Comment 10

[Mats Palmgren (inactive)]

If you do file a new bug, it would be appreciated if you could narrow down the
problem for us.  Here's what you can do to help: make a copy of the HTML file,
then add all CSS and JS code inline in the <head> section, then narrow down
this standalone testcase by removing markup/style/script code that isn't
needed to show the problem until you get a minimal testcase.  While you do this,
verify that it still works in IE every now and then, backtrack if necessary.
Then open a new bug report.  Thanks in advance.

Comment 11

[:Gavin Sharp [email: [e-mail]]]

*** This bug has been marked as a duplicate of 50626 ***