The Ferrett wrote:
> I'm working on a table-free layout with jQuery-based drop-down megamenus
> (which have a hover-based trigger that displays a panel). The menus are
> ULs, though to make it fit underneath the logo they're contained in a DIV
> set to a "display: inline" (since otherwise, it doesn't validate).
>
> Though the page now validates, it's running into two problems in separate
> browsers.
>
> http://www.starcitygames.com/SCG_6/test.html
Hello Ferrett. That is one busy page.
>
> In FIREFOX, the menu displays fine, but displays another line just below it
> - a narrow strip the height and background color of the menu that drops
> everything else down. I'm not sure why this is happening.
Me neither, I can't see any difference (I don't see a line).
> In IE, if you hover your mouse over the "Buying Cards" link and see the
> (horrifically styled) drop-down panel, you'll note that the author in the
> text underneath the panel ("The Ferrett") bleeds through into the actual
> panel, even though the z-index on the panel is set to 10,000. This could be
> a JavaScript issue, but I think it's CSS-related.
You have given IE7 z-index:0. This causes the "ferret" text to be
stacked higher than the list items [1] see example 10. So delete the
z-index and then IE7 will treat it as *auto*.
.author_bio {
position: relative;
z-index: 0; /* DELETE */
}
Now you must add a z-index to the list item since in IE7,
position:relative establishes a new stacking context. The behavior that
you want is [1] example 6.
ul#menu li {
display: inline;
margin: 0.1em .5em;
position: relative;
background: none;
z-index: 1; /* ADD */
}
You may want to hide this nonsense from non IE7- browsers. Like this.
* html .author_bio { z-index: auto; /* for IE6 */ }
*+html .author_bio { z-index: auto; /* for IE7 */ }
* html ul#menu li { z-index: 1; /* for IE6 */ }
*+html ul#menu li { z-index: 1; /* for IE7 */ }
1. <http://css-class.com/test/css/visformatting/layers/z-index.htm>
BTW, If you move div#header in the source to below div#main-body then
the layering (by the flow) will work without resorting to z-index. Give
div#main-body a margin-top and absolutely position the div#header.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
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/
