Spry Menu bar interactivity page disappears

Hi,
I am using Dreamweaver trail CS3 for Mac. I am creating web
pages using frames and tables. When I insert a Spry Widget Menu Bar
Widget the "Spry Menu Bare: Menubar1" interactive page does not
appear, so I can add or change names of Main Items and Sub-items
along with linking. Why is it doing this?

Hi, I am using a "Top and nested left Frames" The Left frame
I am using to display navigation menu. I insert
"menubarvertical#menubar1". The menu that allows to edit lables,
links and etc. does not come up. Do I need to edit through code?
Here is the code page for the left frame.
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"><style type="text/css">
<!--
body {
background-image: url(NewFiles/background-2.gif);
margin-left: .5in;
-->
</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css"
rel="stylesheet" type="text/css" />
<table width="123" height="48" border="0">
<tr>
<td><img src="NewFiles/Photobut-normal.jpg"
width="107" height="22"></td>
</tr>
</table>
<p> </p>
<p> </p>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Item
1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item
3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item
3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<p> </p>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
Thanks,
Becky

Similar Messages

  • Spry Menu Bar disappears absolute position

    Hello all this is my first time posting on this site so bear with me. I have a semi-transperant spry menu bar that i inserted into the header div, over an image. I moved the menu bar -38px, when the position is set to relative the menu bar is visible, however the old position of the menu bar has a blank white space there. I think this is due to the relative position property. When i change it to absolute the whole menu bar disappears? http://www.brightlikethesun.com/index2.html (the position is back to relative to show the menu bar and also background for header is blue to show the space) 
    CSS
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    width: 100%;
    margin: auto;
    position: relative;
    top: -38px;
    font-family: "Lucida Console", Monaco, monospace;
    opacity: 0.7;
    filter: alpha(opacity=60); /* For IE8 and earlier */
    margin-right: auto;
    margin-left: auto;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 20%;
    float: left;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 70%;
    z-index: 1020;
    cursor: default;
    width: 50em;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 50em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #C0C0C0;
    text-decoration: none;
    background: rgba(98, 135, 167, .4)
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top, #45484d 0%, #000000 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #45484d 0%,#000000 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #45484d 0%,#000000 50%); /* IE10+ */
    background: linear-gradient(to bottom, #45484d 0%,#000000 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #33C;
    color: #FFF;
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 50%); /* IE10+ */
    background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
      display: inline;
      f\loat: left;
      background: #FFF;
    html 
    <!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>Bright Like The Sun -- San Antonio, TX</title>
    <style type="text/css">
    <!--
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #000000;
    margin: 0;
    padding: 0;
    color: #000;
    background-image: url(background.jpg);
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
    h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;  /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 5px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    font-family: Tahoma, Geneva, sans-serif;
    color: #000;
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
    color:#414958;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
    color: #4E5869;
    text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
    width: 80%;
    max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
    background-color: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
    background-color:#06C
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
    float: left;
    width: 20%;
    padding-bottom: 0px;
    background: #f1da36; /* Old browsers */
    background: -moz-linear-gradient(left, #f1da36 0%, #fefcea 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1da36), color-stop(100%,#fefcea)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #f1da36 0%,#fefcea 100%); /* IE10+ */
    background: linear-gradient(to right, #f1da36 0%,#fefcea 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1da36', endColorstr='#fefcea',GradientType=1 ); /* IE6-9 */
    .content {
    padding: 0px 0;
    width: 80%;
    float: left;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
    padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The footer ~~ */
    .footer {
    padding: 10px 0;
    background-color: #000000;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    font-family: "Comic Sans MS", cursive;
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    #menurules {
    margin: 0px;
    padding: 0px;
    -->
    </style>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="container">
      <div class="header"><a href="#"><img src="BLTS1.jpg" alt="BLTS" name="BLTS" width="100%" height="100%" id="BLTS" style="display: block;" /></a>
       <ul id="MenuBar1" class="MenuBarHorizontal">
         <li><a class="MenuBarItemSubmenu" href="#"><center>Home</center></a></li>
         <li><a href="#"><center>Shows</center></a>
    <ul>
             <li><a href="#"><u>Upcoming shows</u><br />
    <br />
    May 4th 2013 @<img src="502.jpg" width="5%" height="5%"><br />
    Bright Like The Sun along with Little Science<br />
    8pm 21+
    </a></li>
                   </ul>
         </li>
         <li><a class="MenuBarItemSubmenu" href="#"><center>Merch</center></a>
           <ul>
             <li><a class="MenuBarItemSubmenu" href="#"><u>Album</u><br /><img src="coda fin cover.jpg" width="15%" height="15%"><font size="4">Coda Fin</font><br />
    Purchase Here or Itunes</a>
                        </li>
             <li><a href="#">Shirts--Coming Soon!</a></li>
             <li><a href="#">Various--Coming Soon!</a></li>
           </ul>
         </li>
         <li><a href="#"><center>Bio</center></a></li>
    <li><a href="#"><center>Contact</center></a></li>
    </ul><!-- end .header --></div>
    <div class="sidebar1">
      <p></p>
        <br />
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      </div> 
      <div class="content"><p align="right"><a href="https://www.facebook.com/brightlikethesun"><img src="FB.jpg" width="30" height="31" alt="Facebook" /></a><img src="twitter-icon.png" width="30" height="31" /></p>
        <p align="left"><img src="weare.jpg" width="185" height="72" /></p><p align="right"><iframe style="border:none" src="http://files.podsnack.com/iframe/embed.html?hash=adznldvg&t=1366488970" width="340" height="54" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" ></iframe></p>
        <p><img src="BLTS2.jpg" alt="BLTS" width="411" height="297" align="left" /><img src="BLTS font.jpg" width="340" /> is a Post-Rock band from San Antonio. They were born in early 2012 from the collective desire to make beautiful, thought provoking, and at times, chaotic music. Much like fellow Texan bands like Explosions in the Sky and This Will Destroy You, they are entirely instrumental, and known for creating progressively intricate waves of ambiance that grow with intensity and an unabashed wash of emotion. Attuned to their affinity for dynamics, seeing them live takes the listener from deafening walls of orchestrated sound, to melodies so subtle that one finds themselves acutely aware of their own breathing. <br />
          Bright Like The Sun&rsquo;s debut album, Coda Fin, was engineered/mixed by Alex Bhore (of This Will Destroy You), and mastered by TW Walsh (of Pedro The Lion). The record, which was self released, was made available on April 12, 2013.<br /><br /><img src="BLTS3.jpg" width="330" height="245" align="right" /></p>
    <br />
    <br />
        <h4>Bright Like The Sun Consists of:</h4>
        <p>Rob Mochen - Guitar <br />
        Chris Etheredge - Guitar/Keys <br />
        Christian Miranda - Bass <br />
        Steven Barrera - Drums    </p>
        <p><br />
        </p>
        <h4><u>Coda Fin</u> Release Date April 12th 2013    </h4>
        <h4><img src="coda fin cover.jpg" width="250" height="238" align="left" /><img src="venues.jpg" width="171" height="65" align="right" /><br />
        <br />
        <br />
        <br />
           <a href="http://502bar.com/"><img src="502.jpg" width="150" height="112" align="right" /></a><a href="http://www.gypsyloungeaustin.com"><img src="gypsylounge.jpg" / width="150" height="112" align="right"></a></h4>
        <p align="right"> </p>
      </div>
      <div class="footer">
        <p><font face="verdana" font size="2" font color="#FFFFFF">&#169;2013 Bright Like The Sun All Rights Reserved</font></p>
        <!-- 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"});
    </script>
    </body>
    </html>

    What I see:
    You need a width on the ul.MenuBarVertical style. Make it the same width as the ul.MenuBarVertical li selector.
    Remove the float: none; from this style:
    ul.MenuBarVertical ul li
         width: 12em;
         float: none;
    No such measurement as a half a pixel:
    ul.MenuBarVertical ul
         border: .5px solid #CCC;
    If you want a border, 1px is minimum...you repeat this incorrect half-pixel in several places.
    Running your page through the W3C Validator returned this: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.healthydirections.ca%2F&charset=%28dete ct+automatically%29&doctype=Inline&group=0
    Your initial errors are not declaring a DOCTYPE, which among other things, does not provide the browser with any information regarding how you want the code interpreted for your viewer. Some browsers guess well, some do not (IE).
    This
         <html>
    is insufficient.
    Apply this in its place, and run through the validator again.
    <!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">
    Beth

  • Spry menu bar submenu disappears when cursor changes

    Hello.
    I've been working with a spry menu bar for some time, but when I expand the submenu and then move the cursor over some text on the page (where the sub-menu is on top of), the submenu disappears. In other words, it seems that when the cursor changes from a pointer to a text cursor, the submenu disappears.
    Can anyone tell me how to prevent that from happening?

    LICAP Webmaster wrote:
    Can anyone tell me how to prevent that from happening?
    Sorry, but without a link to your online page, it's a time-wasting, error-prone guessing game.
    If you put your test page and all dependent files online, and post a link here, we will gladly check that:
        Your server is working
        That all required HTML code is correct
        That your folder hierarchy is correct
        That all required dependent files  (HTML, CSS, JS, Images etc.) are uploaded to proper folders
        That Javascript Versions are correct
        That link paths are all correct and case sensitive
    Sounds like your submenus may be positioned with a small gap from your top-level links

  • How do I get banner & Spry Menu Bar to appear on every page?

    Hi,
    I am a new user of Dreamweaver CS6 an a relatively new user to website development in general.
    I just followed along through Davide Powers "Creating your first website" tutorial series and found it to be very helpful.  I made it through all six parts and managed to get the Check Magazine sample website up and running.  I now want to use what I learned to creat my own site, and I am stuck already.
    The tutorial does a great job of explaining how to setup a Spry Menu Bar to use for navigation.  The tutorial, however, only shows how to put this Spry Menu Bar on the main index.html page.  For my actual site, I would like my navigation bar (and my banner) to appear on every one of my pages.
    Can anyone here tell me where I can find instructions on the best way to do this? 
    My navigation requirements are very simple.  I just want a common banner with navigation buttons to appear at the top of every one of my pages.  The Spry Menu Bar that was created in the tutorial would work great for me assuming I can find a relatively simple way to get it (along with my banner) to appear at the top of every one of my pages.
    If it is very complicated to get it to appear on every page (or would require a large time investment in learning advanced techniques), then I would consider passing on the Spry Menu Bar and trying to setup my navigation in a simpler (if more old-fashioned) way.
    Any advice will be greatly appreciated.
    Thanks in advance,
    Paul

    If a small, 4-5 page site,  make a prototype page with all your columns, headers, footers, menus, etc...  and go to  File > SaveAs index.html,  and then File > SaveAs > page1.html,  and then File > SaveAs page2.html, etc...
    Or you can save your prototype page as a Dreamweaver Template (.dwt file).  Add editable regions for stuff that will change from page to page.  Everything outside editable regions is common to all site pages. Then use your Template to spawn site pages.  File > New > Page from Template, index.html, page1.html, page2.html, etc....    DW Templates are nice site management tool.  But before you use them, read all you can about them in F1 Help as they can be a little tricky to master.
    Last but not least, look at Server-Side Includes. They're a huge time saving feature. I use them on every site I build.
    Server-Side Includes
    http://www.smartwebby.com/web_site_design/server_side_includes.asp
    Nancy O.

  • How to show active page in Spry Menu Bar using images

    Hi,
    I have already read this answer "how to show active page in spry menu bar" but I am using images, not text.  I have mouse-over and mouse-out working in the Spry Menu Bar using image.png and image-over.png, but I cant' figure out how to get the image-over.png to appear on the active page since the spry menu bar is locked on the individual pages.  (I tried to put it in an editable comment, but spry wouldn't go for it. :-)
    Any ideas.  Here is the code:
    <ul id="MenuBar1" class="MenuBarHorizontal">
           <li><a href="../index.html" id="home" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../images/all_pages/home-over.png',1 )"><img src="../images/all_pages/home.png" alt="Home Page" name="home" width="58" height="20" border="0" id="Image8" /></a></li>
           <li><a href="../show.html" id="show" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('show','','../images/all_pages/show-over.png',1)"><img src="../images/all_pages/show.png" alt="The Show" name="show" width="101" height="20" border="0" id="show" /></a></li>
            <li><a href="../team.html" id="team" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('team','','../images/all_pages/team-over.png',1)"><img src="../images/all_pages/team.png" alt="The Team" name="team" width="97" height="20" border="0" id="team" /></a></li>
            <li><a href="../company.html" id="company" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('company','','../images/all_pages/company-over.png',1)"><img src="../images/all_pages/company.png" alt="The Company" name="company" width="139" height="25" border="0" id="company" /></a></li>
            <li><a href="../beatles-tickets.html" id="tickets" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tickets','','../images/all_pages/tickets-over.png',1)"><img src="../images/all_pages/tickets.png" alt="Tickets" name="tickets" width="75" height="20" border="0" id="tickets" /></a></li>
            <li><a href="../media.html" id="media" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('media','','../images/all_pages/media-over.png',1)"><img src="../images/all_pages/media.png" alt="Media" name="media" width="61" height="20" border="0" id="media" /></a></li>
            <li><a href="../news-reviews.html" id="news" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news_reviews','','../images/all_pages/news_reviews-over.png',1 )"><img src="../images/all_pages/news_reviews.png" alt="News-Reviews" name="news_reviews" width="149" height="20" border="0" id="news_reviews" /></a></li>
            <li class="MenuBarHorizontal"><a href="../contact.html" id="contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','../images/all_pages/contact-over.png',1)"><img src="../images/all_pages/contact.png" alt="Contact Us" name="contact" width="79" height="20" border="0" id="contact" /></a></li>
         </ul>
    Thanks so much for helping!
    Cheers,
    Janell

    Just found this page:
    Persistent Page Indicator
    Update: Drat, it is for text menus only not using images. :-(
    Cheers,
    Susan

  • Having issues linking spry menu bar to my other pages

    Hey everyone,
    I am brand new to web development. I am currently using the trial of DW and I must say I love it. I am having issues with my spry menu bar though. I will click on a certain box in the menu bar and use the properties page at the bottom and insert a link to another one of my webpages that I have created. However when I test my webpage, it will not be linked to it. Instead it is linked to #, or my index page. Now my domain name is: thecampuscocktail.com. I have created two other pages "feedback.html" and "speedydrinks.html" and even when I enter those manually into my browser (i.e. "thecampuscocktail.com/feedback.html") it gives me a page not found error. So I may be doing something incorrectly with uploading my pages however I have used the "put" option with all of them and I have used the "sync site wide" option. I am also using a template though that shouldn't affect it. Being brand new I know very, very little about coding. But here is the code to my template:
    <!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>The Campus Cocktail</title>
    <!-- TemplateEndEditable -->
    <link href="../twoColLiqLtHdr.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </head>
    <body>
    <div class="container">
      <div class="header">
        <p><a href="../index.html"><img src="../images/newlogo.gif" alt="logo" width="331" height="189" class="logo" /></a></p>
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">Drinking Games</a>      </li>
          <li><a href="#" class="MenuBarItemSubmenu">Recipes</a>
            <ul>
              <li class="subsubmenu"><a href="#" class="MenuBarItemSubmenu">By Ingredient</a>
                <ul>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">By Type</a>
                <ul>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">By Form</a>
                <ul>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                  <li><a href="#">Untitled Item</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="../Pages/speedydrinks.html">Speedy Drinks</a>      </li>
          <li><a href="#">Drinks by Occasion</a></li>
          <li><a href="../index.html">Local Bars</a></li>
          <li><a href="../Pages/speedydrinks.html">Submit Your Own</a></li>
        </ul>
        <p> </p>
      <!-- end .header --></div>
      <div class="sidebar1"><!-- TemplateBeginEditable name="EditRegion3" -->
        <ul class="nav">
        </ul>
        <p> Whats New:</p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <!-- end .sidebar1 -->
      <!-- TemplateEndEditable --></div>
      <div class="content"><!-- TemplateBeginEditable name="EditRegion4" --><span class="drinklabel">Drink Of The Day:</span>
          <p> </p>
          <!-- end .content -->
      <!-- TemplateEndEditable --></div>
      <div class="footer">
        <p>                 &copy; 2012 Brandon Hall</p>
        <!-- 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"});
    </script>
    </body>
    </html>
    any help will be appreciated! Sorry for the length of this post.

    DW_Noobie wrote:
    can anyone help
    It depends.  I can see your two pages as in this link:
    <http://www.thecampuscocktail.com/speedydrinks.html>
    <http://www.thecampuscocktail.com/feedback.html>
    You need to describe what these issues are.

  • SPRY MENU BAR SUBMENUS-Showing up Under other Page Content

    Hello. I need help. My spry menu bar is showing up beneath content located in another div tag. My code is as below.
    <!DOCTYPE html>
    <html>
    <head>
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>NEW TEMPLATE</title>
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    .wrapper {
    background-color: #fffee8;
    margin: auto;
    padding: 5px;
    height: auto;
    width: 980px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    text-align: left;
    color: #FFF;
    position: static;
    overflow: visible;
    .header {
    margin: 0px;
    padding: 0px;
    height: auto;
    width: 980px;
    background-color: #fffee8;
    border: 0px solid #09C;
    .logoarea {
    margin: 0px;
    padding: 0px;
    height: auto;
    width: 980px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    background-image: url(/Graphics/LOGOS%20AND%20BANNER/GRADIENTHEADER3.jpg);
    .navbar {
    background-color: #666;
    height: 30px;
    width: 980px;
    margin: 1px;
    padding: 1px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    .subnavmenu {
    background-color: #CCC;
    height: 30px;
    width: 980px;
    font-family: "Felix Titling", "Engravers MT";
    font-size: 14px;
    font-style: normal;
    line-height: normal;
    color: #999;
    text-decoration: blink;
    margin: 0px;
    padding: 0px;
    border-top-color: #333;
    border-right-color: #333;
    border-bottom-color: #333;
    border-left-color: #333;
    .leftcontent {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    color: #333;
    padding: 5px;
    height: auto;
    width: 485px;
    margin-right: 0px;
    margin-left: 0px;
    border: 0px none #CCC;
    background-color: fffee8;
    .rightcontent {
    background-color: #333;
    padding: 5px;
    height: auto;
    width: 450px;
    margin-right: 5px;
    margin-left: 5px;
    border: 5px ridge #06F;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFee8;
    font-size: 12px;
    position: static;
    .footer {
    background-image: url(/Graphics/MORGAN%27S%20PIC.jpg);
    background-repeat: repeat;
    margin: 0px;
    padding: 0px;
    height: 165px;
    width: auto;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    text-align: center;
    clear: both;
    color: #666;
    position: relative;
    left: 0px;
    bottom: 0px;
    #logo {
    position:relative;
    left:auto;
    top:-5px;
    width:272px;
    height:auto;
    z-index:1;
    #apDiv4 {
    position:relative;
    width:544px;
    height:53px;
    z-index:1;
    background-color: #fffee8;
    float: right;
    -->
    </style>
    <style type="text/css">
    <!--
    #apDiv2 {
    position:absolute;
    left:857px;
    top:123px;
    width:49px;
    height:50px;
    z-index:1021;
    #apDiv3 {
    position:absolute;
    left:956px;
    top:122px;
    width:150px;
    height:50px;
    z-index:1022;
    #apDiv5 {
    position:static;
    width:200px;
    height:auto;
    background-color: #FFFEE8;
    float: right;
    -->
    </style>
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    #apDiv1 {
    position:absolute;
    left:439px;
    top:23px;
    width:336px;
    height:155px;
    z-index:1021;
    #apDiv6 {
    position:relative;
    left:0px;
    top:0px;
    width:154px;
    height:153px;
    z-index:1021;
    float: right;
    -->
    </style>
    <script src="/Web Site Root Folder/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    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];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    </script>
    <link href="/Web Site Root Folder/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    </head>
    <body background="/Graphics/LOGOS AND BANNER/GRADIENT BACKGROUND 5-8-12.png" class="body" id="body" onLoad="MM_preloadImages('/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png')">
    <div class="wrapper" id="wrapper">
      <div class="header" id="header">
        <div class="logoarea" id="logoarea"><div id="apDiv6">
            <p> </p>
            <p> </p>
            <p><br/>
              <a href="http://www.facebook.com/pages/Mifflin-Juniata-Special-Needs-Center-Inc/129756770511336" target="_blank" align="left"><img src="http://www.niftybuttons.com/blackink/facebook.png" width="60" height="59"></a><a href="https://twitter.com/MJSNC1" target="_blank" align="left"><img src="http://www.niftybuttons.com/blackink/twitter.png" width="57" height="59"></a>
              <br/>
            </p>
            <p>
              <!-- Facebook Badge END -->
            </p>
        </div><div id="apDiv4" >   
          <script>
    (function() {
      var cx = '004600001770955757780:ub1su5xae54';
      var gcse = document.createElement('script'); gcse.type = 'text/javascript';
      gcse.async = true;
      gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
          '//www.google.com/cse/cse.js?cx=' + cx;
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(gcse, s);
    </script>
          <gcse:search></gcse:search></div>
        <div id="logo" onClick="document.location.href='http://www.mjsnc.org';" style="cursor:pointer;"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><img src="/Graphics/LOGOS AND BANNER/slogan and logo editable_edited-2.png" width="244" height="242" alt="Mifflin-Juniata Special Needs Center, Inc."></div>
        <a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a></div>
        <div class="navbar" id="navbar">
          <img src="/Graphics/LOGOS AND BANNER/navbar_edited-3.jpg" alt="navigation menu" width="980" height="25" border="0" usemap="#Map">
          <map name="Map">
            <area shape="rect" coords="59,4,149,24" href="/NAVBAR/ABOUT US/AboutUs.html" target="_parent" alt="About Us">
            <area shape="rect" coords="157,3,255,23" href="/NAVBAR/CONTACT US/ContactUs.html" target="_parent">
            <area shape="rect" coords="263,4,423,22" href="/NAVBAR/BOARD OF DIRECTORS/BoardOfDirectors.html" target="_parent">
            <area shape="rect" coords="429,3,578,22" href="/NAVBAR/VISION AND MISSION/MissionVisionStatementsAdopted2012.pdf" target="_blank">
            <area shape="rect" coords="586,3,698,23" href="/NAVBAR/GET INVOLVED/GetInvolved.html" target="_parent">
            <area shape="rect" coords="704,5,815,24" href="/NAVBAR/DONATE NOW/DonateNow.html" target="_parent">
            <area shape="rect" coords="822,5,920,24" href="/NAVBAR/AFFILIATES/Affiliates.html" target="_parent">
          </map>
        </div>
        <ul id="MenuBar1" class="MenuBarHorizontal">
         <li><a class="MenuBarItemSubmenu" href="#">Adults</a>
           <ul>
             <li><a href="/SUBNAVMENU/ADULT REC/ADULT REC.html">Adult Rec</a></li>
             <li><a href="/SUBNAVMENU/ADULT TRAINING FACILITIES/AdultTrainingFacilities.html">Adult Training Facilities</a></li>
             <li><a href="/SUBNAVMENU/FAMILY LIVING/FAMILY LIVING.HTML">Life Sharing</a></li>
             <li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">Summer Rec</a></li>
             <li><a href="/SUBNAVMENU/AKTION CLUB/AktionClub.html">Aktion Club</a></li>
           </ul>
         </li>
         <li><a href="#" class="MenuBarItemSubmenu">Youth</a>
           <ul>
             <li><a href="/SUBNAVMENU/AFTER SCHOOL PROGRAM/AfterSchool.html">After School Program</a></li>
    <li><a href="/SUBNAVMENU/CHALLENGER/Challenger.html">Challenger Division</a></li>
             <li><a href="/SUBNAVMENU/EARLY INTERVENTION/EarlyIntervention.html">Early Intervention</a></li>
             <li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">Summer Rec</a></li>
             <li><a href="/SUBNAVMENU/T-BALL/TBall.html">T-Ball</a></li>
             <li><a href="/SUBNAVMENU/TEEN CLUB/TeenClub.html">Teen Club</a></li>
             <li><a href="/SUBNAVMENU/TRAINING N TRANSITION/TrainingTransition.html">Training &amp; Transition</a></li>
           </ul>
         </li>
         <li><a class="MenuBarItemSubmenu" href="#">Events</a>
           <ul>
             <li><a href="/SUBNAVMENU/EVENTS/LipSync.html">Lip Sync</a>          </li>
             <li><a href="/SUBNAVMENU/EVENTS/Fundraisers.html">Fundraisers</a></li>
             <li><a href="/SUBNAVMENU/EVENTS/AnnualPicnic.html">Annual Picnic</a></li>
             <li><a href="/SUBNAVMENU/EVENTS/TouringFriends.html">Touring Friends</a></li>
           </ul>
         </li>
         <li><a href="#" class="MenuBarItemSubmenu">Employees</a>
           <ul>
             <li><a href="/SUBNAVMENU/MEET OUR STAFF/MeetOurStaff.html">Meet Our Staff</a></li>
             <li><a href="/SUBNAVMENU/AGENCY WITH CHOICE/AgencyWithChoice.html">Agency With Choice</a></li>
             <li><a href="/SUBNAVMENU/EMPLOYEE ACCESS/RegisterPage.html">Employee Access</a></li>
           </ul>
         </li>
         <li><a href="#" class="MenuBarItemSubmenu">Other</a>
           <ul>
             <li><a href="/SUBNAVMENU/EDUCATION & THERAPY/EducationandTherapy.html">Education &amp; Therapy</a></li>
             <li><a href="/SUBNAVMENU/EQUIPMENT LOAN/EquipmentLoan.html">Equipment Loan</a></li>
             <li><a href="/NAVBAR/VOLUNTEER/Volunteer.html">Volunteer</a></li>
           </ul>
         </li>
       </ul>
       <div class="subnavmenu" id="subnavmenu"> </div>
      </div>
      <div class="rightcontent" id="rightcontent"><!-- TemplateBeginEditable name="editrightcontent" -->
        <p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. </p>
      <!-- TemplateEndEditable --></div>
      <div class="leftcontent" id="leftcontent"><!-- TemplateBeginEditable name="editleftcontent" -->
        <p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
        <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
        <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
        <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. </p>
      <!-- TemplateEndEditable --></div>
      <div class="footer" id="footer"><a href="/NAVBAR/CONTACT US/ContactUs.html">Contact Us </a>| <a href="/NAVBAR/ABOUT US/AboutUs.html">About Us</a> | <a href="/FOOTER AND DISCLAIMER/Disclaimer.pdf">Disclaimer</a></div>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/Web Site Root Folder/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/Web Site Root Folder/SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    cursor: default;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 1;
    list-style-type: none;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 191px;
    height: 30px;
    float: left;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-color: #CCC;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    margin: 0;
    padding: 5;
    list-style-type: none;
    z-index: 1020;
    cursor: default;
    position: absolute;
    left: -1000em;
    width: 9em;
    height: auto;
    clear: both;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 15em;
    border: thin solid #666;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    height: 30px;
    width: auto;
    padding: 0px;
    background-color: #CCC;
    text-decoration: none;
    margin: 0px;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #424edd;
    font-size: 16px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    text-align: center;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;

  • My spry menu bar rolls down my web page as I scroll down page??

    Can anyone help??  Created spry menu bar in dreamweaver cs3, looks good but when I scroll down my web page the entire bar moves too.

    gideon007 wrote:
    I'm no expert here but it sounds like its fixed positioned.
    Agreed,
    If not, post a online url.

  • Spry Menu Bars, Templates and Current Page Indicators

    Hello,
    If you have a spry menu bar in your design, then create a template, how do you then go about making the menu bar have a current page indicator on each page created from the template?
    Thanks,
    Ferg.

    Can I send you on a different path? This solution will only be required in a non-editable area of the DWT.
    First we write a function to initialse the page
    function InitPage(){
    Spry.$$('#MenuBar1 li').forEach(function(node){
        var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
        if(a.href == window.location){
            Spry.Utils.addClassName(node,"activeMenuItem");
    The function compares the URL of the page with the link in the menubar and if they are both the same, it will add an 'activeMenuItem, class to the menuitem.
    Next we nee a trigger to activate the function. This is done with a load listener as per
    Spry.Utils.addLoadListener(InitPage);
    Now we need to ensure that our active menuitem looks different, by assigning a couple of style rules as in the following. The !important needs to be there to override the JS.
    .activeMenuItem a {
        background:#a59a84 !important;
        color:#ffffff !important;
    And lastly we need to add SpryDOMUtils.js as the JS script that we based our JS scripts on
    <script src="SpryAssets/SpryDOMUtils.js"></script>
    The whole thing will look like
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
    <style>
    .activeMenuItem a {
        background:#a59a84 !important;
        color:#ffffff !important;
    </style>
    </head>
    <body>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
        <ul>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 2</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
        <ul>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
          </li>
          <li><a href="#">Item 3.2</a></li>
          <li><a href="#">Item 3.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 4</a></li>
    </ul>
    <script src="SpryAssets/SpryMenuBar.js"></script>
    <script src="SpryAssets/SpryDOMUtils.js"></script>
    <script>
    function InitPage(){
    Spry.$$('#MenuBar1 li').forEach(function(node){
        var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
        if(a.href == window.location){
            Spry.Utils.addClassName(node,"activeMenuItem");
    Spry.Utils.addLoadListener(InitPage);
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    Or see it live here http://shoguncarco.com.au/index.php where the function has been externalised in http://shoguncarco.com.au/js/plugins.js
    Gramps

  • Spry Menu Bars - making them fit across a page properly

    Hi,
    I've been making a website for my work, check it out at www.bto-ltd.co.nz and I'm struggling with the spry menu bar. I want it to fit across the page on one line, and so I've pretty much managed to do that in some browsers. In Google Chrome, it looks perfect. However, in some browsers, (IE and others) one of the buttons wraps down to the next line. How do I fix that?
    Also, depending on which browser is used, the sub menus are either vertical or horizontal. I'd rather they were vertical, can I fix it to this?
    Thanks.

    It does that because you are trying to make a bigger element fit into a smaller element,so you need to go into the
    SpryAssets/SpryMenuBarHorizontal.css
    And reducing your font. change it from 100% to lets say1em, if that still overflows, notch down to .9em
    Gary

  • Need help with Spry Menu Bar

    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>

    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    File cannot be found. Try
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    File cannot be found. Try
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="file:///Macintosh HD/Users/julesmazur/Desktop/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    This link points to a local file on your local harddrive and can therefore not be found. However, this file is not needed because the file will be linked as above.
    Gramps

  • HELP: Horizontal menu bar scrolls page horizontally

    Hi experts out there,
    this is my first attempt in spry menu bars,
    and all works fine but ...
    in the following page if you click item 3.1 and move the mouse out to the side all is fine
    but if you move out down into item 3.2 - then the whole screen is scrolled to align item 3 left in screen.
    http://www.yonius.de/menu-and-data-frame-test.html
    I debugged it to some degree (starting js) and discovered a lot of show / hide submenu calls which do not really seem to make sense.
    I already downloaded  SpryMenuBar-fixed.js   from this site, but that doesn't help.
    Problem seems to be around leaving item 3.1 and entering 3.2 where I do not yet understand the complete logic of the code.
    I would also be happy if the menu just disappeared after the click. but there is no click related code in the script
    that I could have modified ... and my JS skills are still beginner ...
    I am using an Iframe here to display internal and external links driven by the menu ...
    btw. is it true - there is no spry update / fix since 2008  ???
    not even a RELEASED version of 1.6.1 ??
    feels strange to depend on something 'dead'
    thanks a lot for your help before I give up and look for s.h. else than spry menu ...
    MJB Germany

    addition:
    problem appears
    in IE8 and Firefox 3.5
    sometines ? and with a visible flicker in Opera 10.6
    but NOT in   Chrome

  • Spry menu bar -- only one of the submenus of a drop down set works.

    I created a spry drop-down menu bar for navigation within my site for a special event (on October 19). Most items have only one filie (e.g., tickets) but some of the items (e.g., Historic Homes) have up to 8 sub-items.
    I renamed the spry file. I defined all my menu and sub menu items using the dialog box. I styled the bar for both basic state and "hover."
    So far, so good.
    I then created multiple new pages by using "Save As" (the original menu bar file)-- substituting appropriate text to to make the additional item and sub item files.
    But when I link it all up and test it, only ONE of the submenus work. The menu disappears from the other sub menu pages when I navigate to them. Users can't get back to the original menu choices..
    This is the first time with a Spry Menu bar.
    Can you help?
    Susan

    Without seeing your code, I'm guessing your lists and sub-lists are not properly coded. Check your HTML & CSS with the validation tools below:
    Code validation tools
    CSS - http://jigsaw.w3.org/css-validator/
    HTML - http://validator.w3.org/
    Nancy O.

  • "non-scrolling" Spry Menu Bar

    I want to use a Spry Menu Bar (at either the top or bottom of the Window) but do not want it to scroll.  In otherwords as the visitor is scrolling the content of the page they would always have the Menu Bar visible in the Window.  How do I do this?  Is there a difference dependent upon whether the Menu Bar is at the top or bottom?  I would probably prefer the bottom.
    Thanks for your help.
    Jim

    BEM, thanks.  I am almost all the way there.  There are four little issues preventing me from implementing.
    For reference, here is the css script as I have changed it (didn't change the comments):
    <style type="text/css">
    #MenuBar1{
    position:fixed;/*so the navigation will always be fixed at this location of the viewport/window*/
    width:400px; /*or whetever width needed. Be careful or this will cover "static" or normal positioned content*/
    height:33px; /*or whetever height is needed*/
    left:300px; /*so 10 pixels off the right edge of the viewport/window*/
    top: 2px; /*so always 300 pixels from th top of the viewport*/
    </style>
    And here is a screenshot
    1.  I have changed the width callout to 400px, yet the width of the dropdown has not increased.  It wraps text.  I want the Links to be on a single line.  Do I have to change things in the SpryMenuBarVertical.css file or somewhere else? 
    2.  When you select a Link from the PullDown and go to the new page, then press the Back button, the Pulldown has not gone away as shown in the above screenshot.  Sometimes multiple Links are illuminated in blue.  You have to move your cursor over the Links for them to disappear.  This is not acceptable.  What is going on?
    3.   When I insert the Spry Menu it inserts a few lines of script at the very bottom of the body of my page, as shown in this screenshot:
    Hopefully you can see what I mean.  Can I move this into the header or into my external CSS?  If so, what do I have to change to make it work?   I would prefer to not have it in the Body.
    4.  Where do I put the other files on the server?  i.e. "SpryMenuBar.js" and "SpryMenuBarVertical.css"?  I see they are in a SpryAssets folder so I assume I just put that folder on the server in its relative position, or change the path as needed.  Korrekt?
    Thanks for your help.
    Jim

  • Spry Menu Bar Mac Issue

    Hello,
    Link:
    http://www.therockchurch.tv/about_trc.html#welcome
    Issue: Mac Safari doesn't like the spry menu bar. The sub
    menus disappear and flicker. Everything works fine on all browsers
    using widows including safari for windows. The menu just doesn't
    like mac. Any help?
    -R

    "kinblas" <[email protected]> wrote in
    message
    news:f7rdd2$7ri$[email protected]..
    > Hmm, I'm not seing any flashing on that page on my Mac
    with Safari. It
    > looks
    > pretty good.
    >
    > I am seeing it on your homepage:
    >
    >
    http://www.throckchurch.tv
    >
    > but it looks like it is due to the fact that Safari is
    struggling to keep
    > up
    > with rendering all that Flash animation on your page.
    >
    > On windows with FireFox, the homepage is starving the
    browser and pegging
    > my
    > CPU at 100%.
    In IE7 Vista, my CPU is pegged at 22%. I do not run flash in
    Firefox because
    of its rendering engine issues, so that might be an issue
    there. Safari has
    known issues rendering CSS hovers on top of flash. The
    workaround is to
    remove hovers or live with it.
    Al Sparber - PVII
    http://www.projectseven.com
    Extending Dreamweaver - Nav Systems | Galleries | Widgets
    Authors: "42nd Street: Mastering the Art of CSS Design"

Maybe you are looking for

  • One Step DVD quality

    I have been reading the posts about using IMOVIE09 and then using IDVD. I understand the quality is not great because of IMOVIE09 and the way it does the import. IS the quality better if I skip IMOVIE and use the One Step DVD option in IDVD directly?

  • Trying to setup id without credit card not working

    can someone help me before i chuck this ipod in the bin. trying to setup my id so i can get free apps and such but it keeps requesting a credit card. im not sure about all you credit living americans but i dont own a credit card and dont intend on ge

  • Dynamic Calc Member in formula not working

    Hello, I am having an issue trying to calculate a dynamic calc member in a calc script. Lets say this is our outline: OC_GRANDPA (Dynamic Calc) OC_PART1 (Dynamic Calc) (+) Child1 (Calculated at top of calc script - STORED member) (+) Child2 (Calculat

  • I need a sim for sprint the one I have is for att, I need a sim for sprint the one I have is for att

    When I received my iPad last I did not have the service for the iPhone from sprint I was told phone on back order, I thought, good, the phone would come at the end of the month, and I'd cancel AT&T, but it came yesterday. I informed AT&T that I would

  • Jdeveloper 11g + richfaces 3.3.0 (how to install)

    Hello, I try to install richfaces components inside Jdeveloper11g but something goes wrong.. From the http://www.jboss.org/jbossrichfaces/downloads/ i have downloaded the last version of UI components and extracted it on local disk... In Jdeveloper i