Spry menu Bar I.E. positioning issues?

Hi,
I, like many folks I've seen on various forums have the same problem with my spry menu appearing at the top of I.E browsers instead of under the menu bar. I've tried all sorts of fixes that I've found and have updated to the latest version of Spry. I am using CS3. Could anyone please, please help? I'm not sure where else to go as I've spent the last week on the web trying to resolve the issue. Everything works great on Safari and Firefox. My URL is http://www.visiongreeninvestments.org
Thanks in advance to anyone who can point me in the right direction.
My CSS is:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* 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;
    font-size: 100%;
    cursor: default;
    width: 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: 130px;
    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-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    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: 8.2em;
    background-image: none;
ul.MenuBarHorizontal ul li a
    width: 7.8em;
    background-image: none;
    background-color: #669933;
/* 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: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #669933;
    color: #000066;
    text-decoration: none;
    font-family: Times;
    font-size: 14px;
    font-weight: normal;
    background-image: url(../homepagelayout/greenbarbg.jpg);
    background-repeat: repeat;
    padding-top: 0.5em;
    padding-right: 0.75em;
    padding-bottom: 0.5em;
    padding-left: 0.75em;
    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 mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #669933;
    color: #FFF;
    background-image: none;
/* 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
    background-color: #669933;
    color: #FFF;
    background-image: none;
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(../homepagelayout/greenbarbg.jpg);
    background-repeat: repeat;
    background-color: #669933;
/* 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
    background-image: none;
    background-position: 95% 50%;
    background-color: #669933;
/* 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
    background-image: none;
    background-position: 95% 50%;
    background-color: #669933;
/* 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
    background-image: none;
    background-repeat: repeat;
    background-position: 95% 50%;
    background-color: #669933;
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;
/* 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;
    /*insert this bracket/*

I see that the online version has already been upgraded to Spry 1.61 and that it now works.
Gramps
PS Before you change anything, have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one. This will ensure that you don't make a mess of it this time around.

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 Java Error

    I just put a Spry Menu Bar, but am having issues with it. It seems to function just fine, but I am getting issues when I am trying to edit the properties. I keep getting the error
    "When executing inspectSelection in spry_menubar.htm, a JavaScript error occured"
    I am not sure where I have gone wrong. I have tried deleting the Spry Menu Bar and doing it again, but I still run into the errors.

    which version of SpryMenuBar are you using
    which properties did you try to edit
    does the error occur in DW or in the browser
    if the error occurs in DW, which version of DW are you using
    if the error occurs in the browser, which browser and version are you using
    which operating system are you using
    have you included a DOCTYPE declaration and which one
    etc, etc, etc.....
    Of course you could send a link to your site and not have to bother about answering the above questions.
    Gramps

  • Spry Menu Bar 2.0 and positioning of arrows

    Hello again,
    I'm now trying to incorporate Spry Menu Bar 2.0 into a client site, using CS6. Two things are occurring: in Live View, for long lines of menu text, the text wraps to a second line (as I would prefer) and the arrows to submenus line up in a readable fashion. But when I view it in IE or Firefox, the text spills outside (off to the right) of the vertical menu container and the submenu arrows are hidden underneath the text. As far as width, I've tried auto and inherit.
    So, out of frustration I finally decided I would just shorten my menu text to solve the spilling over problem, and  a set pixel width that accommodated my longest line of text. But still, even if the text just fills the container, the arrow is hidden underneath the text. I'm pulling my hair out trying to figure out how to adjust the positioning of the arrow so that it's off to the far right, as it should be. I assume it is this set of rules that controls the arrow:
    .MenuBarVertical .MenuItemWithSubMenu .MenuItemLabel{
        background-image:url("images/ArrowMenuRight.gif");
        background-position:right center;
        background-repeat:no-repeat;
    .MenuBar .SubMenu .MenuItemWithSubMenu .MenuItemLabel{
        background-image:url("images/ArrowMenuRight.gif");
        background-position:right center;
        background-repeat:no-repeat;
    .MenuBar .SubMenu .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
        background-image:url("images/ArrowMenuRight.gif");
        background-position:right center;
        background-repeat:no-repeat;
    ...but I don't know how to adjust these to bump the arrow over. Any ideas out there?
    Ideally, I'd like to get back to wrapping my menu text as well, and I don't understand why it appears this way in Live View but not in a browser. But I'll settle for the arrow in the correct position as second prize. Thanks for your help,
    Gail

    OK, here's what I've done. By adjusting the right padding on #MenuBarVertical .MenuItem .MenuItemLabel, AND #MenuBarVertical .SubMenu .MenuItem .MenuItemLabel, I was able to position the right arrows to where I wanted them. I also removed all links from top-level menu items so that the fly-out submenus would appear on a touch screen. You can see the results on my client site: www.gcssepm.org. I must say that this solution was not intuitive; it took a lot of experimentation to figure out which rule to adjust, and menu rules vs. submenu rules seem to operate in the opposite manner as far as padding and arrows go.
    I do have a similar issue with Scott, in that it takes two or more "taps" to get the submenus to fly out, but at least the arrow is there so the user knows there is a submenu to be had. The only real issue I still have is that for sub-submenus (i.e., third-level), no amount of tapping will get those to display long enough to select them (only an issue on the iPad). I don't know a way around this for the iPad, other than to also eliminate all links from second-level menus that have a third level, and that's more reprogramming than I want to do for today.
    Final questions regarding the Spry 2.0 widget. Obviously, after I customized the widget, saved it, and imported into my site template, it took some additional tweaking before everything was working properly. Is there a way to export the settings back out to the widget, so that all the tweaking is there? Also, is there a way to save my menu text back to the widget, because it is obviously NOT Home, Entertainment, Music, etc.
    Thanks for all your help, and I hope someone else benefits from my experiences as well.
    Gail

  • Spry menu bar 2 IE9 issue

    Hi,
    I have a slight problem with a spry menu bar when viewed in IE9beta, when you hover over a menu item the hover background does not always complety fill the area immediately, eventualy it does.  This problem only affects IE9beta, I have tested it in the latest versions of safari, opera, firefox, and chrome.
    Any help with this would be appreciated,
    Richard.
    You can view the menu at www.eandhbaxendale.com and I have included the css and widget script below
    <script type="text/javascript">
    // BeginOAWidget_Instance_2141544: #BaxMenuBar
    var BaxMenuBar = new Spry.Widget.MenuBar2("#BaxMenuBar", {
          widgetID: "BaxMenuBar",
       widgetClass: "MenuBar  BaxMenuBarFixedLeft",
       insertMenuBarBreak: true,
          mainMenuShowDelay: 100,
          mainMenuHideDelay: 200,
          subMenuShowDelay: 200,
          subMenuHideDelay: 200
    // EndOAWidget_Instance_2141544
    </script>
    /*menu bar start*/
    #BaxMenuBar {
    background-color:#000;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10px;
    font-style: normal;
    padding:0;
    border: #fff solid 1px;
    .MenuBar br {
    display:none;
    .BaxMenuBarLeftShrink {
    float: left;
    width: auto;
    .BaxMenuBarRightShrink {
    float: right;
    width: auto;
    .BaxMenuBarFixedLeft {
    float: left;
    width: 882px;
    .BaxMenuBarFixedCentered {
    float: none;
    width: 80em;
    margin-left:auto;
    margin-right:auto;
    .BaxMenuBarFixedCentered br {
    clear:both;
    display:block;
    .BaxMenuBarFixedCentered .SubMenu br {
    display:none;
    .BaxMenuBarFullwidth {
    float: left;
    width: 100%;
    #BaxMenuBar .MenuItemContainer {
    padding: 0px;
    margin: 0;
    #BaxMenuBar .MenuItem {
    padding: 0px 14px 0px 0px;
    background-color:#000000;
    border-width:1px;
    border-color: #fff;
    border-style: none solid none none;
    #BaxMenuBar .MenuItemFirst {
    border-style: none solid none none;
    #BaxMenuBar .MenuItemLast {
    border-style: none solid none none;
    #BaxMenuBar .MenuItem .MenuItemLabel {
    text-align:center;
    line-height:1.4em;
    color:#fff;
    background-color:#000;
    padding: 6px 15px 6px 29px;
    width: 10em;
    width:auto;
    .SpryIsIE6 #BaxMenuBar .MenuItem .MenuItemLabel {
    width:1em;
    #BaxMenuBar .SubMenu .MenuItem {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 10px;
    font-style: normal;
    background-color:#666;
    padding:0px 2px 0px 0px;
    border-width:1px;
    border-color: #fff;
    border-style: solid solid none solid;
    #BaxMenuBar .SubMenu .MenuItemFirst {
    border-style: solid solid none solid;
    #BaxMenuBar .SubMenu .MenuItemFirst .MenuItemLabel {
    padding-top: 6px;
    #BaxMenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
    #BaxMenuBar .SubMenu .MenuItemLast .MenuItemLabel {
    padding-bottom: 6px;
    #BaxMenuBar .SubMenu .MenuItem .MenuItemLabel {
    text-align:left;
    line-height:1em;
    background-color:#666;
    color:#ffffff;
    padding: 6px 12px 6px 5px;
    width: 7em;
    width:auto;
    #BaxMenuBar .MenuItemHover {
    background-color: #666;
    border-color: #fff;
    #BaxMenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel {
    background-color: #666;
    color: #fff;
    #BaxMenuBar .MenuItemHover .MenuItemLabel {
    background-color: #666;
    color: #fff;
    #BaxMenuBar .SubMenu .MenuItemHover {
    background-color: #999;
    border-color: #fff;
    #BaxMenuBar .SubMenu .MenuItemHover .MenuItemLabel {
    background-color: #999;
    color: #fff;
    #BaxMenuBar .SubMenuVisible {
    background-color: #666;
    min-width:100%;
    border: #fff 0px none;
    #BaxMenuBar.MenuBar .SubMenuVisible {
    top: 100%;
    left:0px;
    z-index:10;
    #BaxMenuBar.MenuBarVertical .SubMenuVisible {
    top: 0px;
    left:100%;
    min-width:0px;
    #BaxMenuBar .MenuLevel1 .SubMenuVisible {
    background-color: #666;
    min-width:0px;
    top: 0px;
    left:100%;
    .SpryIsIE6 #BaxMenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel {
    background-color: #666;
    color: #fff;
    .SpryIsIE6 #BaxMenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel {
    background-color: #999;
        color: #fff;
    .SpryIsIE6 #BaxMenuBar .SubMenu .SubMenu {
    margin-left: -0px;
    /*menu bar end*/

    I must have looked at it in another browser, sorry.
    Had another look at it and indeed it may become an issue in IE9, but because IE9 is still in beta, anything can change.
    Watch this space.
    Gramps.
    Oh, you could always add <meta http-equiv="X-UA-Compatible" content="IE=7" /> to your document.

  • Spry Menu Bar Positioning Problem in IE

    I have a Dreamweaver-created Spry Menu Bar drop down menu which works perfectly in every browser on my Mac and on my PC . . . EXCEPT Internet Explorer (who woulda thunk it?!!)
    In all browsers except for IE, the 3 submenu items under "Door Systems" and "Gallery" appear exactly as they should in a vertical row, positioned just below the brown line below the navigation links and all the same width. But in IE they appear higher up and with different widths. IE is ignoring the rules for width and position.
      <ul id="MenuBar2" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="closet_doors_gallery.html">DOOR SYSTEMS</a>
          <ul>
            <li><a href="sliding_doors_nyc_nj.html">DOOR PROFILES</a></li>
            <li><a href="bifold_doors_nyc_nj.html">PANELS COLORS</a></li>
            <li><a href="room_dividers_nyc_nj.html">DOOR SYSTEM TYPES</a></li>
          </ul>
        </li>
      </ul>
    <ul id="MenuBar3" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="#">GALLERY </a>
          <ul>
            <li><a href="#">SLIDING DOORS</a></li>
            <li><a href="#">BI-FOLD DOORS</a></li>
            <li><a href="#">ROOM DIVIDERS</a></li>
          </ul>
        </li>
      </ul>
    Here is the page where you can see the problem if you view it with IE, and see that it's  fine in Safari, and Firefox,    Chrome and Opera, Mac or PC:
    http://2113web.com/indeco/index.html
    I have a feeling it's a simple fix of the css, but I can't figure it out - I would really appreciate anyone's help with it - thank you!
    Below is the CSS:
    @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;
        font-size: 100%;
        font-weight:bold;
        cursor: default;
        width: 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: auto;
        float: left;
        white-space: nowrap;
    /* 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-size: 100%;
        z-index: 1020;
        cursor: default;
        width: auto;
        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;
        top: 63px; /*THIS POSITIONS THE SUBMENU BELOW THE TOP MENU*/
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        float: none;
        background-color:#f5f5e8;
        height:25px; /*THIS POSITIONS THE SUBMENUS HEIGHT*/
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin-top: -5%;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 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:none;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: transparent;
        padding: 0.5em 0.75em;
        color: #59330d;
        text-decoration: none;
    /* 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: transparent;
        color: #afa06f;
    /* 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
        background-color: transparent;
        color: #afa06f;
    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%;
    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
        background-image: url(SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    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
        background-image: url(SpryMenuBarDownHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    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
        background-image: url(SpryMenuBarRightHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    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;
    Perry

    Hi and thank you very much. It was a little confusing as to whether you meant to add the rules you suggested or to replace them, or a combination of both, but I puzzled it out. I created a new MenuBarHorizontal.css file in a blank page and then made the changes you suggested and it works! Yay! I had to do a bit of tweaking to get it to look just the way I wanted, but it now works correctly in ie 7 and 8 and still works fine in everything else.
    Interestingly enough, I had to change the margin-top: 63px; rule in "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible" to 40px to get it positioned properly vertically, and I had to get rid of the "border-bottom: solid 1px #EEE;" in "ul.MenuBarHorizontal ul li", which caused the submenu items to have quite a lot of vertical space between them - I'm not sure why!
    I also had to get rid of all the syling rules in the "SUBMENU INDICATION: styles if there is a submenu under a given menu item" section, as well as the one you added: "ul.MenuBarHorizontal a.MenuBarItemSubmenu {
        padding: 0.5em 2em 0.5em 0.75em;"
    With that done, it works great in both ie7 and ie8, so thank you for the help. Below is the new css that works, in total.
    Not being as familiar with the subtleties of CSS as you and many others obviously are, I'm REALLY curious as to exactly what is different that causes this to work now, and would be happy to hear your expanation, if you feel like taking the time to explain. If not, no problem - it works and that is the most important thing! So, thank you again -
    Perry
    @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;
        font-size: 100%;
        cursor: default;
        width: 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: auto;
        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-size: 100%;
        z-index: 1020;
        cursor: default;
        width: auto;
        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;
        margin-top: 40px;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        display: block;
        float: none !important;
        width: auto;
        white-space: nowrap;
    /* 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: #f5f5e8;
        padding: 0.5em 0.75em;
        color: #333;
        text-decoration: none;
    /* 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: #f5f5e8;
        color: #afa06f;
    /* 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
          background-color: #f5f5e8;
        color: #afa06f;
    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
    /* 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;
        z-index: 1010;
        filter:alpha(opacity:0.1);
        background: transparent;
    /* 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;

  • Spry Menu Bar 2.0 auto-width issues for sub items

    I am testing the spry menu bar 2.0 and it displays perfectly in IE 9.0/8.0 but the auto width is not working for Firefox (testing 3.6.16), Chrome (testing 10.0.648.205), or Safari for windows.  Content is being driven by PHP and MySQL.  This is the first time I have come across something working better in IE than the other browsers.  Great job on the IE patch script.  How do I get the other browsers to cooperate?  I moved the in page CSS generated by the widget browser to it's own CSS (called spry_menubar2_horizontal_sample_layout.css) and am including the files below in the head.  The links below point to an exact copy of the files as the working copy of the files is located elsewhere.
    SpryMenuBasic.css - link
    SpryMenuBasicSkin.css - link
    spry_menubar2_horizontal_sample_layout.css - link
    SpryDOMUtils.js - link
    SpryDOMEffects.js - link
    SpryWidget.js - link
    SpryMenu.js - link
    SpryMenuBarKeyNavigationPlugin.js  - link
    SpryMenuBarIEWorkaroundsPlugin.js - link
    the in page script is loacated directly under the <ul> lists.
    Similar example with php removed:
    <div id="navigation">
        <ul id="MenuBar">
          <li> <a href="http://www.videoonpointe.com/">Home</a> </li>
          <li> <a href="#">Gallery</a>
          <ul>
            <li> <a href="#">View Gallery</a></li>
            <li> <a href="#">Select Gallery</a>
              <ul>
            <li> <a href="#">Main Gallery</a>
              <ul>
                <li> <a href="#">a gallery</a></li>
            </ul>
            </li>
          </ul>
          </li>
            <li> <a href="#">Edit this Gallery</a></li>
            <li> <a href="#">Create Gallery</a> </li>
            <li> <a href="#"  onClick="return confirm('This action cannot be undone. Are you sure?');">Delete this Gallery</a></li>
          </ul>
          </li>
                <li> <a href="#">Photo</a>
              <ul>
                <li> <a href="#">Edit Photo</a> </li>
                <li> <a href="#"  onClick="return confirm('Deletion of this image cannot be undone. Are you sure?');">Delete Photo</a> </li>
                <li> <a href="#">Set as Gallery Thumbnail</a> </li>
                <li> <a href="#">Change Watermark</a> </li>
              </ul>
              </li>
          <li> <a href="#">Pricesheet</a>
            <ul>
              <li> <a href="#">Pricesheet Admin</a> </li>
        </ul>         
          </li>
       </ul>
    <script type="text/javascript">
      var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
               widgetID: "MenuBar",
               widgetClass: "MenuBar  MenuBarLeftShrink",
               insertMenuBarBreak: true,
               mainMenuShowDelay: 100,
               mainMenuHideDelay: 200,
               subMenuShowDelay: 200,
               subMenuHideDelay: 200
    </script>
    </div>
    Has anyone encountered this issue before?  Any thoughts on how it can be fixed?  Thank you for your help.

    I am surprised no one has responded yet.  Surely someone has encountered this before.  Any thoughts?

  • 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.

  • Alignment Issues with Spry Menu Bar in Safari

    www.laurentambard.com    
    I am new to CS5 and currently building a site for a friend.  Having issues with aligning then far right spry menu bar so that it is flush with the page.  It only shows a problem on Safari (as far as I know).  Also the second tab (About) is dropping down slightly when the drop down menu is selected and not sure how to fix it.

    If you place the menubar in a container with an ID of nav or similar and a background color of #EEE so that it blends in with the background colour of the menu items, the centralise the menubar and menu items as per http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml, it should go a long way to meeting your requirements.
    Gramps

  • Pulling my hair out over IE8 issues with spry menu bar

    Its a classic story, but for the life of me, I can't figure this out.  I've seen it in a hundred different forums (all slightly different versions of the same problem) .  I've put together a horizontal spry menu bar (version 1.6.1).  It works fine in Chrome, Safari, Firefox, etc..., but goes nuts in IE.
    layout and positioning of the submenus cascades horizontally, goes far right, etc.
    A sample of the menu sits at http://www.alaskanrafting.com/mockup/newindex.html
    I'm sure it's just a line or two in my CSS, but I sure can't find it.
    the CSS sheet would be at http://www.alaskanrafting.com/mockup/SpryAssets/SpryMenuBarHorizontal.css
    If anyone has any pointers, I would greatly appreciate it.
    Thanks

    Try adding/modifying the following
    ul.MenuBarHorizontal ul li {
        display: block;
        float: none !important;
        width: auto;
        white-space: nowrap;
        border-bottom: solid 1px #EEE;
    There needs to be an !important for the float so that it overrides the JS.
    Gramps

  • IE Browser Issue with Spry Menu Bar {screen-capture attached}

    Hi there, my horizontal spry menu bar is messing up when viwed in Internet Eplorer, HTML shows no errors, after extensive testing still cant find a solution.  As you will be aware IE is a popular browser so its imperative i resolve the issue.  The site is http://www.theboxinghistorian.com/
    View in Chrome and Firefox
    View in Internet explorer (IE)
    Here is the HTML code
    Hope this is enough information for a solution.
    Thank you for your time
    Mark

    I've never used Spry, so take this with a huge grain of salt.. looking at your html, I am kinda wondering how come the 2nd level of the nested list items making up your submenu items arent assigned a different css style - and therefore is your css file setup to handle this change in orientation properly..
    You got a class=MenuBarSubItem" on your Championship History, but theres nothing in your html (other than the nested ul within #Menubar1) to indicate that Heavyweight, Cruiserweight, etc. are 2nd Level MenuItems which should be using a different css style.. therefore it would be up to your CSS to handle this change in how these 2nd level sub menu items gets displayed.. looks like this isn't happening for MSIE, as MSIE keeps floating your 2nd level/submenu items horizontally instead of stringing them up vertically.. You may be missing a style rule in your css, but how come FF gets it right?
    If I were to recreate this menu myself, I would assign a new css class to make sure my submenu items dont end up floated next to each other.. But then again, i have no clue about Spry, so I might just be rambling nonsense here...

  • 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"

  • Spry Menu Bar killed by absolute/relative positioning

    I have a Spry Menu Bar that works beautifully on most pages
    of my site, but it does not function at all – not even the
    top-level links – on
    this
    page where I have used relative and absolute positioning of
    other objects to create CSS image rollovers.
    If I comment out the link to the CSS file, the menu bar works
    normally. Also, if I comment out any of the positioning rules in
    the CSS file, the menu bar functions as usual – but I want my
    image rollovers.
    I have tried giving the other elements a lower z-index, and a
    higher z-index, but this did not help. Any ideas?

    I have a Spry Menu Bar that works beautifully on most pages
    of my site, but it does not function at all – not even the
    top-level links – on
    this
    page where I have used relative and absolute positioning of
    other objects to create CSS image rollovers.
    If I comment out the link to the CSS file, the menu bar works
    normally. Also, if I comment out any of the positioning rules in
    the CSS file, the menu bar functions as usual – but I want my
    image rollovers.
    I have tried giving the other elements a lower z-index, and a
    higher z-index, but this did not help. Any ideas?

  • Problem with spry menu bar position:fixed?

    Hello technical heros,
    I'm having trouble with my website's spry menu bar... here is the site.
    As you can see, when you scroll down, the spry menu overlaps the header fixed block, which the rest of the content smoothly scrolls under. How do I tell the spry object to do the same?
    I also want the sidebar 2 (menu bar) to be a fixed block like my header and footer. I know how to do this, but when I change the css, it throws my spry menu over to the left of the page, ontop of my sidebar 1.
    Help, please!!

    Hi,
    Have a look here: http://www.w3schools.com/Css/css_positioning.asp
    I hope this helps.
    Ben

  • SPRY MENU BAR ISSUE

    Why does my spry menu bar look fine on my computer/my browser, but co-workers browsers show the menu and it's all messed up? Below is my code.
    <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a class="MenuBarItemSubmenu" href="#">ADULTS</a>
              <ul>
                <li><a href="/SIDE BAR OPTIONS/ADULT REC/ADULT REC.html">ADULT REC</a></li>
                <li><a href="/SIDE BAR OPTIONS/ADULT TRAINING FACILITIES/AdultTrainingFacilities.html">ADULT TRAINING FACILITIES</a></li>
                <li><a href="/SIDE BAR OPTIONS/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
                <li><a href="/SUBNAVMENU/FAMILY LIVING/FAMILY LIVING.HTML">FAMILY LIVING</a></li>
                <li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">SUMMER REC</a></li>
              </ul>
            </li>
            <li><a class="MenuBarItemSubmenu" href="#">YOUTH</a>
              <ul>
                <li><a href="/SUBNAVMENU/AFTER SCHOOL PROGRAM/AfterSchool.html">AFTER SCHOOL PROGRAM</a></li>
                <li><a href="/SUBNAVMENU/AKTION CLUB/AktionClub.html">AKTION CLUB</a></li>
                <li><a href="/SUBNAVMENU/CHALLENGER/Challenger.html">CHALLENGER BASEBALL</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 & 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/TouringFriends.html">TOURING FRIENDS</a></li>
                <li><a href="/SUBNAVMENU/EVENTS/AnnualPicnic.html">ANNUAL PICNIC</a></li>
              </ul>
              <li><a class="MenuBarItemSubmenu" href="#">OTHER</a>
                  <ul>
                    <li><a href="/SUBNAVMENU/EDUCATION & THERAPY/EducationandTherapy.html">EDUCATION & 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><a class="MenuBarItemSubmenu" a href="#">EMPLOYEES</a>
                 <ul>
                 <li><a href="/SUBNAVMENU/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
                    <li><a href="/SUBNAVMENU/MEET OUR STAFF/MeetOurStaff.html">MEET OUR STAFF</a></li>
                     <li><a href="/SUBNAVMENU/EMPLOYEE ACCESS/AccessPage.html">EMPLOYEE ACCESS</a></li>
              </UL>     
          </ul>

    Have a look at lines 212 and 213 which read as follows
    <script src="file://///SNCentral/Home/akaniecki/My Documents/Web Site Root Folder/Templates/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="file://///SNCentral/Home/akaniecki/My Documents/Web Site Root Folder/Templates/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    The red part shows the URL to the files. However, these files point to your locahost.
    In your template, The links should look like
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    Also make sure that the files do exist in the remote SpryAssets folder.

Maybe you are looking for