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 2 of 2
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS menu in lefthand table cell displaying behind righthand cell

    Hello,

    I have a CSS menu that is in a lefthand table cell that has a fly-out submenu. When the submenu displays it is behind the text that is in the righthand table cell.

    I need to have the submenu display on top. I tried modifying the z-index with no results.

    Here is the code for the page:

    Code:
    <%@ Master Language="C#" MasterPageFile="/masterpages/TestAmericaMaster.master" AutoEventWireup="true" %>
    
    <asp:content ContentPlaceHolderId="PageBody" runat="server">
    <style type="text/css"> 
    .menu2{
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    	width:330px; 
    	height:160px; 
    	position:absolute; 
    	font-size:12px; 
    	margin:0 0; 
    	z-index:10;
    }
    .menu2 ul {
    	padding:0; 
    	margin:0 0 0 -10px; 
    	list-style-type: none; 
    	background:#eee; 
    	width:330px; 
    	height:160px; 
    	border:1px solid #2356B6;
    }
    .menu2 ul li ul {
    	visibility:hidden; 
    	position:absolute; 
    	height:0; 
    	overflow:hidden; 
    	top:0; 
    	left:195px;
    }
    .menu2 ul li {
    	float:left;
    }
    .menu2 ul li a, .menu2 ul li a:visited {
    	display:block; 
    	float:left; 
    	text-decoration:none; 
    	color:#000; 
    	width:200px; 
    	height:auto; 
    	line-height:25px; 
    	font-size:12px; 
    	background:transparent; 
    	padding-left:10px;
    }
    * html .menu2 ul li a, * html .menu2 ul li a:visited {
    	width:100px; 
    	w\idth:90px;}
    
    .menu2 table {
    	border-collapse:collapse; 
    	border:0; 
    	margin:0; 
    	padding:0; 
    	font-size:1em; 
    	position:absolute; 
    	left:0; 
    	top:0;
    }
    
    /* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */
    
    .menu2 ul li:hover a,
    .menu2 ul li a:hover{
    	background:#2356B6; 
    	color:#fff;
    }
    
    .menu2 ul li:hover {position:relative; z-index:90;}
    * html .menu2 ul li a:hover {position:relative; z-index:100;}
    
    .menu2 ul li:hover ul,
    .menu2 ul li a:hover ul {
    	visibility:visible; 
    	position:absolute; 
    	height:auto; 
    	border:1px solid #2356B6; 
    	background:#7a7a7a; 
    	overflow:visible;
    }
    .menu2 ul li:hover ul li a,
    .menu2 ul li a:hover ul li a{
    	display:block; 
    	background:transparent; 
    	color:#fff; 
    	line-height:15px; 
    	padding:5px 0 5px 10px; 
    	height:auto; 
    	text-decoration:underline; 
    	width:auto;
    }
    
    .menu2 ul li:hover ul li:hover a,
    .menu2 ul li a:hover ul li a:hover {
    	background:#2356B6; 
    	color:#fff; 
    	width:100px;
    }
    .menu2 ul li:hover ul li ul,
    .menu2 ul li a:hover ul li a ul {
    	visibility:hidden; 
    	position:absolute; 
    	height:0; 
    	overflow:hidden; 
    	top:0; 
    	left:105px;
    }
    .menu2 ul li:hover ul li:hover ul,
    .menu2 ul li a:hover ul li a:hover ul {
    	visibility:visible; 
    	position:absolute; 
    	height:auto; 
    	color:#000; 
    	padding:0; 
    	border:1px solid #2356B6; 
    	list-style-type:none; 
    	background:#7a7a7a;
    }
    .menu2 ul li:hover ul li:hover ul li a,
    .menu2 ul li a:hover ul li a:hover ul li a {
    	display:block; 
    	background:transparent; 
    	color:#fff;
    }
    
    .menu2 ul li:hover ul li:hover ul li:hover a,
    .menu2 ul li a:hover ul li a:hover ul li a:hover {
    	background:#2356B6; 
    	color:#fff;
    }
    </style>
    
    <div style="padding-bottom: 5px; padding-bottom: 10px;">
    	<h2>SOURCE AIR TESTING</h2>
    	&nbsp; &nbsp;
    	<!--<select style="margin-top: 12px" name="jumpMenu" size="1" id="jumpMenu">
    		<option selected="true">Select a Market Here</option>
    		<option>Source Air Testing</option>
    		<option>Drinking Water Testing</option>
    		<option>Radiological Testing</option>
    	</select>-->
    </div>
    <div id="SpecialtyTop">
    	<img src="/images/long_wave_transparent.png" width="816" height="31" id="servicesHeaderImage" alt="" />
    	<table width="97%" border="0" cellspacing="0" cellpadding="5">
    		<tr>
    			<!--<td class="bottomborder" width="340" height="45" valign="middle">
    				<h2>
    
    				</h2>
    			</td>
    			<td class="leftborder bottomborder" width="456" valign="middle">
    				<div dir="ltr" align="left">
    				
    				</div>
    			</td>-->
    		</tr>
    		<tr>
    			<td valign="top">
    				<h3>Specialty Offerings</h3>
    			</td>
    			<td class="leftborder" valign="top">
    				<h3><umbraco:Item field="SpecialtyServiceDescriptionTitle" runat="server"></umbraco:Item></h3>
    			</td>
    		</tr>
    		<tr>
    			<td width="340" valign="top">
    				<div style="width: 330px; height: 150px; padding: 5px">
    					<umbraco:Macro Alias="SpecialtyServiceFlyout" runat="server"></umbraco:Macro>
    				</div>
    			</td>
    			<td class="leftborder" width="456" valign="top">
    				<div style="height: 150px; padding: 5px">
    					<p align="left"><umbraco:Item field="SpecialtyServiceDescription" runat="server"></umbraco:Item></p>
    				</div>
    			</td>
    		</tr>
    	</table>
    </div>
    <div id="SpecialtyBottom">
    	<div id="SpecialtyBottomLeft">
    		<div id="SpecialtyNews">
    			<img src="/images/short_wave_transparent.png" width="330" height="23" id="servicesHeaderImage" alt="" />
    			<h4>News and Events</h4>
    			<umbraco:Item field="SpecialtyServiceNews" runat="server"></umbraco:Item>
    		</div>
    		<div id="SpecialtyPublications">
    			<img src="/images/short_wave_transparent.png" width="330" height="23" id="servicesHeaderImage" alt=""/>
    			<h4>Publications</h4>
    			<umbraco:Item field="SpecialtyServicePublications" runat="server"></umbraco:Item>
    		</div>
    	</div>
    
    	<!--<div id="separatorContainer"><img src="/images/vertical_shadow.png" alt="" class="columnDivider" id="separator"/></div>-->
    	
    	<div id="SpecialtyBottomRight">
    		<img src="/images/short_wave_transparent.png" width="460" height="23" id="servicesHeaderImage" alt=""/>
    		<umbraco:Item field="SpecialtyServiceExperts" runat="server"></umbraco:Item>
    	</div>
    </div>
    <p />
    
    <script language="javascript" type="text/javascript">
    	myBorder.render('SpecialtyTop');
    	myBorder.render('SpecialtyNews');
    	myBorder.render('SpecialtyPublications');
    	myBorder.render('SpecialtyBottomRight');
    </script>
    </asp:content>
    I'm not sure why the table is being used (I didn't write it that way and hope to be able to remove it in the future).

    Thank you for your help!!!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Here is the code for the page:
    Sorry, we can't parse your server side code to generate the corresponding html. You need to post the parsed html output taken from browser's "view source" option. Or a link to your page would be much better!

    I'm not sure why the table is being used (I didn't write it that way and hope to be able to remove it in the future).
    It's necessary to have a clean and semantic markup to get a compatible display in all browsers. Why should you postpone to have it in future? Using tables for anything other than displaying tabular data is very bad. Read http://www.hotdesign.com/seybold/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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