I have some pull down menus.

They work with Safari and Firefox but do not work with Chrome in the opening first page of my website.

Could someone with Chrome help me fix this?

Issue: The menu (particularly the middle tab) goes behind the opening page flash display. I would like to it to be on top just as it works with Safari and Firefox.

I have not made any changes to the website. It is just that Chrome was introduced and this needs to be updated.

My website is www.mafotografix.com

Appreciate the help, thanks!

I have Firefox 8.0 and that drop down menu is also hidden behind your opening flash display for me.

Originally Posted by mafotografix I have some pull down menus. They work with Safari and Firefox but do not work with Chrome in the opening first page of my website. Could someone with Chrome help me fix this? Issue: The menu (particularly the middle tab) goes behind the opening page flash display. I would like to it to be on top just as it works with Safari and Firefox. I have not made any changes to the website. It is just that Chrome was introduced and this needs to be updated. My website is www.mafotografix.com Appreciate the help, thanks!

Switch your menu CSS to this. This version is easier to work with. It should have all your
settings in it. It's the current version in post #1 of this thread.

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

      /* style the outer div to give it width */
.menu {
   z-index: 99;
   position: relative;    /* Make the container moveable */
   margin: 10px auto 25px;  /* top R/L bottom */
   width: 300px;          /* Main bar total width, minimize to not wrap to two lines*/
}

      /* remove all the bullets, borders and padding from the default list styling */
.menu ul {
   padding: 0;
   margin: 0;
   list-style-type: none;
}

      /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {
   float: left;          /* float right will reverse the main buttons */
   text-align: center;
   width: auto; 
   position: relative;
   padding: 0;
}

      /* style the links for the top level */
.menu a, .menu a:visited {
   display: block;
   text-decoration: none;  /* none, overline, underline */
   color: grey;
   background: black;
   font-size: 9pt;
   font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
   width: 80px;         /* Defines the main box dimensions. */
   height: 20px;        /* How tall your cells are */
   line-height: 20px;   /* vertical text alignment in cell */ 
   padding: 0 10px;    /* top/bottom R/L */
   /* min-width: 60px; */   /* set to smallest text and use R/L padding above to space out */
}

      /* main hover */
.menu a:hover, .menu :hover > a {
   color: red;
   background: black;
}

      /* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:80px; w\idth:80px;}

      /* style the table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}



      /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */

      /* another hack for IE5.5 */
* html .menu ul ul {top:20px; t\op:21px;}   /* IE gap between main bar and the dropdown items */


      /* hide the sub levels and give them a position absolute so that they take up no room */
.menu ul ul {
   visibility: hidden;
   position: absolute;
   height: 0;
   top: 20px;       /* move drop vertically */
   left: -5px;         /* move drop horizontally   */
   width: 95px;    /* Size of the daughter cells */
}

      /* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:black;}  /* if 3rd level exists */

      /* style the second level hover */
.menu ul ul a.drop:hover {background:black;}
.menu ul ul :hover > a.drop {background:black;}

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color: grey;
   background: black;
   height: 20px; 
   line-height: 20px; 
   width: 95px;
}

.menu ul ul :hover > a.drop  {background: black;}   /* 2nd if 3rd level exists */

      /* yet another hack for IE5.5 */
* html .menu ul ul a {width:80px; w\idth:80px;}

      /* 2nd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
   color:red;
   background: black;
}



      /* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */

      /* position the third level flyout menu */
.menu ul ul ul {
   left: 115px; 
   top: 0;
   width: 100px;
   height: auto;
}

.menu ul ul ul li a {color: grey;}
.menu ul ul ul li a:hover {color: red;}

      /* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background: black;}  /* not FF */

      /* style the third level hover */
.menu ul ul ul a:hover {background: black;}
.menu ul ul ul :hover > a {background: black;}     /* 3rd (w/o 4th) 4th hover */

      /* style the third level links */
      /* this has caused problems with visited hover on some sites */
      /* Ref: http://www.dgrin.com/showthread.php?p=1703400#post1703400 */
