Jump to content

Help with Internet Explorer submenus dispalying over menus

JStefan

By JStefan
in CSS Help

 Share

Recommended Posts

JStefan Newbie

JStefan

Posted
Posted

Hi all,

I hope somebody has the time or experience to help me with this, thank you in advance for all input or comments.

I am developing a php/mysql website where the menu is php generated using records from a database. The menu is output as inline list elements inside a containing dvd. Using no-wrap css tag the menus will start a new line when they cant expand anymore to the right. Thats all good. The "drama" starts with the submenus . Lets say you have 2 rows of top menus. When you hover over a top row menu with submenus the submenus will display over the second row of top menus in firefox, chrome etc but not in good old Internet Explorer (including version 9 on Win 7). The submenus will display under the second row of top menus rendering my menu useless...

To see it in action please visit http://focusdesign.biz/everlife/ and hover over Testing Menu 1

I played with z-index-es and also I tried to give inferior z-indexes to all containing elements.

The containing elements are wrapper/navbar/menu(id)/menu(class)/ul/li Not sure how I ended with 2 divs nested both with id menu so I deleted one of them and my design changed so i created a class menu and give one class menu instead of id that why a have menu id nesting menu class. Also I created a menu class identical with id in the css file.

The css at the moment is as follows. Thank you for any help, suggestions.....

 

/*main styling #########################################################*/

a:link{

  text-decoration:none;

  color:#6699CC;

}

 

a:hover{

  text-decoration:none;

  color:#FF9900;

}

 

a:visited{

  text-decoration:none;

  color: #666699;

}

 

*{

  list-style-type:none;

  margin:0;

  padding:0;

}

 

* li{

  margin-bottom:15px;

}

 

* li.txt{

  border-top:thin dashed;

}

 

body{

  font-family:Arial,Helvetica,sans-serif;

  color:#000000;

  font-size:14px;

  background-color:#6699CC;

}

 

#wrapper{

  width:960px;

  margin:0 auto;

}

 

#navbartop{

margin:0px 5px 1px 5px;

padding:4px;

background-color:#66F;

background-repeat:no-repeat;

text-align:right;

color:#000;

background-image:url(../images/bgftS.jpg);

font-size:14px;

background-repeat:repeat-x;

}

 

#navbar{

  background-color:#FFF;

  height:auto;

  background-image:none;

  background-repeat:no-repeat;

  text-align:left;

  padding:5px;

  margin-top:0px;

  margin-right:5px;

  margin-bottom:0px;

  margin-left:5px;

}

 

#navbar1{

  background-color:#FFF;

  height:auto;

  background-image:none;

  background-repeat:no-repeat;

  text-align:center;

  padding:5px;

  margin-top:0px;

  margin-right:5px;

  margin-bottom:0px;

  margin-left:5px;

}

 

#nav{

  padding:0;

  height:2.2em;

  margin-top:15px;

  overflow:visible;

  height:120px;

}

 

#nav li{

  list-style-type:none;

  display:inline;

  line-height:20px;

}

 

#nav li a{

  text-decoration:none;

  color:#333360;

  border-bottom:0;

  padding:5px 10px;

  font-size:1.1em;

  font-weight:bold;

}

 

#header{

  margin-left:5px;

  margin-right:5px;

  height:auto;

  padding:5px;

  background-color:#FFF;

  background-image: url(../images/bgftMain.jpg);

  background-repeat:no-repeat;

  z-index:1;

  position:relative;

}

 

#maintext{

font-size:15px;

border:1px solid #ccc;

margin:0px 5px 5px 5px;

padding:4px;

background-color: #ffffff;

clear:both;

 

}

 

#showcase{

  border:1px solid #ccc;

  margin:auto;

  text-align:center;

  background-color:#eeeeee;

  width:930px;

}

 

.slideshow{

  width:750px;

  height:260px;

  float:left;

  text-align:center;

  background-color:#eeeeee;

}

 

.slideshow img{

  background-color:#eee;

}

 

#maintext h2{

  color:#6699CC;

}

 

#maintext p{

  color:#000000;

  text-align:justify;

  padding-top:10px;

  padding-left:5px;

  padding-bottom:10px;

  padding-right:11px;

}

 

