...

View Full Version : 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>

<!-- This section is where the page begins-->
<div id="page">

<!-- This is where the header begins-->
<div id="header"></div>

<!-- This is where the navigation menu begins-->
<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>
<!-- This is where the navigation menu ends-->

<!-- This is the starter note used to describe the page contents-->


<!-- This main page contents start here-->
<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>


<!-- The content ends here-->
</div>



<!-- The page ends here -->
</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>

<!-- This section is where the page begins-->
<div id="page">

<!-- This is where the header begins-->
<div id="header"></div>

<!-- This is where the navigation menu begins-->
<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>
<!-- This is where the navigation menu ends-->

<!-- This is the starter note used to describe the page contents-->


<!-- This main page contents start here-->
<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>


<!-- The content ends here-->
</div>



<!-- The page ends here -->
</div>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum