Why doesn't the z-index work?
Take a look at the attached screenshot. My problem is that when the user expands the menu below a certain point, it extends behind a transparent background and prevents the user from being able to access the bottom link.
The setting that I've been fooling with is "navcontainer" which is at line 166. I've got a z-index of 100 compared to the z-index that corresponds to the "column_headings" class at line 413 which is set to 5.
Despite the desparity, my menu continues to slide beneath the "column_headings.png" graphic and I can't figure out why.
Thoughts?
I've included all of the html code as well as the entire stylesheet thinking it would be helpful to have access to the whole thing.
Here's my html:
z-index.png
The setting that I've been fooling with is "navcontainer" which is at line 166. I've got a z-index of 100 compared to the z-index that corresponds to the "column_headings" class at line 413 which is set to 5.
Despite the desparity, my menu continues to slide beneath the "column_headings.png" graphic and I can't figure out why.
Thoughts?
I've included all of the html code as well as the entire stylesheet thinking it would be helpful to have access to the whole thing.
Here's my html:
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>South Area Network</title>
<link href="css/new_style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="http://southareanetwork.nss.vzwnet.com/images/verizon_favicon.ico">
<map name="tabs">
<area shape="rect" coords="19,27,140,43" href="dashboard.php">
<area shape="rect" coords="153,27,262,43" href="network_tools.php">
<area shape="rect" coords="281,27,393,43" href="recognition.php">
<area shape="rect" coords="405,27,523,43" href="project_request.php">
</map>
<map name="login">
<area shape="rect" coords="4,21,90,44" href="sign_in.php">
<area shape="rect" coords="14,64,456,131" href="index.php">
</map>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script language="JavaScript"><!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
window.open(selObj.options[selObj.selectedIndex].value, "_self");
if (restore) selObj.selectedIndex=0;
}
// -->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Clock --
var timerID = null
var timerRunning = false
function stopclock(){
if(timerRunning)
clearTimeout(timerID)
timerRunning = false
}
function startclock(){
stopclock()
showtime()
}
function showtime(){
var now = new Date()
var hours = now.getHours()
var minutes = now.getMinutes()
var seconds = now.getSeconds()
var timeValue = "" + ((hours > 12) ? hours - 12 : hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " P.M." : " A.M."
document.clock.face.value = timeValue
timerID = setTimeout("showtime()",1000)
timerRunning = true
}
//-->
</SCRIPT>
</head>
<body onLoad="startclock()">
<div class="header">
<div id="right_graphic">
<div id="right_tabs"><img src="images/search_button.png" width="528" height="53" border="0" usemap="#tabs"></div>
<div id="clockwork"><span style="font-size:10pt;">Wednesday - March 11th, 2015</span><br><form name="clock" onSubmit="0" style="display:inline;"><INPUT TYPE="text" NAME="face" class="clock" VALUE ="....Initializing...."></form>
</div>
<div id="search_box"><form action="search.php" method="Post"><input type="text" class="search_box" name="search_words"></div>
<div id="search_button"><input type="image" src="images/search_button.png"></form></div>
</div>
<div id="left_graphic"><img src="images/left_header.png" usemap="#login" border="0"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//this is your starting point where all your slidingNavTerms are hidden and your display_hide links are displayed
$(".slidingNavTerms").hide();
$(".display_hide").show();
//here's your actual function, as far as a user clicking on a link in order to see the "hidden" link beneath it
$('.display_hide').click(function(){
$(this).next().slideToggle();
//$(this).html("System Performance ▲");
});
//this is the command that corresponds to all of the links on your main nav bar in that anytime the user hovers over a "primary" link, it sets all of the previously exposed links to "hidden." This way
//any expanded menus don't linger. Since I've got graphic to correspond with every link, I gave each link a function. It may not be the most elegant approach, but it got the job done.
$('.planning').hover(function(){
$(".slidingNavTerms").hide();
$(".display_hide").show();
});
$('.budget').hover(function(){
$(".slidingNavTerms").hide();
$(".display_hide").show();
});
$('.system_perf').hover(function(){
$(".slidingNavTerms").hide();
$(".display_hide").show();
});
$('.network_ops').hover(function(){
$(".slidingNavTerms").hide();
$(".display_hide").show();
});
$('.reference').hover(function(){
$(".slidingNavTerms").hide();
$(".display_hide").show();
});
$('.exec_reports').hover(function(){
$(".slidingNavTerms").hide();
$(".display_hide").show();
});
});
</script>
<div class="nav_bar">
<div class="navcontainer">
<ul>
<li><a href="http://localhost\SouthArea/index.php" class="home"></a></li>
<li><a href="#" class="regions"></a>
<ul>
<table class="regions"><!--I changed the width of "South Central" in order to accommodate the width of the div on line 62. It's actually larger than the actual cell in order to give the link the needed mask so the pulldown wouldn't go away-->
<tr>
<td class="regions_header">Carolina / Tennessee</td>
<td class="regions_header">Florida</td>
<td class="regions_header">Georgia / Alabama</td>
<td class="regions_header">Houston Gulf Coast</td>
<td class="regions_header" style="width:400px;">South Central</td>
<td class="regions_header">Central Texas</td>
</tr>
<tr>
<td>
<table class="regions_list" border="0">
<tr>
<td class="regions_list" style="width:auto;"><a href="http://vzwcarolinastennessee.com/" target="_blank" class="nav_menu_td">Region News</a></td>
</tr>
<tr>
<td style="height:15px;"><a href="#" class="display_hide" style="color:#000000; text-decoration:none; outline:0;">System Performance ▼</a>
<div class="slidingNavTerms" style="border:0; background-color:#cccccc; padding:3px; border-radius:3px; -moz-border-radius:3px; width:auto;"><a href="http://sasysperf/dashb/dashboards.php?market=Carolinas/Tennessee" target="_blank" style="color:#000000; text-decoration:none; outline:0;">KPI Performance</a></div>
</td>
</tr>
<tr>
<td style="height:15px;"><a href="#" class="display_hide" style="color:#000000; text-decoration:none; outline:0;">Project Management ▼</a>
<div class="slidingNavTerms" style="border:1; background-color:#cccccc; padding:3px; border-radius:3px; -moz-border-radius:3px; width:auto;"><a href="http://casctxrgnp1v/sitetracker/home.aspx" target="_blank" style="color:#000000;
text-decoration:none; outline:0;">Site Tracker</a></div>
</td>
</tr>
<tr>
<td class="regions_list" style="width:auto;"><a href="share_list.php" class="nav_menu_td">File Library</a></td>
</tr>
<tr>
<td class="regions_list" style="width:auto;"><a href="http://10.134.214.195/eoccat/default.aspx" class="nav_menu_td" target="_blank">EOC Tool</a></td>
</tr>
<tr>
<td class="regions_list" style="width:auto;"><a href="http://10.134.214.195/DataDashboardR2/Default.aspx" class="nav_menu_td" target="_blank">Data Dashboard</a></td>
</tr>
</table>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://www.vzwflorida.com" target="_blank" class="nav_menu_td">Region News</a></td>
</tr>
<tr>
<td style="height:15px;"><a href="#" class="display_hide" style="color:#000000; text-decoration:none; outline:0;">System Performance ▼</a>
<div class="slidingNavTerms" style="border:1; background-color:#cccccc; padding:3px; border-radius:3px; -moz-border-radius:3px; width:auto;"><a href="http://sasysperf/dashb/dashboards.php?market=Florida" target="_blank" style="color:#000000;
text-decoration:none; outline:0;">KPI Performance</a></div>
</td>
</tr>
<tr>
<td class="regions_list"><a href="http://netopscom.vzwnet.com/Login.asp" target="_blank" class="nav_menu_td">NetOpsCom</a></td>
</tr>
<tr>
<td class="regions_list"><a href="http://nettrac.vzwnet.com/Login.cshtml" target="_blank" class="nav_menu_td">NetTrac</a></td>
</tr>
<tr>
<td class="regions_list"><a href="http://florida-eoc.eng.vzwcorp.com/" target="_blank" class="nav_menu_td">EOC: Disaster Recovery</a></td>
</tr>
</table>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://www.vzwgeorgiaalabama.com" target="_blank" class="nav_menu_td">Region News</a></td>
</tr>
<tr>
<td style="height:15px; width:auto;"><a href="#" class="display_hide" style="color:#000000; text-decoration:none; outline:0;">System Performance ▼</a>
<div class="slidingNavTerms" style="border:1; background-color:#cccccc; padding:3px; border-radius:3px; -moz-border-radius:3px; width:auto;"><a href="http://sasysperf/dashb/dashboards.php?market=Georgia/Alabama" target="_blank" style="color:#000000;
text-decoration:none; outline:0;">KPI Performance</a></div>
</td>
</tr>
</table>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://www.vzwhoustongulfcoast.com" target="_blank" class="nav_menu_td">Region News</a></td>
</tr>
<tr>
<td style="height:15px; width:auto;"><a href="#" class="display_hide" style="color:#000000; text-decoration:none; outline:0;">System Performance ▼</a>
<div class="slidingNavTerms" style="border:1; background-color:#cccccc; padding:3px; border-radius:3px; -moz-border-radius:3px; width:auto;"><a href="http://sasysperf/dashb/dashboards.php?market=houston/gulf coast" target="_blank" style="color:#000000;
text-decoration:none; outline:0;">KPI Performance</a></div>
</td>
</tr>
</table>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://www.vzwsouthcentral.com" target="_blank" class="nav_menu_td">Region News</a></td>
</tr>
<tr>
<td style="height:15px; width:auto;"><a href="#" class="display_hide" style="color:#000000; text-decoration:none; outline:0;">System Performance ▼</a>
<div class="slidingNavTerms" style="border:1; background-color:#cccccc; padding:3px; border-radius:3px; -moz-border-radius:3px; width:auto;"><a href="http://sasysperf/dashb/dashboards.php?market=South Central" target="_blank" style="color:#000000;
text-decoration:none; outline:0;">KPI Performance</a><a href="http://10.217.142.10:8080/SCTraffic/#/hotRSSI/diChart" target="_blank" style="color:#000000;
text-decoration:none; outline:0; margin-top:3px;">SC Traffic Website</a></div>
</td>
</tr>
</table>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://www.vzwcentraltexas.com" target="_blank" class="nav_menu_td">Region News</a></td>
</tr>
<tr>
<td style="height:15px; width:auto;"><a href="#" class="display_hide" style="color:#000000; text-decoration:none; outline:0;">System Performance ▼</a>
<div class="slidingNavTerms" style="border:1; background-color:#cccccc; padding:3px; border-radius:3px; -moz-border-radius:3px; width:auto;"><a href="http://sasysperf/dashb/dashboards.php?market=Central Texas" target="_blank" style="color:#000000;
text-decoration:none; outline:0;">KPI Performance</a><hr style="margin-top:3px; margin-bottom:3px;"><a href="http://10.70.145.118/" target="_blank" style="color:#000000;
text-decoration:none; outline:0;">CTX Data Performance</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ul>
</li>
<li><a href="planning.php" class="planning"></a>
<ul>
<table class="regions" width="700">
<tr>
<td class="regions_header">RF Planning</td>
<td class="regions_header">Data Planning</td>
<td class="regions_header">Network Implementation</td>
<td class="regions_header">Power and Ground</td>
<td class="regions_header">Transport</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://gaalp1sql030/Reports_VZW_NET/Pages/Report.aspx?ItemPath=%2fCapitalBudgetTools%2fDEV_CurrentProjectReport" target="_blank" class="nav_menu_td">Current Projects Update</a></td>
</tr>
</table>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://txslcpngpa1v.nss.vzwnet.com/cpng/index.php" target="_blank" class="nav_menu_td">Team Website</a></td>
</tr>
</table>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://soareatransportreporting.south.vzwcorp.com/Default.aspx" class="nav_menu_td" target="_blank">Area Reports</a></td>
</tr>
</table>
</td>
</tr>
</table>
</ul>
</li>
<li><a href="budget_reports.php" class="budget"></a>
<ul style="margin-left:-300px;">
<table class="regions">
<tr>
<td class="regions_header">Tools & Reporting</td>
<td class="regions_header">Financial Planning & Analysis</td>
<td class="regions_header" style="width:100px;">Inventory</th>
<td class="regions_header">Real Estate</td>
<td class="regions_header">Compliance</td>
<td class="regions_header">Code Administration</td>
</tr>
<tr>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://localhost\SouthArea/docs/update.pdf" target="_blank" class="nav_menu_td">Current Development Project List</a></td>
</tr>
<tr>
<td class="regions_list"><a href="project_request.php" class="nav_menu_td">New Development Project Request</a></td>
</tr>
<tr>
<td class="regions_list"><a href="https://portal.vh.vzwnet.com/aeportal/index.php/nss-apps" class="nav_menu_td" target="_blank">NSS Application Summary</a></td>
</tr>
<tr>
<td class="regions_list"><a href="https://portal.vh.vzwnet.com/aeportal/" class="nav_menu_td" target="_blank">NSS Portal</a></td>
</tr>
<tr>
<td class="regions_list"><a href="http://stakeholder.south.vzwcorp.com/" class="nav_menu_td">360 Survey Tool</a></td>
</tr>
</table>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://budgettools.south.vzwcorp.com/default.aspx?aid=1&bpid=" class="nav_menu_td" target="_blank">Capital Budget Tool</a></td>
</tr>
<tr>
<td class="regions_list"><a href="http://expensebudgettool.south.vzwcorp.com/default.aspx" class="nav_menu_td" target="_blank">Expense Budget Tool</a></td>
</tr>
<tr>
<td class="regions_list"><a href="http://netadmin.nss.vzwnet.com/asset-management/cip-dashboard/" target="_blank" class="nav_menu_td">CIP Dashboard</a></td>
</tr>
</table>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list" style="width:100px;"><a href="http://txslsaiapw1v.nss.vzwnet.com/" class="nav_menu_td" target="_blank">Inventory Tool</a></td>
</tr>
</table>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list" style="width:100px;"><a href="http://sarrealestatetracker.south.vzwcorp.com/Default.aspx" class="nav_menu_td" target="_blank">Real Estate Tracker</a></td>
</tr>
</table>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://10.215.213.203/c2/vzwcompreg/content.nsf/lookup.htmlpages/mainframe.html?open" class="nav_menu_td" target="_blank">Network Compliance and Regulatory</a></td>
</tr>
</table>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://localhost\SouthArea/page.php?page_id=9" class="nav_menu_td">Team Members</a></td>
</tr>
<tr>
<td class="regions_list"><a href="https://cloudsites.vzbi.com/sites/codeadmin" target="_blank" class="nav_menu_td">File Library</a></td>
</tr>
<tr>
<td class="regions_list"><a href="http://txslcarxpa1v.nss.vzwnet.com/CARRIE/eng/Lerg/index.cfm" class="nav_menu_td" target="_blank">CARRIE</a></td>
</tr>
</table>
</td>
</tr>
</table>
</ul>
</li>
<li><a href="" class="system_perf"></a>
<ul class="tool_list">
<table class="regions" width="150">
<tr>
<td class="regions_header"><a href="http://sasysperf/index.php" target="_blank" class="nav_menu_th">Area System Performance</td>
</tr>
<tr>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://localhost\SouthArea/weekly_reports/index.php?id=4" class="nav_menu_td" target="_blank">Weekly Reporting</a></td>
</tr>
<tr>
<td class="regions_list"><a href=""class="nav_menu_td">Reporting Website</a></td>
</tr>
<tr>
<td class="regions_list"><a href="http://saportal.south.vzwcorp.com/LTEOffload/Index"class="nav_menu_td" target="_blank">LTE Offload Tool</a></td>
</tr>
<tr>
<td class="regions_list"><a href="https://cloudsites.vzbi.com/sites/SAMonthlyReporting/_layouts/15/start.aspx#/SitePages/Home.aspx "class="nav_menu_td" target="_blank">Monthly Reporting Sharepoint</a></td>
</tr>
</table>
</td>
</tr>
</table>
</ul>
</li>
<li><a href="network_ops.php" class="network_ops"></a>
<ul class="tool_list">
<table class="regions" width="200">
<tr>
<td class="regions_header">Network Operations</td>
</tr>
<tr>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://txsltwp1v.nss.vzwnet.com/translations/" class="nav_menu_td" target="_blank">Translations Website</a></td>
</tr>
<tr>
<td class="regions_list"><a href="http://rempr2.vh.eng.vzwcorp.com/NCC/" class="nav_menu_td" target="_blank">Remedy Reporting</a></td>
</tr>
<tr>
<td class="regions_list"><a href="http://netadmin.nss.vzwnet.com/network-carrier-management/transport/ebh-dashboard" class="nav_menu_td" target="_blank">National EBH Dashboard</a></td>
</tr>
</table>
</td>
</tr>
</table>
</ul>
</li>
<li><a href="reference.php" class="reference"></a>
<ul class="tool_list">
<table class="regions" width="150">
<tr>
<td class="regions_header">Organization</td>
<td class="regions_header">Systems</td>
</tr>
<tr>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://localhost\SouthArea/faq_list.php" class="nav_menu_td">FAQs</a></td>
</tr>
<tr>
<td class="regions_list"><a href="http://localhost\SouthArea/term_guide.php" class="nav_menu_td">Acronyms</a></td>
</tr>
<tr>
<td class="regions_list"><a href="http://localhost\SouthArea/page.php?page_id=7" class="nav_menu_td">Organization Chart</a></td>
</tr>
</table>
</td>
<td>
<table class="regions_list">
<tr>
<td class="regions_list"><a href="http://localhost\SouthArea/doc_list.php" class="nav_menu_td">File Library</a></td>
</tr>
</table>
</td>
</tr>
</table>
</ul>
</li>
<li><a href="exec_reports.php" class="reports"></a>
<ul>
<table class="regions">
<tr>
<td class="regions_header">Financial Planning and Analysis</td>
</tr>
<tr>
<td>
<table class="regions_list">
<tr>
<td><a href="http://netadmin.nss.vzwnet.com/asset-management/cip-dashboard/" target="_blank" class="nav_menu_td">CIP Dashboard</a></td>
</tr>
</table>
</td>
</tr>
</table>
</ul>
</li>
</ul>
</div>
</div>
<div class="marquee_background">
<div class="marquee"></div>
</div>
<div class="global_watermark">
<div class="column_headings"></div>
<div class="column_wrapper">
<div class="app_month"><a href="Photos/verizon_app_icon.jpg" target="_blank"><img src="Photos/verizon_app_icon.jpg" width="65" border="0" style="float:left;"></a> It's possible to manage your Verizon account from your iPhone! While this app isn't "new," there are some features that were released with version 3.13.4:<br /><br /> <em>A new and convenient way to keep track of your data usage - the Verizon Data Usage widget for iOS 8 shows your data usage right in the Today view in Notification Center. It updates automatically based on your plan and usage, so you'll never be surprised by data overages again!</em> <br /><br />Head out to <a href="https://itunes.apple.com/us/app/my-verizon-mobile/id416023011?mt=8"...<br><br><a href="article.php?id=35">read more...</a><br><br></div>
<div class="headlines"><a href="Photos/adage-logo[1].jpg" target="_blank"><img src="Photos/adage-logo[1].jpg" width="65" border="0" style="float:left;"></a> A recent article in "Advertising Age" mentioned Verizon's recent partnering with a well known advertising agency...<br /><br />Verizon, the nation's largest wireless carrier, has tapped <a class="directory_entry" style="background-color: #ffffff;" title="Ad Age LookBook" href="http://adage.com/directory/wieden-kennedy/6468">Wieden & Kennedy</a> for brand work, Ad Age has learned.
<p>According to people familiar with the matter, the marketer is enlisting Wieden to handle creative and strategy...<br><br><a href="article.php?id=36">read more...</a><br><br>
</div>
<div class="faqs"><b>1)</b> <a href="faq_display.php?id=4" class="faq">What does ALU NDT mean?</a></span><br><br><b>2)</b> <a href="faq_display.php?id=2" class="faq">What does LTE stand for?</a></span><br><br><b>3)</b> <a href="faq_display.php?id=8" class="faq">What is ODAS?</a></span><br><br><b>4)</b> <a href="faq_display.php?id=5" class="faq">What is PCI?</a></span><br><br><b>5)</b> <a href="faq_display.php?id=3" class="faq">What is VPI?</a></span><br><br>
</div>
</div>
<div class="text_boxes">
<div class="important">
<map name="wisdom">
<area shape="rect" coords="479,137,554,158" href="article.php?id=40">
</map>
<img src="images/spacer.png" border="0" usemap="#wisdom">
</div>
<div class="meet_team">
<map name="team">
<area shape="rect" coords="220,15, 542,155" href="page.php?page_id=7">
</map>
<img src="images/spacer.png" border="0" usemap="#team">
</div>
</div>
</div>
<div class="site_content">
</div> <!-- close site_content -->
<div class="footer"><br>© Verizon Wireless | South Area | All Rights Reserved | <a href="page.php?page_id=8.php" style="color:#ffffff; text-decoration:none;">Contact</a></div>
z-index.png
ASKER
Morning, Dave!
I've got my navcontainer set to position:absolute at line 161 and the column_headings dynamic is set to position:relative; at line 414. What is lacking as far as a specific declaration of positioning? I understand what you're saying, I'm just not tracking with you as far as where I didn't explicitly state it.
I've got my navcontainer set to position:absolute at line 161 and the column_headings dynamic is set to position:relative; at line 414. What is lacking as far as a specific declaration of positioning? I understand what you're saying, I'm just not tracking with you as far as where I didn't explicitly state it.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
There it is! I changed it, Dave, and while I'm sure we're well on the way, it's still not working. Do you see any other flaw?
My thought was that the grey navcontainer and all the table info within it needs to be "elevated." I just can't see where else I could be making a change.
this is killing me!
My thought was that the grey navcontainer and all the table info within it needs to be "elevated." I just can't see where else I could be making a change.
this is killing me!
Since I can't access your page, I have no idea.
ASKER
I figured it out, Dave. I wound up playing with the z-index of the grey marquee and the other graphic that the menu was slipping behind. I'm thinking that between your suggestion and assigning a z-index to the marquee, I gave the system something to latch on to that, in the end, gave it what it needed to display the menu correctly!
Thanks!
Thanks!
You're welcome, glad to help.
'position:relative' is the normal state but you need to explicitly include it in your definition for that element for z-index to work.