homepage Welcome to WebmasterWorld Guest from 54.146.175.204
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
menu over content vanishes in IE
trick

5+ Year Member



 
Msg#: 3525620 posted 3:09 am on Dec 12, 2007 (gmt 0)

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!

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved