...

View Full Version : menu vanishing over content in IE



trick
12-12-2007, 05:24 PM
Hi,
I'm using a DHTML menu that has links that appear on mouseover. The menus work in most browsers, but in IE for Windows there are problems. The main problem is that the menus vanish when you mouse over them into the content area below (IE Windows only). I've tried various placements of the mouseover script, putting the LIs all on one line... etc.

The CSS is pretty tangled, so I'm not sure what to do for a fix.I thought it might be a z-index thing, but now I don't think so.

Here's a simplified HTML/CSS (sorry for the length, I'm not sure what's causing the trouble):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<script language="javascript" src="core/scripts.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
margin:50px 0px; padding:0px;
background: white;
font: 60% verdana, arial, sans-serif;
z-index:0;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
z-index: 3;
}
#header {
position: absolute;
top: 10px; /* top margin -- add to height */
left: 50%;
width: 473px;
height:115px;
z-index: 5;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: -400px;
}
#menu {
position: absolute;
top: 125px;
left: 50%;
width: 473px;
height: 25px; /* plus header = 150px */
z-index: 3;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: -400px;
background-image: url(../assets/navBG.jpg);
background-color: #2C3141;
}
#menu dl {
float: left;
width: 12em;
z-index: 3;
}
#menu dt {
cursor: pointer;
text-align: left;
z-index: 3;
}
#menu dd {
display: none;
background-color: #2A303F;
z-index: 3;
}
#menu li {
text-align: left;
background: #2A303F;
z-index: 3;
display: inline-block;
height: 14px;
}
#menu li a, #menu dt a, #menu #services #smenu2 a {
text-decoration: none;
display: inline-block;
height: 100%;
border: 0 none;
z-index: 3;
}
#menu li, #menu li a, #menu dt a, #menu #services #smenu2 a {
display: block;
z-index: 3;
}
#about {
position: absolute;
z-index: 3;
top: 0px;
left: 85px;
width: 200px;
height: 200px;
}
#services {
position: absolute;
z-index: 3;
top: 0px;
left: 151px;
width: 200px;
height: 200px;
}
#work {
position: absolute;
z-index: 3;
top: 0px;
left: 240px;
width: 200px;
}
#join {
position: absolute;
z-index: 3;
top: 0px;
left: 314px;
width: 200px;
}
#contact {
position: absolute;
z-index: 3;
top: 0px;
left: 374px;
width: 44px;
}
#about dt {
width: 48px;
z-index: 3;
}
#services dt {
width: 69px;
z-index: 3;
}
#work dt {
width: 53px;
z-index: 3;
}
#join dt {
width: 41px;
z-index: 3;
}
#contact dt {
width: 44px;
z-index: 3;
}
#photo {
position: absolute;
z-index: 5;
width: 327px;
height: 600px;
top : 10px;
right: 50%;
margin-top: 0;
margin-right: -396px; /* reduced to remove white line */
margin-bottom: 0;
margin-left: 0;
}
#content {
position: absolute;
z-index: 1;
width: 473px;
height: 460px;
top : 150px;
left: 50%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: -400px;
background-image: url(../assets/bgHome.jpg);
background-repeat: no-repeat;
background-color: #3C4856;
}
.words {
z-index: 1;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: red;
letter-spacing: 0.1em;
position: absolute;
top: 25px;
left: 0px;
padding-left:85px;
padding-bottom:10px;
width: 335px;
line-height: 13px;
text-align: left;
vertical-align: top;
display: block;
background-image: url(../assets/bgHome.jpg);
background-repeat: no-repeat;
background-color: #3C4856;
background-position: 0px -25px;
padding-right: 50px;
}
a {
color: #FF9900;
text-decoration: none;
}
a:hover, a:active {
color: #FFFFFF;
text-decoration: none;
}

-->
</style></head>