#bottom{

  border:1px solid #ccc;

  margin:0px 5px 5px 5px;

  padding:4px;

  background-color:#eeeeee;

  text-align:right;

  font-size:10px;

}

 

#search{

  float:left;

  height:17px;

  padding:14px 0 0 9px;

  vertical-align:top;

  width:400px;

  text-indent:25px;

  background-image:url(../images/searchField.png);

  background-position:left 0;

  background-repeat:no-repeat;

  background-color:transparent;

  border-bottom: thin #CCCCCC;

  border-top:thin #CCCCCC;

  border-left:thin #CCCCCC;

  border-right:none;

}

 

#livesearch{

  position:absolute;

  left:440px;

  top:48px;

}

 

#email{

  border-top:none;

  border-left:none;

  border-right:none;

  border-bottom:none;

  background-color:#CCCCCC;

  height:20px;

  padding-left:5px;

  padding-top:3px;

}

 

.poster{

  font-size:30px;

}

 

.posterSmall{

  font-size:18px;

}

 

* li#brandLinks{

  width:120px;

}

/*pagination #########################################################*/

div.pagination{

  padding:3px;

  margin:3px;

}

 

div.pagination a{

  padding:2px 5px 2px 5px;

  margin:2px;

  border:1px solid #AAAADD;

  text-decoration:none;

  color:#000099;

}

 

div.pagination a:hover,div.pagination a:active{

  border:1px solid #000099;

  color:#000;

}

 

div.pagination span.current{

  padding:2px 5px 2px 5px;

  margin:2px;

  border:1px solid #000099;

  font-weight:bold;

  background-color:#000099;

  color:#FFF;

}

 

div.pagination span.disabled{

  padding:2px 5px 2px 5px;

  margin:2px;

  border:1px solid #EEE;

  color:#DDD;

}

 

/*menu #########################################################*/

UL{

  BORDER-BOTTOM:0px;

  BORDER-LEFT:0px;

  PADDING-BOTTOM:0px;

  MARGIN:0px;

  PADDING-LEFT:0px;

  PADDING-RIGHT:0px;

  VERTICAL-ALIGN:baseline;

  BORDER-TOP:0px;

  BORDER-RIGHT:0px;

  PADDING-TOP:0px;

}

 

LI{

  BORDER-BOTTOM:0px;

  BORDER-LEFT:0px;

  PADDING-BOTTOM:0px;

  MARGIN:0px;

  PADDING-LEFT:0px;

  PADDING-RIGHT:0px;

  VERTICAL-ALIGN:baseline;

  BORDER-TOP:0px;

  BORDER-RIGHT:0px;

  PADDING-TOP:0px;

}

 

.menu{

WIDTH:940px;

BACKGROUND:#FFF;

FONT-SIZE:15px;

color:#6699CC;

z-index: 100;

}

#menu{

WIDTH:940px;

BACKGROUND:#FFF;

FONT-SIZE:15px;

color:#6699CC;

z-index: 100;

}

 

#menu UL{

  LIST-STYLE-TYPE:none;

  MARGIN:0px;

  LIST-STYLE-IMAGE:none;

  color:##6699CC;

 

}

 

#menu LI{

  POSITION:relative;

  FLOAT:left;

  background-image:url(../images/bgft.jpg);

  height:32px;

 

}

 

#menu A{

  PADDING-BOTTOM:0px;

  LINE-HEIGHT:31px;

  PADDING-LEFT:10px;

  PADDING-RIGHT:10px;

  DISPLAY:block;

  color:##6699CC;

  BORDER-RIGHT:#666699 1px solid;

  TEXT-DECORATION:none;

  PADDING-TOP:0px;

}

 

#inline A{

  color:#FF6600;

  display:inline;

  padding:0px 10px;

  text-decoration:none;

  border-right:none;

  line-height:0px;

}

 

#menu UL UL{

  Z-INDEX:99999;

  POSITION:absolute;

  WIDTH:180px;

  DISPLAY:none;

  FLOAT:left;

  TOP:31px;

  LEFT:0px;

}

 

