Sent by Ingo Chao on 19 April 2006 09:09
Tim Spangler wrote:
> ... When the page is resized and the horizontal menu items stack, the submenus
> display behind the top level menu items, not above them. This only occurs
> with Internet Explorer, not Firefox (1.5.0.2) or Opera (8.54).
> ... I did some major trolling of the css-d public archives and found quite a few
> references to this, and the problem appears to reside within the * postion:
> relative; * property on the <ul> element. However, postion: relative; is
> require to make the page display properly. I've been dumping z-indexes on
> almost every property trying to fix this, as well as moving around the
> postion: relative; to no avail.
> http://biocycle.atmos.colostate.edu/newtemplate/TestSite/ieSampleProblem.htm
> http://biocycle.atmos.colostate.edu/newtemplate/TestSite/SS/ieproblem.css
The current version of your page shows the problem in every browser.
- Remove these two lines
..links ul li {
float: left;
/* position: relative; */
/* z-index: 1; */
}
- add
..links li:hover, li.over {
position: relative;
z-index: 1
};
- remove every other z-index instance from your style sheet. [1]
The problem is that position:relative (p.r.) establishes the containing
block for the absolutely positioned (a.p.) submenu ul's.
The containing block is responsible for the offset origin of the a.p.
blocks inside, and together with z-index, for the stacking context all
the children are living in.
On your page, each list entry, from "Home" to "Item7", performs its own
stacking context, meaning that the li coming later in the source paint
over preceding li's. No content inside such a staking context can escape
from this, no matter what value of z-index you are throwing in, because
this z-index has the base stacking level of its stacking context li.
The reason for moving this p.r. and z-index to the hover state is that
it is only needed on hover, while the a.p. submenus are popping into
view. So this would be the only z-indexed menu entry, "higher" than the
rest of the menu.
Hope that helps.
Ingo
[1] I did not test this extensively on your page. A panic guide should
start with removing all these "panic z-indexes". You may have seen
z-index values of 1000 or higher on some places; most would have been
useful if they had 1.000 or more complete menus in any source order on
their page.
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
