0 Replies Latest reply on Apr 12, 2010 2:05 PM by dcampbell18

    Need help with Spry Menu Bar

    dcampbell18 Level 1

      Hello,  I have two templates that I am using.  Both have a horizontal menu bar across the top of the page and then two Vertical Spry Menu Bars down the left hand side of the page - one above the other.  On one template, all menu bars are working correctly.  On the other template, 2 out of three are working correctly.  Not sure what's happening here.  The spry menu bar that is not working correctly is under "Books & Materials" heading.  The menu bar is supposed to turn green when you mouse over it, but instead everything turns white and looks like it "disappears".  I have no idea why it would work on one template and not the other.  Or for that matter, why it is working on one vertical spry menu bar, but not the other on the same page.  Can anyone help me?   www.springerlejoy.com/proanimals4.html  This is a page that shows where it is not working.  Basically, all of the products pages are having this problem.  If you go to the home page:  www.springerlejoy.com you will see that this page is working - using a different template.  Can anyone help me?  I'm at a loss!  Thanks!

      Debbie

       

       

       

      Here is the code for the template that is NOT working:

       

      <!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" />
      <!-- TemplateBeginEditable name="doctitle" -->
      <title>Untitled Document</title>
      <!-- TemplateEndEditable -->
      <link href="../thrColFixHdr.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
      <style type="text/css">
      /* place css box model fixes for IE 5* in this conditional comment */
      .thrColFixHdr #sidebar1 { width: 180px; }
      .thrColFixHdr #sidebar2 { width: 190px; }
      </style>
      <![endif]--><!--[if IE]>
      <style type="text/css">
      /* place css fixes for all versions of IE in this conditional comment */
      .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
      .thrColFixHdr #mainContent { zoom: 1; }
      /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
      </style>
      <![endif]-->
      <!--[if IE]>
      <style type="text/css">
      .thrColFixHdr #container { zoom: 1; }
      </style>
      <![endif]-->
      <style type="text/css">
      <!--
      <script type="text/javascript">

      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

      document.write(unescape("%3Cscript

      </script>

      <script type="text/javascript">

      try {

      var pageTracker = _gat._getTracker("UA-11559638-1");

      pageTracker._trackPageview();

      } catch(err) {}</script>


      body {
      background-color: #CCEA86;
      }
      .maincontenthdr {
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 24px;
      font-style: italic;
      font-weight: bold;
      color: #530000;
      text-align: center;
      height: 29px;
      }
      .maincontenthdr1 {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 16px;
      font-style: normal;
      font-weight: bold;
      color: #600;
      }
      .maincontenttxt {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: normal;
      color: #000;
      }
      /*Credits: Dynamic Drive CSS Library */
      /*URL: http://www.dynamicdrive.com/style/ */

      .thumbnail{
      position: relative;
      z-index: 0;
      }

      .thumbnail:hover{
      background-color: transparent;
      z-index: 50;
      }

      .thumbnail span{ /*CSS for enlarged image*/
      position: absolute;
      background-color: lightyellow;
      padding: 5px;
      left: -800px;
      border: 1px dashed gray;
      visibility: hidden;
      color: black;
      text-decoration: none;
      }

      .thumbnail span img{ /*CSS for enlarged image*/
      border-width: 0;
      padding: 2px;
      }

      .thumbnail:hover span{ /*CSS for enlarged image on hover*/
      visibility: visible;
      top: 0;
      left: 60px; /*position where enlarged image should offset horizontally */

      }
      -->
      </style>
      <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
      <script type="text/javascript">
      <!--
      function MM_preloadImages() { //v3.0
        var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
          var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
          if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
      }
      //-->
      </script>
      <!-- TemplateBeginEditable name="head" -->
      <!-- TemplateEndEditable -->
      <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
      <style type="text/css">
      <!--
      body {
      background-color: #CCEA86;
      }
      -->
      </style>
      <link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
      </head>

      <body class="thrColFixHdr" onload="MM_preloadImages('../history2.gif')">

      <div id="container">
        <div id="header">
      <table width="810" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td><div class="hdrtxt">
            <p>2104 Clairmont Drive<br />
              Pittsburgh, PA 15241<br />
              T 412-616-9066<br />
              F 412-220-2074 </p>
            </div></td>
          <td align="center"><a href="../index.html"><img src="../logo3.jpg" width="313" height="149" border="0" /></a></td>
          <td><div class="rthdrtxt">Cookie Molds from <br />
            the Old World for <br />
            Baking and Crafts</div>
             </td>
        </tr>
        <tr>
          <td width="189" background="../lines.gif"></td>
          <td width="409" align="center" background="../lines.gif"> </td>
          <td width="182" background="../lines.gif"></td>
          </tr>
        <tr bgcolor="#BB7C4E">
          <td colspan="3" align="left"><ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="../index.html">Home</a></li>
      <li><a href="../aboutus4.html">About Us</a></li>
      <li><a href="../howtoorder4.html">How To Order</a>          </li>
            <li><a href="../information4.html">Information</a></li>
            <li><a href="../contactus4.html">Contact Us</a></li>
            <li><a href="../recipeshome.html">Recipes</a></li>
            <li><a href="../events4.htm">Events</a></li>
            <li><a href="../gallery4.html">Photo Gallery</a></li>
          </ul></td>
          </tr>
       
      </table>

      <div class="divmenubar"> </div>
      </div>

        <div id="sidebar1">
         
          <div class="FeatureItem">
      <div align="center"><span class="FeatureItemHead"> </span>
        <div>
          <div class="Products">Products
            <br />
            <br />
          </div>
      <div class="proHeaders">Molds</div>
        </div>
      </div>

      <ul id="MenuBar2" class="MenuBarVertical">
        <li><a href="../proangels4.html">Angels</a>      </li>
          <li><a href="../proanimals4.html">Animals</a></li>
          <li><a href="../probaby4.html">Baby</a>      </li>
          <li><a href="../probiblical4.html">Biblical</a></li>
          <li><a href="../probirds41.html">Birds</a></li>
      <li><a href="../prochildren4.html">Children</a></li>
          <li><a href="../prochristgen4.html">Christmas, General</a></li>
          <li><a href="../prochristrel41.html">Christmas, Religious</a></li>
          <li><a href="../procornucopia4.html">Cornucopia</a></li>
          <li><a href="../procultfig4.html">Cultural Figures</a></li>
          <li><a href="../profishing4.html">Fish</a></li>
          <li><a href="../proflowers4.html">Flowers &amp; Plants</a></li>
          <li><a href="../profruits4.html">Fruit</a></li>
          <li><a href="../progeometric4.html">Geometric</a></li>
          <li><a href="../progermany4.html">Germany</a></li>
          <li><a href="../prohearts4.html">Hearts</a></li>
          <li><a href="../proinsects4.html">Insects</a></li>
          <li><a href="../proluck4.html">Luck</a></li>
          <li><a href="../promarriage4.html">Marriage</a></li>
          <li><a href="../promultiple4.html">Multiple Images</a></li>
          <li><a href="../promusic4.html">Music</a></li>
          <li><a href="../pronautical4.html">Nautical</a></li>
          <li><a href="../proscenes4.html">Old Time Scenes</a></li>
          <li><a href="../propeople4.html">People in Old Times</a></li>
          <li><a href="../prosayings4.html">Sayings</a></li>
          <li><a href="../proschool4.html">School</a></li>
          <li><a href="../proseasons4.html">Seasons</a></li>
          <li><a href="../prostar4.html">Star</a></li>
          <li><a href="../prostory4.html">Story / Legend Characters</a></li>
          <li><a href="../prosunmoon4.html">Sun &amp; Moon</a></li>
          <li><a href="../proswitzerland4.html">Switzerland</a></li>
          <li><a href="../prosymbols4.html">Symbols</a></li>
          <li><a href="../protransportation4.html">Transportation</a></li>
          <li><a href="../prozodiac4.html">Zodiac</a>    </li>
      </ul>
      <div class="proHeaders"><br />
        Books &amp; Materials</div>
      <ul id="MenuBar3" class="MenuBarVertical">
        <li><a href="../probooks4.html">Books</a>    </li>
        <li><a href="../procookies4.html">Cookies</a></li>
        <li><a href="../procutters4.html">Cutters</a>    </li>
        <li><a href="../proflavoring4.html">Flavoring</a></li>
        <li><a href="../profoodcolor4.html">Food Coloring</a></li>
        <li><a href="../promaterials4.html">Materials</a></li>
        <li><a href="../protools4.html">Tools</a><br /></li>
      </ul>
      </div>
        
         
      </div>


        <div></div>
        <div id="sidebar2">
          <div class="nxtevents">
            <div class="MenuBarActive">
              <div><a href="http://order.store.yahoo.net/cgi-bin/wg-order?yhst-40727766898036 "><img src="../cart1.gif" name="imgfloatright" width="87" height="26" border="0" id="imgfloatright" /></a></div>
              <p><br />
                <br />
              </p>
            </div>
            <div class="nxtevents">
              <div class="maincontenttxt">
                <div class="moldscenter"><span class="maincontenthdr1">Featured Item<br />
                  </span>
      <p class="thumbnail"><a class="thumbnail" href="#thumb"><span><img src="1142.jpg" /></span></a> <a class="thumbnail" href="#thumb"><a class="thumbnail" href="#thumb"><img src="1142-1.jpg" width="93px" height="100px" border="0" /></a></p>
                 
                  <br />
                  <table width="130" cellpadding="0" cellspacing="0">
          <tr>
            <td width="61" align="right" class="maincontenttxt">1142</td>
            <td width="67" align="right" class="maincontenttxt"><div align="right">$31.00</div></td>
          </tr>
        </table>
                  <br />
                  <a href="../proanimals4.html">The Three Rabbits springerle mold, dia. 3.5&quot; (90mm)</a><br />
                  <br />
                  <form method="post" action="<!--#ystore_order id=1142 -->">
                <p align="left" class="buttoncenter">
                  <input type="submit" value="Order Now" />
                </p>
              </form><br />
                </div>
               
                <p class="nxteventshdr">News...        </p>
              </div>
              <p>2/8: Just Arrived from Switzerland today<br />
                <strong><U><br />
                <a href="../prohearts4.html">11 New Heart   Molds</a></U></strong><a href="../prohearts4.html"><U>!</U></a><U><br />
              </U></p>
            </div>
            <div id="moreevents">
              <p>2/7: See our new photos in the <a href="../gallery4.html">Photo Gallery</a>!</p>
            </div>
          </div>
          <div>
            <p class="nxteventshdr">Newsletter</p>
            <p class="nxtevents">To automatically receive our e-mail newsletter with new mold information, tips and tricks, photos of cookies and art, and historical profiles of featured molds, please fill in the form below and press &lt;Submit&gt;</p>
            <form method=post action="http://us.1.p6.webhosting.yahoo.com/forms?login=springerlejoy" id="form1" name="form1">
              <p class="maincontenttxt">First Name
        <input name="formFirstName" type="text" class="maincontenttxt" id="formFirstName" />
              </p>
              <p class="maincontenttxt">Last Name
                <input name="FormLast" type="text" class="maincontenttxt" id="FormLast" />
              </p>
              <p><span class="maincontenttxt">Email Address
                  <input name="FormEmail" type="text" class="maincontenttxt" id="FormEmail" />
              </span></p>
              <div id="button">
                <input type="submit" name="SubmitButton" id="SubmitButton" value="Submit" />
              </div>
              <p> </p>
            </form>
            <p> </p>
            <p><a href="http://smallbusiness.yahoo.com/ecommerce/" target="_blank"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/smallbiz/gr/ecomby_128bit.gif" alt="ecommerce provided by Yahoo! Small Business" width="118" height="55" border="0" align="middle"/></a> <br />
              <br />
            <a href="http://www.facebook.com/pages/Springerle-Joy/243604195833?ref=search&amp;sid=1000000928365 99.173275996..1&amp;v=wall#!/pages/Springerle-Joy/243604195833?v=wall&amp;ref=search"><img src="../5u84f48n.gif" width="144" height="44" /></a> </p>
          </div>
          <!-- end #sidebar2 -->
        </div>
        <div id="mainContent">
        <div class="maincontenthdr"> <!-- TemplateBeginEditable name="EditMainContHdr" -->   
          <p class="maincontenthdr">Products</p><div class="leafpic"><img src="../leaves3.jpg" width="420" height="32" /></div>
        <!-- TemplateEndEditable --></div>
      <div> 
        <div class="maincontenthdr1">
         
          <table width="418" border="0" cellspacing="0" cellpadding="0">
            <!-- TemplateBeginRepeat name="RepeatRegion1" -->
              <tr>
                <td width="87" rowspan="2" valign="top"><!-- TemplateBeginEditable name="EditRegion6" --> <!-- TemplateEndEditable --></td>
                <td width="255" valign="bottom" class="itemno"><!-- TemplateBeginEditable name="EditRegion7" --> <!-- TemplateEndEditable --></td>
                <td width="76" valign="bottom" class="price"><!-- TemplateBeginEditable name="EditRegion8" --> <!-- TemplateEndEditable --></td>
              </tr>
              <tr>
                <td valign="top" class="maincontenttxt"><!-- TemplateBeginEditable name="EditRegion10" --> <!-- TemplateEndEditable --></td>
                <td class="orderbutton"><!-- TemplateBeginEditable name="EditRegion11" --> <!-- TemplateEndEditable --></td>
              </tr>
              <!-- TemplateEndRepeat -->
            <tr>
              <td> </td>
              <td> </td>
              <td> </td>
            </tr>
          </table>
          <p> </p>
          <div class="maincontenttxt"></div>
          <p> </p>
      <div class="maincontenttxt"></div>
        </div>
      </div>
        </div>
      <p>
         <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
        </p>
      <p><br class="clearfloat" />
        </p>
        <div id="footer">
        <div id="copyrighttxt">
        <p>Copyright© by Springerle Joy, LLC 2010</p>
      </div>
      <!-- end #footer --></div>
      <!-- end #container --></div>
      <script type="text/javascript">
      <!--
      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
      var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
      //-->
      </script>
      </body>
      </html>