Re: [css-d] dynamic menus and z-index? (formerly More SOS) (Ingo Chao)
Ingo Chao wrote:
[EMAIL PROTECTED] wrote:
http://spppa.littleberrystudio.com
For FirefoxCo,
#nav li ul {z-index:1}
should solve the problem of text+borders peeking through in flyouts of
preceding elements.
Since the problem is that the position:relative is establishing a new
stacking context, which will paint over preceding ones:
- #nav li { position:relative;}
you could try to set this to position:static.
Set it to position:relative only on hover/over.
Haven't tried it, though. Maybe if my site should ever need a
three-leveled flyout menu with negative indent.
Ingo
O.. You're good! Thank you very much. That fixed it beautifully,
both the z-index and the position:static with position:relative on
hover.
I haven't had a chance to read through the posts in a bit but I'm so
glad I finally did.
Perhaps I designed myself into a corner to use such deep flyouts, but it
was the best compromise to the issues at hand (and the client picked
this design). I'm trying to make them as painless as possible. :)
Thanks to everyone who offered help! Thanks to Ingo for such an elegant
solution!
-Patricia
http://www.littleberrystudio.com
__
css-discuss [EMAIL PROTECTED]
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/
Re: [css-d] dynamic menus and z-index? (formerly More SOS)
Ingo Chao wrote:
[EMAIL PROTECTED] wrote:
http://spppa.littleberrystudio.com
For FirefoxCo,
#nav li ul {z-index:1}
should solve the problem of text+borders peeking through in flyouts of
preceding elements.
For IE, I don't have a solution, since IE establishes a new stacking
context for each relatively positioned element, meaning that
NewsEvents sits over any ul that is part of Alumni.
http://www.satzansatz.de/cssd/escher.html
Giving z-indexes to all these relatively positioned li from bottom to
top seems to be not a bright idea in multi-level flyouts.
Others who regularly use flyout menus should have a solution.
Ingo
Hi Paticia,
Viewing the page in 1024x786 resolution: 2 steps upscaling the font-size
in IE causes the dropping down of the nav-sidebar.
I think this has to be solved before finetuning the menu/submenus, as it
can influence all positions.
See testpage with solutions.
Also adapted the hidden gems (seen with Ctrl-A in the browser): for FF
the #header-h1, for IE the #navigation-h2; see source code of testpage.
***Hmm, provider troubles, - I cannot upload at the moment, the
testpage has to wait. I'll try again tonight.
While I'm in a hurry now, I'm sorry not to have other contributions for
the menu-problems.
Perhaps you can find some hints in the source code of the example The
Keyboardfish
http://home.tiscali.nl/developerscorner/css-discuss/the_Keybordfish.htm.
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
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/
Re: [css-d] dynamic menus and z-index? (formerly More SOS)
Ingo Chao wrote:
[EMAIL PROTECTED] wrote:
http://spppa.littleberrystudio.com
For FirefoxCo,
#nav li ul {z-index:1}
should solve the problem of text+borders peeking through in flyouts of
preceding elements.
For IE, I don't have a solution, since IE establishes a new stacking
context for each relatively positioned element, meaning that
NewsEvents sits over any ul that is part of Alumni.
http://www.satzansatz.de/cssd/escher.html
...
Others who regularly use flyout menus should have a solution.
Looks like I have to learn it for myself.
Since the problem is that the position:relative is establishing a new
stacking context, which will paint over preceding ones:
- #nav li { position:relative;}
you could try to set this to position:static.
Set it to position:relative only on hover/over.
Haven't tried it, though. Maybe if my site should ever need a
three-leveled flyout menu with negative indent.
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
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/
Re: [css-d] dynamic menus and z-index? (formerly More SOS)
francky wrote: [...] Hi Paticia, Viewing the page in 1024x786 resolution: 2 steps upscaling the font-size in IE causes the dropping down of the nav-sidebar. I think this has to be solved before finetuning the menu/submenus, as it can influence all positions. See testpage with solutions. Also adapted the hidden gems (seen with Ctrl-A in the browser): for FF the #header-h1, for IE the #navigation-h2; see source code of testpage. ***Hmm, provider troubles, - I cannot upload at the moment, the testpage has to wait. I'll try again tonight. [...] ... phone call learned the ftp-server is down, can be tomorrow or the day after before it is repaired... But apart from my own site I've admittance to another, without ftp-problems. Here is the testpage http://www.cosbo.nl/tmp/test-spppa-1.htm! (I included Ingo's first addition) Greetings, francky __ css-discuss [EMAIL PROTECTED] 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/
Re: [css-d] dynamic menus and z-index? (formerly More SOS)
[EMAIL PROTECTED] wrote:
http://spppa.littleberrystudio.com
For FirefoxCo,
#nav li ul {z-index:1}
should solve the problem of text+borders peeking through in flyouts of
preceding elements.
For IE, I don't have a solution, since IE establishes a new stacking
context for each relatively positioned element, meaning that
NewsEvents sits over any ul that is part of Alumni.
http://www.satzansatz.de/cssd/escher.html
Giving z-indexes to all these relatively positioned li from bottom to
top seems to be not a bright idea in multi-level flyouts.
Others who regularly use flyout menus should have a solution.
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
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/
[css-d] dynamic menus and z-index? (formerly More SOS)
Hi, I'm new to this group, but not so new to CSS. I'm having a problem with some dynamic menus and need help. I searched the archives and the closed thing I came to the problem I have was the thread More SOS Problems. But I'm getting ahead of myself. :) Basically, I have a vertical menu with fly-out style submenus. The design calls for the hovered menu item to change to a white background with a yellow border. Simple enough. Then I found that the hovering caused unpleasant shifting as the button (list elements) changed from having no border to having a border. Ok, easy enough to fix. I simply added a border the same color as the menu background. Now I noticed that, while the menus themselves appear over the content like they should, they seem to overlap each other. That is, a sub menu will sit over it's own parent menu, but the parent menu's neighbors sit over the sub menu. The menus themselves have enough distance that the text doesn't overlap (but it probably would if font-sizes were increase). However, the aforementioned borders do show up and it is quite distracting. I tried removing the position:relative style for the li elements in the menu and that solved the problem beautifully. Unfortunately, the sub menus no longer know where to go. I was using position:absolute for the sub menus along with position:relative for the parent menus. With no position:relative for the parent menu, the sub menus all end up at the top of the menu. With no position:aboslute (or using position:relative) on the sub menus, the sub menus appear within the parent menu's space and blows everything out. Here is a link that shows where I'm at: http://spppa.littleberrystudio.com I've looked at this problem too long. How do I have properly positioned sub menus without neighboring parent menus peaking through and avoid jumping from the borders? Also, so far I've only checked in FF/Win and IE6/Win. If anyone happens to catch any weirdness in other browsers, I'd be happy to know about it. And if anyone has any suggestions for doing something better, I'd also be very happy to hear them. Thank you! -Patricia Kruep __ css-discuss [EMAIL PROTECTED] 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/
