Help with Internet Explorer submenus dispalying over menus

JStefan · August 9, 2011

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 · August 9, 2011

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

JStefan · August 9, 2011

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....

cssfreakie · August 9, 2011

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.

JStefan · August 9, 2011

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

cssfreakie · August 9, 2011

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>

Sign In

Help with Internet Explorer submenus dispalying over menus

Recommended Posts

JStefan

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

JStefan

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

JStefan

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information