#menu UL UL LI{

  MIN-WIDTH:180px;

  Z-INDEX:99999;

}

 

#menu UL UL UL{

  TOP:0px;

  LEFT:100%;

  Z-INDEX:99999;

}

 

#menu UL UL A{

  PADDING-BOTTOM:10px;

  LINE-HEIGHT:1em;

  PADDING-LEFT:10px;

  WIDTH:160px;

  PADDING-RIGHT:10px;

  BACKGROUND:#ccc;

  HEIGHT:auto;

  PADDING-TOP:10px;

  Z-INDEX:99999;

}

 

#menu LI:hover > A{

  BACKGROUND:#ccc;

  color:#FF6600;

  Z-INDEX:99999;

}

 

#menu UL UL:hover > A{

  BACKGROUND:#ccc;

  color:#FF6600;

  Z-INDEX:99999;

}

 

#menu UL LI:hover > UL{

  DISPLAY:block;

  Z-INDEX:99999;

}

 

.clear{

  CLEAR:both;

}

/*categories first page #########################################################*/

 

.smallFont{

  font-size: 1em;

}

.cats {

  float: right;

  width: 910px;

  margin-bottom: 15px;

}

 

 

.cats li {

 

  display: inline;

  width: 170px;

  margin-right: 10px;

  float: left;

background-color: #EEE;

  min-height: 40px;

}

 

.cats li.last {

  margin-right: 0;

}

.smallFont{

  font-size: 1em;

}

.cats {

  float: right;

  width: 910px;

  margin-bottom: 15px;

}

 

 

 

.cats li {

 

  display: inline;

  width: 170px;

  margin-right: 10px;

  float: left;

  /*padding: 3px; */

 

  background-color: #EEE;

  min-height: 40px;

}

 

.cats li.last {

  margin-right: 0;

}

 

/*.cats li a {

  color: #286196;

}*?

/*product page styling #########################################################*/

.products {

  float: right;

  width: 940px;

    margin-bottom: 3px;

  /*border-bottom: dashed thin #777777;*/

}

.products li {

  display: inline;

  width: 170px;

  margin-right: 15px;

float: left;

 

}

 

 

 

.products li.last{

  margin-right: 0px;

  background-color: #ccffff;

  padding: 5px 5px 5px 5px;

  /*height: 240px;*/

}

 

.products li.last a {

color: #FF9900;

}

 

.shop {

  float: right;

  width: 940px;

  margin-bottom: 5px;

  border-bottom: dashed thin #777777;

}

.shop li {

  display: inline;

  width: 120px;

    margin-right: 15px;

 

  float: left;

}

 

 

 

.shop li.last{

  margin-right: 0px;

  background-color: #DDDDDD;

  padding: 5px 5px 5px 5px;

  /*height: 240px;*/

}

 

.shop li.last a {

color: #FF9900;

}

 

cssfreakie Regular Member

cssfreakie

Posted
Posted

yes some suggestions:

if you post code place it in code tags

besides that have a look at the (son of) suckerfish menu. certainly if you were to sell your stuff, which i think you do. That's probably the only menu that has proven itself. And besides that no need to invent the wheel again on that part.

here is a link to the original article on it: http://www.htmldog.com/articles/suckerfish/dropdowns/

 

by the way the menu you have doesn't work well either in FF 5.0

 

cssfreakie Regular Member

cssfreakie

Posted
Posted

yes you are right......does not work here either in firefox when I view the page from the server but works ok when I view the page on my home computer server.......I give up on this....

don't give up, try out the method behind the suckerfish menu. I am using it for years without any troubles. works cross browser  even for the very old ones.

Just a tip if you try it out, do it in a sterile environment so you know exactly what is going on without any other style interfering.

cssfreakie Regular Member

cssfreakie

Posted
Posted

hmmmm....I think I fix it by adding a higher z index to the submenu  li style tag element directly from php output......

well yeah that was the cause of all this. Keep in mind though IE 7 needs a little more attention as far as z-indexes. You need to add also a z-index on on the <li> where the submenu sits in, other wise it won't work in IE7

<li> <!---- on this one -->
    <ul>
        <li>

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.