<body onLoad="javascript:show('smenu2'); mSetup(); BlurLinks(); preload( 'assets/about_usO.jpg', 'assets/subnav01_philosO.jpg', 'assets/subnav01_princiO.jpg', 'assets/subnav01_newsO.jpg', 'assets/our_servicesO.jpg', 'assets/subnav02_acouO.jpg', 'assets/subnav02_airO.jpg', 'assets/subnav02_bioO.jpg', 'assets/subnav02_enviO.jpg', 'assets/subnav02_enplO.jpg', 'assets/subnav02_gisO.jpg', 'assets/subnav02_visO.jpg', 'assets/our_workO.jpg', 'assets/subnav03_searchO.jpg', 'assets/subnav03_listO.jpg', 'assets/join_usO.jpg', 'assets/subnav04_cultO.jpg', 'assets/subnav04_posO.jpg', 'assets/subnav04_mentO.jpg', 'assets/subnav04_benO.jpg', 'assets/subnav04_applyO.jpg', 'assets/contactO.jpg' )">

<div id="content">
<div class="words"><p>blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. blah blah blah. </p>
</div>
</div>

<div id="header">
<img src="assets/id.jpg" width="473" height="115" /></div>

<div id="menu">

<div id="about">
<dl>
<dt onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');"><img src="assets/about_us.jpg" hsrc="assets/about_usO.jpg" alt="About Us" width="48" height="25" id="menu01" border="0" /></dt>
<dd id="smenu1" onmouseover="javascript:show('smenu1'); MM_swapImage('menu01','','assets/about_usO.jpg',1)" onmouseout="javascript:show(''); MM_swapImage('menu01','','assets/about_us.jpg',1);">
<ul>
<li><a href="philosophy.html"><img src="assets/subnav01_philos.jpg" hsrc="assets/subnav01_philosO.jpg" alt="Philosophy & History" border="0" width="89" height="14" /></a></li>
<li><a href="principals.html"><img src="assets/subnav01_princi.jpg" hsrc="assets/subnav01_princiO.jpg" alt="Principals" border="0" width="89" height="14" /></a></li>
<li><a href="news.html"><img src="assets/subnav01_news.jpg" hsrc="assets/subnav01_newsO.jpg" alt="News" border="0" width="89" height="14" /></a></li>
</ul>
</dd>
</dl>
</div>

<div id="services"><dl onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');"><dt><img src="assets/our_services.jpg" hsrc="assets/our_servicesO.jpg" alt="Our Services" width="69" height="25" id="menu02" border="0" /></dt><dd id="smenu2" onmouseover="MM_swapImage('menu02','','assets/our_servicesO.jpg',1)" onmouseout="MM_swapImage('menu02','','assets/our_services.jpg',1)"><ul><li><a href="acoustical_analysis.html"><img src="assets/subnav02_acou.jpg" hsrc="assets/subnav02_acouO.jpg" alt="Acoustical Analysis" border="0" width="107" height="14" /></a></li><li><a href="air_quality_analysis.html"><img src="assets/subnav02_air.jpg" hsrc="assets/subnav02_airO.jpg" alt="Air Quality Analysis" border="0" width="107" height="14" /></a></li><li><a href="biological_resources.html"><img src="assets/subnav02_bio.jpg" hsrc="assets/subnav02_bioO.jpg" alt="Biological Resources" border="0" width="107" height="14" /></a></li><li><a href="environmental_service.html"><img src="assets/subnav02_envi.jpg" hsrc="assets/subnav02_enviO.jpg" alt="Environmental Service" border="0" width="107" height="14" /></a></li><li><a href="environmental_planning.html"><img src="assets/subnav02_enpl.jpg" hsrc="assets/subnav02_enplO.jpg" alt="Environmental Planning" border="0" width="107" height="14" /></a></li><li><a href="gis.html"><img src="assets/subnav02_gis.jpg" hsrc="assets/subnav02_gisO.jpg" alt="GIS" border="0" width="107" height="14" /></a></li><li><a href="visual_resources.html"><img src="assets/subnav02_vis.jpg" hsrc="assets/subnav02_visO.jpg" alt="Visual Resources" border="0" width="107" height="14" /></a></li></ul></dd></dl></div>

