dropdown menu hides behind object

escostar75

07-11-2011, 11:12 AM

Hi guys, I wonder if any one can help me here.

I have some drop down menus which are done using CSS and have a website embedded in one of my pages.

The problem I have is that the dropdown menus seem to hover behind the object and not in front of it. This problem is in IE only.

Any help of guidance is appreciated.

Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>testpage</title>

<style type="text/css">
p.first{color:Black;font-size:14px;font-family:verdana;}
p.second{color:Black;font-size:12px;font-family:verdana;}

#menu {width:800px;
height:36px;
text-align:left;
background-color:grey;
position:relative;
left:10%;
}

#navMenu {
width:100%;
margin: 0 100px auto;;
padding:0;
}

#navMenu ul {
margin:0;
padding:0;
line-height:26px;
}
#navMenu li {
margin-top:3px;
padding:0;
list-style:none;
float:left;
position:relative;
}

#navMenu ul li a{
text-align:center;
font: bold 14px/24px verdana;
text-decoration:none;
height:26px;
width:148px;
display:block;
color:white;
border: 1px solid transparent;
}

#navMenu ul ul {
position:absolute;
visibility:hidden;
}

#navMenu ul li:hover ul {
visibility:visible;
background:#EAEBD8;
}

#navMenu li:hover{
background:#3F6A8D;
}

#navMenu ul li:hover a{
border:1px solid lightgrey;
color:white;
}

#navMenu ul li:hover ul a{color:black;
text-align:left;}

#navMenu ul li:hover ul a:hover {
background:#3F6A8D;
color:white;
}

#page {
border:1px solid lightgrey;
width:1000px;
margin:0 auto;
padding:5px;
text-align:left;

}

#header {
border:1px solid transparent;
border-bottom:1px solid black;
width:798px;
height:80px;
background-color:lightgrey;
position:relative;
left:10%;
}

#content {
border:2px solid black;
width:998px;
min-height:500px;
_height:500px;
z-index:-1;
}
</style>

</head>

<body>


<div id="page">


<div id="header"></div>


<div id="menu">
<div id="navMenu">

<ul>
<li><a href="#" >111</a></li>

<li><a href="#" >222</a>
<ul>
<li><a href="#" >AAA</a></li>
<li><a href="#" >BBB</a></li>
</ul>
</li>

<li><a href="#" >333</a>
<ul>
<li><a href="#" >CCC</a></li>
<li><a href="#" >DDD</a></li>
<li><a href="#" >EEE</a></li>
</ul>

</li>

<li><a href="#" >444</a></li>
</ul>

</div>

</div>





<div id="content">

<object type="text/html"
data="http://www.google.co.uk/webhp?sourceid=navclient&hl=en-GB&ie=UTF-8" width="990" height="700";>
</object>

</object>


</div>


</div>

</body>
</html>

teedoff

07-11-2011, 04:22 PM

Can you post a link to your live site?

escostar75

07-11-2011, 04:33 PM

Apologies for being a nuisance but my site isn’t actually up on a server anywhere at the moment its only on my own desktop.

I’ve supplied all the code and if you add it to a html editor and run it you’ll see what I mean.

It seems to only happen in IE.

Thanks in advance.

teedoff

07-11-2011, 04:57 PM

Seems to be working fine for me in FF and IE8. Which version of IE are you seeing an issue in?

escostar75

07-12-2011, 08:15 AM

I'm using IE8 but it doesnt work for me in IE8.

Did it work for you once the website in the embedded object loaded?

teedoff

07-12-2011, 01:22 PM

ahh well that didn't actually load for me in IE8. In FF it did though.

lukej

07-12-2011, 04:55 PM

I've encountered this problem often. One thing you can do is assign the dropdown menu you want to appear in front a higher z-index value than the objects you want to appear behind it. For example, your menu could be z-index: 999 while another element could be z-index: 998. Hope this helps.

escostar75

07-13-2011, 09:06 AM

Lukej,

please see my code below, I tried this z-index method but it didnt work.

Am I missing something?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>testpage</title>

<style type="text/css">
p.first{color:Black;font-size:14px;font-family:verdana;}
p.second{color:Black;font-size:12px;font-family:verdana;}

#menu {width:800px;
height:36px;
text-align:left;
background-color:grey;
position:relative;
left:10%;
}

#navMenu {
width:100%;
margin: 0 100px auto;;
padding:0;
z-index:999;
}

#navMenu ul {
margin:0;
padding:0;
line-height:26px;
}
#navMenu li {
margin-top:3px;
padding:0;
list-style:none;
float:left;
position:relative;
}

#navMenu ul li a{
text-align:center;
font: bold 14px/24px verdana;
text-decoration:none;
height:26px;
width:148px;
display:block;
color:white;
border: 1px solid transparent;
}

#navMenu ul ul {
position:absolute;
visibility:hidden;
z-index:981:
}

#navMenu ul li:hover ul {
visibility:visible;
background:#EAEBD8;
z-index:988:
}

#navMenu li:hover{
background:#3F6A8D;
}

#navMenu ul li:hover a{
border:1px solid lightgrey;
color:white;
}

#navMenu ul li:hover ul a{color:black;
text-align:left;}

#navMenu ul li:hover ul a:hover {
background:#3F6A8D;
color:white;
}

#page {
border:1px solid lightgrey;
width:1000px;
margin:0 auto;
padding:5px;
text-align:left;

}

#header {
border:1px solid transparent;
border-bottom:1px solid black;
width:798px;
height:80px;
background-color:lightgrey;
position:relative;
left:10%;
}

#content {
border:2px solid black;
width:998px;
min-height:500px;
_height:500px;
z-index:1;
}
</style>

</head>

<body>


<div id="page">


<div id="header"></div>


<div id="menu">
<div id="navMenu">

<ul>
<li><a href="#" >111</a></li>

<li><a href="#" >222</a>
<ul>
<li><a href="#" >AAA</a></li>
<li><a href="#" >BBB</a></li>
</ul>
</li>

<li><a href="#" >333</a>
<ul>
<li><a href="#" >CCC</a></li>
<li><a href="#" >DDD</a></li>
<li><a href="#" >EEE</a></li>
</ul>

</li>

<li><a href="#" >444</a></li>
</ul>

</div>

</div>





<div id="content">

<object type="text/html"
data="http://www.google.co.uk/webhp?sourceid=navclient&hl=en-GB&ie=UTF-8" width="990" height="700";>
<param name="wmode" value="opaque"></param>

<p><a href="http://www.google.co.uk/webhp?sourceid=navclient&hl=en-GB&ie=UTF-8" >Floorplans Map</a></p>
</object>

</object>


</div>


</div>

</body>
</html>