z-index issue?

[rebelbwb]

here is the url – magnets-on-sale.com

need assistance in figuring out how to get that drop down menu to sit on top of that flash container right below it. right now it shows underneath it when mouseover on main menu

below are the links to the two stylesheets working on this page

main.css – styles elements minus the nav

Code:

@charset “utf-8”;
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
position:relative;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}

body {
line-height: 1;
color: black;
background: #fff;
}

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

#wrapper {
width: 960px;
position:relative;
margin: 0 auto;
}

#contact {
height: 41px;
margin-bottom:10px;
margin-top: 5px;
}

img.contact {
float: right;
margin-top: 5px;
}

#scroller {
padding-top: 10px;
}

#header {
background: url(images/header-background.gif) repeat-x;
background-position:top left;
height: 288px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}

img.logo {
position: absolute;
top: 50px;

}

img.display {
position: absolute;
top: 42px;
right: 0px;
}

#tag-line {
background:url(images/bot-header.gif) no-repeat;
height: 45px;
width: 958px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
padding-bottom: 5px;
}

#maincontent {
background: #FFFFFF;
color: #000000;
padding: 15px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}

#maincontent p {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height: 1.5em;
text-align: justify;
}

#maincontent a{
color: #000;
text-decoration:none;
border-bottom: 1px dotted #000;
}

#maincontent a:hover{
color: #000;
background: #B7B7B7;
text-decoration: none;
}

#maincontent h1{
font-family:Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight:bold;
margin-bottom: 25px;
color: #083bb0;
}

#maincontent h2{
font-family:Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight:bold;
margin: 25px 0;
color: #083bb0;
}

#maincontent h3{
font-family:Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight:bold;
margin: 60px 0 15px 0;
color: #083bb0;
}

#gallery {
background: #FFFFFF;
color: #000000;
padding: 15px 0px 10px 15px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}

#gallery p{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height: 1.5em;
text-align: justify;
}

#gallery h2{
font-family:Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight:bold;
margin-bottom: 25px;
color: #083bb0;
}

#gallery h1{
font-family:Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight:bold;
margin: 25px 0 10px 0;
color: #083bb0;
}

img.percentages {
float: right;
margin: 60px 0 0 10px;
}

#footer {
background:#ba1c1d;
height: 325px;
width: 960px;
border-top: 6px solid #961818;
margin-right: auto;
margin-left: auto;
}

/* – – – ADxMenu: BASIC styles [ MANDATORY ] – – – */

/* remove all list stylings */
.menu, .menu ul {
margin: 0;
padding: 0;
list-style-type: none;
display: block;
}

.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left; /* move all main list items into one row, by floating them */
position: relative; /* position each LI, thus creating potential IE.win overlap problem */
z-index: 5; /* thus we need to apply explicit z-index here… */
}

.menu li:hover {
z-index: 2; /* …and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu li li {
float: none;/* items of the nested menus are kept on separate lines */
}

.menu ul {
visibility: hidden; /* initially hide all submenus. */
position: absolute;
z-index: 10;
left: 0; /* while hidden, always keep them at the top left corner, */
top: 0; /* to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
visibility: visible; /* display submenu them on hover */
top: 100%; /* 1st level go below their parent item */
}

.menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */
top: 0;
left: 100%;
}

/* — float.clear —
force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
content: “.”;
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu, .menu ul { /* IE7 float clear: */
min-height: 0;
}
/* — float.clear.END — */

/* — sticky.submenu —
it should not disappear when your mouse moves a bit outside the submenu
YOU SHOULD NOT STYLE the background of the “.menu UL” or this feature may not work properly!
if you do it, make sure you 110% know what you do */
.menu ul {
background-image: url(empty.gif); /* required for sticky to work in IE6 and IE7 – due to their (different) hover bugs */
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
/*background: #f00;*/ /* uncomment this if you want to see the “safe” area.
you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;

}
/* — sticky.submenu.END — */

/* – – – ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] – – – */

.menu, .menu ul li {
color: #fff;
background: url(images/nav-background.gif) repeat-x;
font-family: arial,trebuchet ms;
font-size: 90%;
font-weight: bold;
padding-left: 15px;

}

.menu ul {
width: 14.5em;

}

.menu a {
text-decoration: none;
color: #fff;
padding: 1.2em 1.2em;
display: block;
position: relative;

}

.menu a:hover, .menu li:hover>a {
color: #fff;
background:url(images/nav-hover.gif) repeat-x;
}

.menu li li { /* create borders around each item */
background: #1b297e;
font-family: arial,trebuchet ms;
font-size: 100%;
padding-left: 0px;

}

.menu ul>li + li { /* and remove the top border on all but first item in the list */
border-top: 0;

}

.menu li li a:hover{ /* create borders around each item */
background: #ba1c1d;

}

.menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */
top: 5px;
left: 90%;

}

/* special colouring for “Main menu:”, and for “xx submenu” items in ADxMenu
placed here to clarify the terminology I use when referencing submenus in posts */
.menu>li:first-child>a {
color: #fff;
}

/* – – – ADxMenu: IE6 BASIC styles [MANDATORY] – – – */

/*
this rules improves accessibility – if Javascript is disabled, the entire menu will be visible
of course, that means that it might require different styling then.
in which case you can use adxie class – see: aplus.co.yu/adxmenu/examples/ie6-double-style/
*/
.menu ul {
visibility: visible;
position: static;
}

.menu, .menu ul { /* float.clear */
zoom: 1;
}

.menu li.adxmhover {
z-index: 10000;
}

.menu .adxmhoverUL { /* li:hover>ul selector */
visibility: visible;
}