<div id="work" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');">
<dl>
<dt><img src="assets/our_work.jpg" hsrc="assets/our_workO.jpg" alt="Our Work" width="53" height="25" id="menu03" border="0" /></dt>
<dd id="smenu3" onmouseover="MM_swapImage('menu03','','assets/our_workO.jpg',1)" onmouseout="MM_swapImage('menu03','','assets/our_work.jpg',1)">
<ul>
<li><a href="planning.html"><img src="assets/subnav03_plan.jpg" hsrc="assets/subnav03_planO.jpg" alt="Planning" border="0" width="93" height="14" /></a></li>
<li><a href="commercial.html"><img src="assets/subnav03_comm.jpg" hsrc="assets/subnav03_commO.jpg" alt="Commercial" border="0" width="93" height="14" /></a></li>
<li><a href="educational.html"><img src="assets/subnav03_edu.jpg" hsrc="assets/subnav03_eduO.jpg" alt="Educational" border="0" width="93" height="14" /></a></li>
<li><a href="industrial.html"><img src="assets/subnav03_indus.jpg" hsrc="assets/subnav03_indusO.jpg" alt="Industrial" border="0" width="93" height="14" /></a></li>
<li><a href="institutional.html"><img src="assets/subnav03_inst.jpg" hsrc="assets/subnav03_instO.jpg" alt="Institutional" border="0" width="93" height="14" /></a></li>
<li><a href="residential.html"><img src="assets/subnav03_reside.jpg" hsrc="assets/subnav03_resideO.jpg" alt="Residential" border="0" width="93" height="14" /></a></li>
<li><a href="redevelopment_plans.html"><img src="assets/subnav03_redev.jpg" hsrc="assets/subnav03_redevO.jpg" alt="Redevelopment Plans" border="0" width="93" height="14" /></a></li>
</ul>
</dd>
</dl>
</div>

<div id="join">
<dl>
<dt onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');"><img src="assets/join_us.jpg" hsrc="assets/join_usO.jpg" alt="Join Us" width="41" height="25" id="menu04" border="0" /></dt>
<dd id="smenu4" onmouseover="javascript:show('smenu4'); MM_swapImage('menu04','','assets/join_usO.jpg',1)" onmouseout="javascript:show(''); MM_swapImage('menu04','','assets/join_us.jpg',1)">
<ul>
<li><a href="our_culture.html"><img src="assets/subnav04_cult.jpg" hsrc="assets/subnav04_cultO.jpg" alt="Our Culture" border="0" width="89" height="14" /></a></li>
<li><a href="#" hsrc="assets/subnav04_posO.jpg" alt="Positions Available" border="0" width="89" height="14" /></a></li>
<li><a href="mentorship.html"><img src="assets/subnav04_ment.jpg" hsrc="assets/subnav04_mentO.jpg" alt="Mentorship Program" border="0" width="89" height="14" /></a></li>
<li><a href="benefits.html"><img src="assets/subnav04_ben.jpg" hsrc="assets/subnav04_benO.jpg" alt="Benefits" border="0" width="89" height="14" /></a></li>
<li><a href="apply.html"><img src="assets/subnav04_apply.jpg" hsrc="assets/subnav04_applyO.jpg" alt="Opportunities" border="0" width="89" height="14" /></a></li>
</ul>
</dd>
</dl>
</div>

<div id="contact">
<dl>
<dt onmouseover="javascript:show('');"><a href="contact.html"><img src="assets/contact.jpg" hsrc="assets/contactO.jpg" alt="Contact" width="44" height="25" border="0" /></a></dt>
</dl>
</div>
</div>

<div id="photo"></div>

</body>
</html>

and the menu script:



function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}

Any help would be greatly appreciated!

Thanks!

abduraooft
12-13-2007, 07:57 AM
Why do you want to use this much of javascript for a menu? You have to consider people who use browsers with no Javascript support.
Suckerfish menu (www.htmldog.com/articles/suckerfish/dropdowns/) is very useful in your case

trick
12-13-2007, 02:25 PM
the JS is not the problem (suckerfish uses plenty too from what I can tell). and it is only 5 lines of code...

the problem is some kind of conflict with the CSS placement. the menu works fine until they mouse down far enought to be over the "words" div.

Papa
12-13-2007, 05:21 PM
i had a problem with my menu where it actually went behind the div placement that was below the menu let me see if i can figure out what i did to fix it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum