Skip navigation
LabManager7
Currently Being Moderated

Spry horizontal menu not displaying properly in IE

Dec 4, 2012 7:59 AM

I know that this is a common problem in the forums, but as a first-time site manager, I am having difficulty applying the responses to my own code. The page I'm working on is  http://needlab.cumc.columbia.edu/links_testing.html (this may not show up until 12/05/12 when our server has had the chance to update).

 

Two problems to tackle: (1) The menu bar is not in the correct place. It should fall just below the lab name. (2) When I hover over "People," the first subitem option blocks "People." In other browsers, the subitems appear below their parent item.

 

Here's the 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>NEED Lab</title>

<style type="text/css">

body,td,th {

          font-family: Arial, Helvetica, sans-serif;

}

body {

          background-color: #FFFFFF;

}

a:link {

          text-decoration: none;

          color: #FF6633;

}

a:visited {

          text-decoration: none;

}

a:hover {

          text-decoration: underline;

}

a:active {

          text-decoration: none;

          font-size: 10.5pt;

}

</style>

<style type="text/css">

#title {

          position:absolute;

          left:130px;

          top:6px;

          width:662px;

          height:97px;

          z-index:4;

          font-size: 40px;

          text-align: center;

          font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

}

#pagetitle {

          position:absolute;

          left:333px;

          top:237px;

          width:99px;

          height:41px;

          z-index:10;

          font-size: 24pt;

          font-weight: bold;

          font-family: Georgia, "Times New Roman", Times, serif;

}

#bottombar {

          position:absolute;

          left:0px;

          top:715px;

          width:100%;

          height:25px;

          z-index:11;

          background-color: #333333;

          font-size: 9.5pt;

          color: #FFF;

          padding-top: 8px;

          padding-left: 7px;

}

#pageheader {

          position:absolute;

          left:12px;

          top:11px;

          width:650px;

          height:126px;

          z-index:15;

}

#background {

          position:absolute;

          left:10px;

          top:194px;

          width:771px;

          height:520px;

          z-index:1;

}

#spryholder {

          position:absolute;

          left:4px;

          top:42px;

          width:803px;

          height:45px;

          z-index:16;

}

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<style type="text/css">

#CUlogo {

          position:absolute;

          left:645px;

          top:18px;

          width:133px;

          height:116px;

          z-index:18;

}

#bodytext1 {

          position:absolute;

          left:68px;

          top:292px;

          width:340px;

          height:354px;

          z-index:19;

          font-size: 10.5pt;

}

</style>

</head>

</div>

<div id="pagetitle">Links</div>

<div id="bottombar"><strong>&copy; 2012 Neurocognition, Early Experience, and Development Lab   |     212-305-9854   |   Columbia University Medical Center</strong></div>

<div id="pageheader"><img src="Images/NEED header.jpg" width="620" height="116" /></div>

<div id="background"><img src="Images/775x500.gif" width="775" height="516" /></div>

<div id="spryholder">

<ul id="MenuBar1" class="MenuBarHorizontal">

  <li><a href="index.html">Home</a>  </li>

  <li><a href="currentstudies.html">Research</a>  </li>

  <li><a href="publications.html">Publications</a>  </li>

  <li><a href="participants.html">For Parents</a></li>

  <li><a href="jointhelab.html">Join the Lab</a></li>

  <li><a href="#" class="MenuBarItemSubmenu">People</a>

   <ul>

    <li><a href="currentmembers.html">Current Members</a></li>

    <li><a href="pastmembers.html">Past Members</a></li>

    <li><a href="collaborators.html">Collaborators</a></li>

   </ul>

  </li>

  <li><a href="links.html">Links</a></li>

</ul>

</div>

<div id="CUlogo"><img src="Images/CU logo.gif" width="120" height="110" /></div>

<div id="bodytext1">

<p><a href="http://www.columbia.edu/" target="_blank">Columbia University</a></p>

<p><a href="http://www.cumc.columbia.edu/dept/sergievsky/">GH Sergievsky Center</a></p>

<p><a href="http://irvinginstitute.columbia.edu/">Irving Institute for Clinical and Translational Research</a></p>

<p><a href="http://ies.ed.gov/">Institute of Education Sciences</a></p>

<p><a href="http://www.cumc.columbia.edu/dept/pediatrics/">Columbia University Department of Pediatrics</a></p>

<p><a href="http://childrensnyp.org/mschony/">Morgan Stanley Children's Hospital </a></p>

<p><a href="http://www.sacklerinstitute.org/cornell/">Sackler Institute for Developmental Psychobiology</a></p>

<p><a href="http://ccceh.hs.columbia.edu/index.html">Columbia Center for Children's Environmental Health</a></p>

<p><a href="http://www.mailman.columbia.edu/academic-departments/population-family -health/research-service/columbia-university-head-start">Columbia University Head Start</a></p>

</div>

<p> </p>

<script type="text/javascript">

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

</script>

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points