.menu ul ul ul a, .menu ul ul ul a:visited {
   color: grey;              /* hover 2nd > 3rd & 4th */
   background: black;       /* hover 3rd > 4th */
   height: 20px; 
   line-height: 20px; 
   width: 100px;
}
      /* make the 2nd level visible when hover on 1st level */
.menu ul :hover ul {visibility:visible;}
      /* make the 3rd level visible when you hover over 2nd level */
.menu ul :hover ul :hover ul {visibility:visible;}
      /* keep the 3rd level hidden when you hover on 1st level */
.menu ul :hover ul ul {visibility:hidden;}

/* End Navbar Code */

Originally Posted by AceCo55 I have Firefox 8.0 and that drop down menu is also hidden behind your opening flash display for me.

Thank you very much AceCo55 for that feedback. I guess my firefox is an older one.

Thank you again Allen for coming to my rescue

Ok now honestly, after having seen this new code and compared it to what I have now, I'm actually very afraid to try it, lol!

In particular all those px settings! The positioning numbers look very different. It took me quite a long time fussing just to get those first placement settings down, lol!

I wish we could have a ghost site to test these before publishing them. I hate to have my site down, especially with the holidays coming. This might not be a good time to do this. Hmmm .... l gotta plan.

Wishing you happy holidays!

This is my current:

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* Common Styling */
.menu {
position: relative;
right: -10px;
top: 0px;
display: block;
z-index: 99;
padding: 0px 0px 0px 0px; /* spacing around menu - top right bottom left */
height: 55px; /* menu container (div .menu) */
width: 330px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* 0 auto will center navbar width above */
}

.menu ul {
padding: 9px 0px 0px 0px; /* this effects menu centering if too big */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
/* margin: 0 0px 0 0px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1em; /* main buttons */
color: grey; /* main buttons text non-hover, main menu text not moused over*/
text-decoration: none;
text-align: center; /* right align text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
border: 1px solid black; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: black; /* main button color, main backgrd when moused over*/
padding-left: 0px;
padding-right: 0px;
line-height: 20px; /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
width: 104px; width: 104px; /* IE main button */
}

.menu ul li ul {
display: none;}

/* */
/* Specific to Non-IE browsers */
/* */

.menu ul li:hover a {
color: red; /* main when hover DD, main menu text*/
background: black; /* main when hover DD, main menu backgrd*/
opacity: .8;
}


.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: -4px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
right: 10px;
width: 104px; /* unknown */
}


.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display: block;
background: black; /* DD FO non-hover, other backgrd that's not moused over*/
color: white; /* DD FO non-hover, other text that's not moused over*/
height: auto;
line-height: 20px; /* DD FO box height */
padding left: 0px;
padding right: 0px;
width: 100px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: black; /* DD FO hover when hover mouse over text in 2nd level*/
color: red; /* DD FO hover when hover mouse over text in 2nd level*/
}

.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 102px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 146px; /* FF FO box width */
}

/* */
/* Specific to IE browsers */
/* */

.menu ul li a:hover {
/* text-decoration: none; */ /* might be needed */
color: red; /* main hover, when mouse over main text menu*/
background: #000000; /* main hover, when mouse over main menu backgrd */
}

.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 5px; /* DD container up down */
background: black; /* gets rid of DD container */
margin-top: 9px; /* DD container up down */
left: -85px; /* DD right left */
}

