Welcome to WebmasterWorld Guest from 54.226.146.15

Forum Moderators: not2easy

Message Too Old, No Replies

menu over content vanishes in IE

     

trick

3:09 am on Dec 12, 2007 (gmt 0)

5+ Year Member



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!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month