343148 - Page elements jump, flash on mouseover of unrelated link

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[Eric Stoltz]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/418 (KHTML, like Gecko) Safari/417.9.3
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

The link provided is to a test page the duplicates a problem I had in creating a site design. When mousing over any link outside the CSS menu (styled unordered list), the CSS menu reacts wildly, sometimes flashing and sometimes losing its style depeding on the location of the hovered link. Upon mouseout of the link, the menu returns to its stable state. 

Reproducible: Always

Steps to Reproduce:
1. Go to http://www.ericstoltz.com/firefox.html
2. Mouse over one of the textual links in the bottom copy
3. Observe the menu above.

Actual Results:  
Unstable layout; changes on mouseover

Expected Results:  
Stable layout; remains in place when actions are performed on other parts of hte page

The problem exists only in Firefox (Mac); in Firefox Windows the page performs correctly as well as in IE Win 5, Safari, Netscape (7.2 for Mac) and Opera (8.5 for Mac). I observed it in a previous version of Mac Firefox (sorry, don't have the info on that version), so I downloaded the most recent version on June 28 and the problem remains.

Comment 1

[Phil Ringnalda (:philor)]

And you say that works for you in Windows 1.5.0.4? Doesn't for me: the lower link shifts the menu, the upper ones flash it madly.

Comment 2

[philippe (part-time)]

On my OS X trunk Minefield build, the menu displays vertically on load (and covers up the link in the left column). Accessing the link in the right column, or the 'contact' link at the bottom has the menu reflow to horizontal and flickering madly.

I noticed you use -moz-inline-block for the display property of the list-item. I replaced that with 'float:left' and 'magically' (not really), the problem vanished.

I don't think -moz-inline-block should be used in html. Some serious reflow problem going on with that.

Comment 3

[Eric Stoltz]

I tried the float: left on the real page (not the test page) at http://www.ericstoltz.com as you suggested and it works. I thought I had tried that unsuccessfully to get Firefox to get th emenu, but I must be confused after spending half the day testing in various browsers. I used the mozilla taga as an act of final desperation, obviously prematurely. Thanks!

(In reply to comment #2)
> On my OS X trunk Minefield build, the menu displays vertically on load (and
> covers up the link in the left column). Accessing the link in the right column,
> or the 'contact' link at the bottom has the menu reflow to horizontal and
> flickering madly.
> 
> I noticed you use -moz-inline-block for the display property of the list-item.
> I replaced that with 'float:left' and 'magically' (not really), the problem
> vanished.
> 
> I don't think -moz-inline-block should be used in html. Some serious reflow
> problem going on with that.
> 

Comment 4

[Daniel.S]

Ah, then I'll close this bug.

By the way, since Firefox 3, the real bugless inline-block is available.