.menu ul li a:hover ul li a {
display: block;
background: black; /* IE DD color non-hover */
color: grey; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 100px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: black; /* DD FO hover */
filter: alpha(opacity=70);
color: red; /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 20px; /* FO right left */
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 105px;
width: 139px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
top: 31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:450;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a {
width: 105px; /* unknown */
width: 104px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

Originally Posted by Allen Switch your menu CSS to this. This version is easier to work with. It should have all your settings in it. It's the current version in post #1 of this thread. /* CSS Dropdown Nav Bar */ /* Original code by Stu Nicholls of */ /* http://www.cssplay.co.uk/ */ /* Edited for content, formatting and some elements */ /* Please help support CSSPlay at: */ /* http://www.cssplay.co.uk/support.html */ /* CSS Section */ /* style the outer div to give it width */ .menu { z-index: 99; position: relative; /* Make the container moveable */ margin: 10px auto 25px; /* top R/L bottom */ width: 300px; /* Main bar total width, minimize to not wrap to two lines*/ } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding: 0; margin: 0; list-style-type: none; } /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */ .menu li { float: left; /* float right will reverse the main buttons */ text-align: center; width: auto; position: relative; padding: 0; } /* style the links for the top level */ .menu a, .menu a:visited { display: block; text-decoration: none; /* none, overline, underline */ color: grey; background: black; font-size: 9pt; font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif; width: 80px; /* Defines the main box dimensions. */ height: 20px; /* How tall your cells are */ line-height: 20px; /* vertical text alignment in cell */ padding: 0 10px; /* top/bottom R/L */ /* min-width: 60px; */ /* set to smallest text and use R/L padding above to space out */ } /* main hover */ .menu a:hover, .menu :hover > a { color: red; background: black; } /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited {width:80px; w\idth:80px;} /* style the table so that it takes no part in the layout */ .menu table {position:absolute; top:0; left:0;} /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */ /* another hack for IE5.5 */ * html .menu ul ul {top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */ /* hide the sub levels and give them a position absolute so that they take up no room */ .menu ul ul { visibility: hidden; position: absolute; height: 0; top: 20px; /* move drop vertically */ left: -5px; /* move drop horizontally */ width: 95px; /* Size of the daughter cells */ } /* style the second level background non-hover */ .menu ul ul a.drop, .menu ul ul a.drop:visited {background:black;} /* if 3rd level exists */ /* style the second level hover */ .menu ul ul a.drop:hover {background:black;} .menu ul ul :hover > a.drop {background:black;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { color: grey; background: black; height: 20px; line-height: 20px; width: 95px; } .menu ul ul :hover > a.drop {background: black;} /* 2nd if 3rd level exists */ /* yet another hack for IE5.5 */ * html .menu ul ul a {width:80px; w\idth:80px;} /* 2nd level hover */ .menu ul ul a:hover, .menu ul ul :hover > a { color:red; background: black; } /* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */ /* position the third level flyout menu */ .menu ul ul ul { left: 115px; top: 0; width: 100px; height: auto; } .menu ul ul ul li a {color: grey;} .menu ul ul ul li a:hover {color: red;} /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited {background: black;} /* not FF */ /* style the third level hover */ .menu ul ul ul a:hover {background: black;} .menu ul ul ul :hover > a {background: black;} /* 3rd (w/o 4th) 4th hover */ /* style the third level links */ /* this has caused problems with visited hover on some sites */ /* Ref: http://www.dgrin.com/showthread.php?p=1703400#post1703400 */ .menu ul ul ul a, .menu ul ul ul a:visited { color: grey; /* hover 2nd > 3rd & 4th */ background: black; /* hover 3rd > 4th */ height: 20px; line-height: 20px; width: 100px; } /* make the 2nd level visible when hover on 1st level */ .menu ul :hover ul {visibility:visible;} /* make the 3rd level visible when you hover over 2nd level */ .menu ul :hover ul :hover ul {visibility:visible;} /* keep the 3rd level hidden when you hover on 1st level */ .menu ul :hover ul ul {visibility:hidden;} /* End Navbar Code */

I had a second look at the code.
It looks like you actually did change it for me already. Wow, thanks!
Ok, so I took the plunge and did it.
I replaced the new code.
But I hate to report that it has not changed :( The pulldown menu is still disappearing behind the flash display in the home page.

Originally Posted by mafotografix I had a second look at the code. It looks like you actually did change it for me already. Wow, thanks! Ok, so I took the plunge and did it. I replaced the new code. But I hate to report that it has not changed :( The pulldown menu is still disappearing behind the flash display in the home page.

You have two sets of the menu CSS, remove the old set. Copy it and saved it in notepad. You tried
to disable the old set with comment tags around it but you can not use nested comment tags. You
have to start and stop comments at every comment. See red how it contains another comment, no no.

/* xxxxxx
/* xxxxxx */
xxxxx
*/

The new CSS I posted was already adjusted for you colors, etc.

Hi Allen,

Thanks for customizing the code for me.

Sorry about the nested thing. I live and learn.

I removed the old drop down CSS code.

Unfortunately, it is not working. I wonder, what did I do wrong now? Sorry :(

Mike

p/s: wished we could select different color fonts to help differentiate each component.

Originally Posted by Allen You have two sets of the menu CSS, remove the old set. Copy it and saved it in notepad. You tried to disable the old set with comment tags around it but you can not use nested comment tags. You have to start and stop comments at every comment. See red how it contains another comment, no no. /* xxxxxx /* xxxxxx */ xxxxx */ The new CSS I posted was already adjusted for you colors, etc.

Originally Posted by mafotografix Hi Allen, Thanks for customizing the code for me. Sorry about the nested thing. I live and learn. I removed the old drop down CSS code. Unfortunately, it is not working. I wonder, what did I do wrong now? Sorry :( Mike p/s: wished we could select different color fonts to help differentiate each component.

Works in Firefox but not IE. It's only the movie that doesn't work, other pages do work for both
browsers. Been playing with it and can not find a way to push the movie to the back.

The yellow elements box in WebDev also goes behind using Firefox and I tried all this without success.
Even settings the style in the html but nothing works.

#webdeveloper-element-information {z-index: 999 !important;}

#userBio src,
#userBio embed,
#userBio object,
#bioBox #userBio object,
#userBio,
#bioBox #userBio,
#bioBox {z-index:50 !important;}

<div id="userBio" style="position:relative !important; z-index:50 !important;">
<object width="800" height="400" 
style="position:relative !important; z-index:50 !important;">
<param name="movie" value="http://dl.dropbox.com/u/5906966/mafg_flash_intro_v4.swf" 
style="position:relative !important; z-index:50 !important;">
<embed src="http://dl.dropbox.com/u/5906966/mafg_flash_intro_v4.swf" width="800" height="400" 
style="position:relative !important; z-index:50 !important;">
</object>

Maybe someone else has an idea.

Thanks Allen for trying.

It doesn't work with Chrome, too :(

The other pages have always worked.

It is only the opening home page that could not work properly.

P/S: Interestingly, in Safari, the menu fonts get converted from bold to slim when they hovers over the flash intro.

Originally Posted by Allen Works in Firefox but not IE. It's only the movie that doesn't work, other pages do work for both browsers. Been playing with it and can not find a way to push the movie to the back. The yellow elements box in WebDev also goes behind using Firefox and I tried all this without success. Even settings the style in the html but nothing works. #webdeveloper-element-information {z-index: 999 !important;} #userBio src, #userBio embed, #userBio object, #bioBox #userBio object, #userBio, #bioBox #userBio, #bioBox {z-index:50 !important;} <div id="userBio" style="position:relative !important; z-index:50 !important;"> <object width="800" height="400" style="position:relative !important; z-index:50 !important;"> <param name="movie" value="http://dl.dropbox.com/u/5906966/mafg_flash_intro_v4.swf" style="position:relative !important; z-index:50 !important;"> <embed src="http://dl.dropbox.com/u/5906966/mafg_flash_intro_v4.swf" width="800" height="400" style="position:relative !important; z-index:50 !important;"> </object> Maybe someone else has an idea.