Bug 27175 – drop down menu obscured

• Component: Layout and Rendering
• Status: NEW

When you hot mouse over "select a state" the drop down menu appears BEHIND the white bar with the title (please select a state). This obscures the drop down menu to the point you can't actually see the menu to make a selection.

Could this please be rectified? Thanks.

[Mark Rowe (bdash)]

Firefox displays this correctly.

The dropdown has a z-index of 1000 set.  The "Please select a state" box has a z-index of 0 set.

[Mark Rowe (bdash)]

<rdar://problem/7050742>

[Jessie Berlin]

(In reply to comment #2)
> <rdar://problem/7050742>

Placing

'position: relative;'

in the css on the ul that is the dropdown menu (adding it to the rule for div.dropdownmenu ul) makes this work properly.

At least one part of what appears to be happening in Safari is that the ul is positioned statically, so the z-index should not be able to be set on it according to the spec (http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index) since the z-index only applies to positioned elements. Therefore, the value of the z-index as 1200 isn't getting applied to that ul.

However, FF 3.5 seems to be incorrectly applying the z-index regardless of the fact that the position on the element is static (at least according to firebug). That is probably why this works in FF. 

However, I have been unable to come up with a reduction yet that conclusively shows this. There must be some interaction with other attributes going on or something else I am missing.

Changing the platform to all because I am testing this on an Acer running Windows XP and seeing the same behavior for the Hoyts Cinema page.

[Jessie Berlin]

Possibly related mozilla bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=130004

which shows it working correctly in FF in the given reduced state, which is one of the reasons why I am having problems getting a good reduction.

[Daniel Bates]

Created attachment 32618 [details]
Reduction

I came up with the following reduction for this bug. I was able to reproduce without using z-index property.

While working on this reduction, I also stumbled across another layout rendering discrepancy between Safari and Firefox. If you change the line <div class="container"> to <li class="container">, and the corresponding close tag, then Safari renders a extra list item bullet, whereas Firefox does not. It is probably best to file another bug report for this one.