Hi
this seems due the IE z-index bug
see
http://verens.com/archives/2005/07/15/ie-z-index-bug/
olivier
jon randahl wrote:
First, let me say thank you to Joel for making the new CSS for
Superfish so easy to configure now! All those comments make such the
difference!
and Second, here's my dilema:
We have a site, first thing that loads is a lovely flash movie which
resides in the main container below the horizontal navigation which
has a single dropdown from one choice. Once the movie has played the
user is presented with a static page with an additional nav on the
side (totally seperate from hNav) and a static hero shot image all
below the horzontal nav at the top. The user can navigate through the
site using the main horizontal nav at any point, either during the
flash movie or after. It all works fine, exactly as planned, in
Firefox; unfortunately the dropdown menu shows partially underneath
the main container if viewed in IE (both 6 7).
Having trolled through the differing posts about the above topics, I
have tried everything I can to get this to work!
Alas, I have failed.
I am begging anyone to please lend a hand and see where I have gone
wrong!
I am pasting the css I'm using, please feel free to comment,
postulate, or slam it all.
Thanks in advance!
Jon
codepre
/--/
the style calls held in the template:
link rel=stylesheet type=text/css href=/_assets/css/main.css
media=screen /
link rel=stylesheet type=text/css href=/_assets/css/
thickbox.css media=screen /
link rel=stylesheet type=text/css href=/_assets/css/
supafish.css media=screen /
/--/
Structural CSS pertaining to elements concerned:
#header {
position: absolute;
top: 0;
left: 5px;
width: 850px;
height: 56px;
margin: 0; padding: 0;
}
#content {
position: absolute;
top: 56px;
left: 275px;
width: 580px;
height: 580px;
margin: 0; padding: 0;
}
#hdrNav {
position: absolute;
top: 0;
right: 0;
width: 490px;
height: 56px;
z-index: 1;
}
#hdrNav li {
display: inline;
position: relative;
z-index: 1;
}
#hdrNav li a.toplevel {
display: block;
float: left;
width: auto;
height: 56px;
line-height: 56px;
margin: 0; padding: 0;
}
#hdrNav li img {
display: block;
float: left;
width: 7px;
height: 56px;
margin: 0; padding: 0;
}
#hdrNav li a#n1-home { width: 63px; background: #fff url('/_assets/img/
navigation/home.gif') 0 0 no-repeat; }
#hdrNav li a#n1-avby { width: 90px; background: #fff url('/_assets/img/
navigation/availability.gif') 0 0 no-repeat; }
#hdrNav li a#n1-lctn { width: 76px; background: #fff url('/_assets/img/
navigation/location.gif') 0 0 no-repeat; }
#hdrNav li a#n1-amts { width: 121px; background: #fff url('/_assets/
img/navigation/amenities.gif') 0 0 no-repeat; }
#hdrNav li a#n1-news { width: 62px; background: #fff url('/_assets/img/
navigation/news.gif') 0 0 no-repeat; }
#hdrNav li a#n1-cntc { width: 70px; background: #fff url('/_assets/img/
navigation/contacts.gif') 0 0 no-repeat; }
#hdrNav li a#n1-avby ul#n1-abvy-sub { position: relative; z-index:
99; }
#hdrNav li a:hover#n1-home,
#hdrNav li a:hover#n1-avby,
#hdrNav li a:hover#n1-lctn,
#hdrNav li a:hover#n1-amts,
#hdrNav li a:hover#n1-news,
#hdrNav li a:hover#n1-cntc { background-color: #eef3f7; }
/--/
Supafish CSS: (with changes made)
/* This file is commented in great detail for educational purposes.
There is also
* an uncommented version for use production use here:
* http://users.tpg.com.au/j_birch/plugins/superfish/superfish.css
*/
/ ESSENTIAL STYLES ***/
/* This first group of styles are most important for the function of
Superfish.
* The more cosmetic styling rules are grouped together below under
the heading
* ORIGINAL SKIN.
*
* Note that this CSS file will create the kind of menu demonstrated
on the main
* page of the Superfish documentation, ie. top tier of nav is
horizontal, with
* subsequent tiers vertical.
*/
/* remove any default styles */
.nav, .nav * {
margin:0;
padding:0;
list-style:none;
}
/* top ul.nav element */
.nav {
z-index:99;
line-height:1.0; /* makes calculating the 'top' value for first
submenu easier */
}
/* nested submenu ul elements */
.nav ul {
position:absolute; /* remove from flow and allow positioning */
top:-999em; /* hide submenu in screen-reader and search-engine
friendly way */
width:88px; /* VARIABLE. Must have a width for menu items to inherit.
Use ems so font scaling does not break design*/