.menu .adxmhoverUL { /* 1st-level submenu go below their parent item */
top: 100%;
left: 0;
}

.menu .adxmhoverUL .adxmhoverUL { /* 2nd+ levels go on the right side of the parent item */
top: 0;
left: 100%;
}

/* – – – ADxMenu: DESIGN styles – – – */

.menu ul a { /* fix clickability-area problem */
zoom: 1;
}

.menu li li { /* fix white gap problem */
float: left;
width: 100%;
}

.menu li li { /* prevent double-line between items */
margin-top: -1px;
}

.menu a:hover, .menu .adxmhoverA { /* li:hover>a selector */
background: #ba1c1d;
}

.menu .adxmhoverUL .adxmhoverUL { /* inset 2nd+ submenus, to show off overlapping */
top: 5px;
left: 90%;
}

/* Fix for IE5/Mac *//*/
.menu a {
float: left;
}
/* End Fix */

/*]]>*/

ul.items{
font-family: arial, trebuchet ms,sans-serif;
font-size: 14px;
list-style-type: disc;
list-style-position:inside;
line-height: 1.5em;
margin: 15px 30px;

}

span.highlight{
color: #FF0000;
}

img.options{
float: left;
margin: 0 10px 10px 0;
}

#options {
height: 160px;
}

#size-desc {
height: 40px;
}

#sizes {
height: 280px;
}

#measurements {
width:930px;
}

img.inline {
float: right;
margin: 5px 0 5px 10px;
}

img.quote {
float: right;
margin: 5px 20px 5px 10px;
}

img.inline-bot {
float: right;
margin: 20px 0 10px 5px;
}

#domticker{
width: 940px;
height: 25px;
background-color: #ba1c1d;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
font-style:italic;
color: #ffffff;
text-align: center;
text-transform:uppercase;
}

em{
color: #000000;
font-weight: bold;
}

#domticker div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
background-color: #ba1c1d;
}

#domticker a{
font-weight: bold;
color: #ffffff;
text-decoration: none;
}

#domticker a:hover{
color: #000000;
font-weight: bold;
}

#domticker2{
width: 940px;
height: 37px;
padding: 3px;
}

#domticker2 a{
text-decoration: none;
}

.someclass{ //class to apply to your scroller(s) if desired
}

#footer-logo {
position: absolute;
bottom: 10px;
left: 370px;
}

#footer-content{
text-align:center;
width: 930px;
padding: 20px 20px 10px 10px;
}

#footer-content p{
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 1.5em;
}

#footer-content a{
text-decoration: underline;
color: #000000;
}

#footer-content a:hover{
text-decoration: none;
color: #000000;
}

#pricing-info {
clear:both;
}

#containing-box{
margin-top: 30px;
text-align: center;
}

#content-box {
width:930px;
}

img.front {
margin:10px 0 5px 10px;
float: right;
}

#flash-container {
width: 935px;
height: 335px;
margin-bottom:15px;
z-index: 9998;
}

#mssHolder {
z-index: 9998;
}

chrometheme/chromestyle.css – controls/styles the nav

Code:

.chromestyle{
width: 960px;
height: 60px;
background: url(../images/chromebg.gif) repeat-x;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
width: 960px;
height: 60px;
padding: 21px 4px;
margin: 0;
text-align: center; /*set value to “left”, “center”, or “right”*/
}

.chromestyle ul li{
display: inline;

}

.chromestyle ul li a{
color: #ffffff;
padding: 21px 13px;
margin: 0;
text-decoration: none;
font-weight: bold;
font-family: arial,verdana, sans-serif;
font-size: 14px;

}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of “selected” to the current active menu item*/
text-decoration: underline;
color: #fff;/*THEME CHANGE HERE*/

}

#chromemenu ul .contact a {
background-image: none;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border-bottom-width: 0;
line-height:18px;
z-index:9999;
background-color: #1c2a7f;
width: 230px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}

.dropmenudiv a{
width: auto;
display: block;
padding: 10px 15px;
margin: 0;
text-decoration: none;
font-weight: bold;
font-family: arial,verdana, sans-serif;
font-size: 14px;
color: #ffffff;
z-index:9999;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
text-decoration: underline;
background: #132072;
z-index:9999;
}

Thanks

[rebelbwb]

just realized w/o doing much browser checking that the issue seems to be in FF 2 & 3 as of right now. IE 6 & 7 show it working properly. so i guess the issue is narrowed down somewhat

[Jonz]

Ok I can’t really look at the code now and I did this at work a while ago but I can’t find the test files when I was experimenting with it.

What you gotta do though is make the flash windowmode transparent, easiest way is in flash when you publish it.
You then gotta put it in a div and make it.. I think -1 z-index. then in the css for the drop downs set it as 2 for zindex.

Again I will look for the file and have a look at the code and get you something when I get home.
But there’s a start…

Catch you soon

[tcindie]

add a parameter when you load the flashfile on the page setting wmode to either opaque or transparent.. opaque is easier on the processor, so I favor that personally.

Other than that, just remember that z-index only works on absolute & relatively positioned elements. :)

I’m working on a site currently that uses a transparent png as a frame that sits over the top of a flash slideshow, and a dropdown menu with transparent pngs that drop down over the top of both the flash & png frame.

[tcindie]

"daGUY" wrote:

Sounds like an absolute nightmare to get that to work in IE6 :lol:

Actually, the only thing I’m struggling with at the moment is that the dropdowns aren’t working at all in IE, but I haven’t put much work into it yet either.. the overlays and such are working just fine..

Most likely I’ll end up with some custom code that only runs for IE browsers. *shrug* no big whoop. ;)

[Author]

Posts