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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    menu vanishing over content in IE

    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):

    Code:
    <!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:


    Code:
    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!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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 is very useful in your case
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

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