Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    dropdown menu hides behind object

    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
    Code:
    <!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>

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Can you post a link to your live site?
    Teed

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Seems to be working fine for me in FF and IE8. Which version of IE are you seeing an issue in?
    Teed

  • #5
    New Coder
    Join Date
    Jun 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    ahh well that didn't actually load for me in IE8. In FF it did though.
    Teed

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.

  • #8
    New Coder
    Join Date
    Jun 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Lukej,

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

    Am I missing something?

    Code:
    <!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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •