Re: [css-d] CSS Flyout Menu Fails in IE7

[Al Marvel]

Georg,
Thank you for the quick response, informative answer, and stacking
resolution. I will also look into the font-sizes.
I appreciate your time and effort in providing the coded changes. This was
my first listing, and it has been a very positive experience.

Thanks again,
Al

-Original Message-
From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED] 
Sent: Monday, October 15, 2007 12:47 AM
To: Al Marvel
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] CSS Flyout Menu Fails in IE7


Al Marvel wrote:
> I investigated several search hits throughout the Web discussing
> similar problems with IE, z-index, and menus, but many are dated or 
> don't exactly match this problem. I'm asking for assistance in 
> determining if my design is flawed, or if it definitely cannot work 
> in IE7.

> http://marvelka.com/flyout.html

IE/win (any version) can't re-stack anything from within absolute or
relative positioned containers, and '#sidebar .inner' & '#sidebar .outer'
are absolute positioned. That old IE problem hasn't changed for the last 8-9
years, so earlier notes on it are probably pretty accurate.

Reordering and/or adding elements to source-code will only move the problem
around, and the flyouts on one or the other side will get hidden in IE7.

IE6 (and older) doesn't support :hover on anything but anchors, so it won't
show flyouts on either side without help of a 'whatever:hover.htc'[1] file
or something. IE6 also has its 
'auto-expansion' bug (not respecting given dimensions) that may break 
the line-up.


As with most CSS menus: it definitely doesn't work without a mouse or
similar, in any browser.

It is fine as a demo-case for how to fix such a stacking-problems in IE7
though... <http://www.gunlaug.no/tos/alien/am/test_07_1015.html>
(I have commented necessary style-changes in the page-head.)

I have "un"-positioned the containers - floated them in place, and change
z-index - re-stack the relevant list-item - to 1 level higher than the
surroundings - only on :hover. That lifts the relevant flyout visibly on
top, regardless of side and source-order.


Note: pixels for font-sizes and line-heights don't work well other than to
potentially break your page under certain conditions in certain browsers,
and the one you have problems with is one of them.

regards
Georg

[1]http://www.xs4all.nl/~peterned/csshover.html
-- 
http://www.gunlaug.no

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS Flyout Menu Fails in IE7

[Al Marvel]

Hi All,
 
Hopefully, I posted this properly. I'm requesting assistance with a menu
flyout problem which works fine in Mozilla, but not with IE7. 
 
Menus are displayed on a sidebar of the web page. When hovering over the
menu choice, a block of sub-menus appears to the left or right depending on
which side is hovered over. However, in IE7 the left side's flyout is
hidden, while Mozilla displays it properly. I'm using a z-index to position
the flyout submenu layer, and have tried many variations without success in
IE7. I'm new to CSS, JS, and PHP which are the languages I'm using to build
the site. The SideBar menus are created dynamically in PHP, and included in
each page on the site.
 
I investigated several search hits throughout the Web discussing similar
problems with IE, z-index, and menus, but many are dated or don't exactly
match this problem. I'm asking for assistance in determining if my design is
flawed, or if it definitely cannot work in IE7. I'd like to keep this as a
CSS solution, and will redesign the layout if the latter is true. I presume
the z-index is the culprit, but I'm not sure if reordering or adding
elements might also work.
 
I've developed a sample replica of the problem which displays the Sidebar on
a blank page. The CSS is embedded. The page can be seen at
http://marvelka.com/flyout.html  
 
Thanks in advance. I appreciate any assistance provided.
 
 
 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/