Dreamweaver CS5 Spry Menu problem;

Hi, I'm doing a web-site project for my Web Design class, and I ran into a problem. In Dreamweaver my spry menu only shows one part of the menu, but when I go to preview it, its perfectly normal. When I turned it into my teacher he sees the spry menu just like the one in Pic 2. I can't really upload it to a public domain/website because I can't at school. The way we see websites is by transfering folders into the teachers folders and click the index.html. Is there any way to fix this?
Code if needed:
<!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>Kelsey's Page</title>
<style type="text/css">
body {
background-color: #EBF2FE;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center"> </td>
  </tr>
  <tr>
    <td align="center"><img src="asdasdawe.jpg" width="907" height="331" /></td>
  </tr>
  <tr>
    <td width="100" align="center"><ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.htm">Home</a>        </li>
      <li><a href="#" class="MenuBarItemSubmenu">Portfolio</a>
        <ul>
          <li><a href="enterport1.html">Personal</a>            </li>
          <li><a href="enterport2.html">New PRHS</a>            </li>
          <li><a href="enterport3.html">Performance</a>            </li>
          <li><a href="enterport4.html">Teacher</a>            </li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Schedule</a>
        <ul>
          <li><a href="enterweb.html">Web Design</a>            </li>
          <li><a href="enterani.html">Animation</a></li>
          <li><a href="enterlatin.html">Latin 4</a></li>
          <li><a href="enterapush.html">APUSH</a></li>
        </ul>
      </li>
      <li><a href="derp.htm">Derp</a></li>
    </ul></td>
  </tr>
  <tr>
    <td align="center"> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td><img src="bigpic2.jpg" width="910" height="510" /></td>
  </tr>
</table>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

We can't view or "fix" your teacher's folder.
Why not be a rebel, find yourself some free hosting,
upload all your files and post a link for us.

Similar Messages

  • Dreamweaver Vertical Spry Menu Problem in IE7

    I just finished setting up a vertical, 3-level spry menu in
    Dreamweaver CS3, and when I preview it in IE7, several pixels have
    been added in between the buttons, which spreads the menu out and
    looks terrible. The problem disappears after I clear the ActiveX
    warning, and it doesn't occur in FF. Could someone please tell me
    how to fix this??
    Here's my SpryMenuBarVertical.css file:
    @charset "UTF-8";
    /* SpryMenuBarVertical.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, a fixed width box
    with no margin or padding */
    ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 0.8em;
    cursor: default;
    width: 150px;
    /* 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 same fixed width as parent */
    ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 150px;
    /* Submenus should appear slightly overlapping to the right
    (95%) and up (-5%) with a higher z-index, but they are initially
    off the left side of the screen (-1000em) */
    ul.MenuBarVertical ul
    margin: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    left: -1000em;
    top: 0;
    /* Submenu that is showing with class designation
    MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
    background-image:url(../images/topnav-up-165.gif);
    background:#FFFFFF;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Menu items are a light gray block with padding and no text
    decoration */
    ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #FFFFFF;
    background-image:url(../images/topnav-up.gif);
    padding: 0.3em 0.3em;
    color: #333;
    text-decoration: none;
    /* Menu items that have mouse over or focus have a blue
    background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #FFFFFF;
    color: #333;
    /* Menu items that are open with submenus are set to
    MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
    a.MenuBarItemSubmenuHover, ul.MenuBarVertical
    a.MenuBarSubmenuVisible
    background-color: #FFFFFF;
    color: #333;
    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.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(../images/topnav-up.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-color: #038203;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #666666;
    border-top-width: 2px;
    border-top-color: #FFFFFF;
    border-right-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #666666;
    border-left-color: #FFFFFF;
    /* 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.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(../images/topnav-dn.gif);
    background-repeat: no-repeat;
    background-position: 0% 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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;

    I just finished setting up a vertical, 3-level spry menu in
    Dreamweaver CS3, and when I preview it in IE7, several pixels have
    been added in between the buttons, which spreads the menu out and
    looks terrible. The problem disappears after I clear the ActiveX
    warning, and it doesn't occur in FF. Could someone please tell me
    how to fix this??
    Here's my SpryMenuBarVertical.css file:
    @charset "UTF-8";
    /* SpryMenuBarVertical.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, a fixed width box
    with no margin or padding */
    ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 0.8em;
    cursor: default;
    width: 150px;
    /* 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 same fixed width as parent */
    ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 150px;
    /* Submenus should appear slightly overlapping to the right
    (95%) and up (-5%) with a higher z-index, but they are initially
    off the left side of the screen (-1000em) */
    ul.MenuBarVertical ul
    margin: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    left: -1000em;
    top: 0;
    /* Submenu that is showing with class designation
    MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
    background-image:url(../images/topnav-up-165.gif);
    background:#FFFFFF;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Menu items are a light gray block with padding and no text
    decoration */
    ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #FFFFFF;
    background-image:url(../images/topnav-up.gif);
    padding: 0.3em 0.3em;
    color: #333;
    text-decoration: none;
    /* Menu items that have mouse over or focus have a blue
    background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #FFFFFF;
    color: #333;
    /* Menu items that are open with submenus are set to
    MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
    a.MenuBarItemSubmenuHover, ul.MenuBarVertical
    a.MenuBarSubmenuVisible
    background-color: #FFFFFF;
    color: #333;
    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.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(../images/topnav-up.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-color: #038203;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #666666;
    border-top-width: 2px;
    border-top-color: #FFFFFF;
    border-right-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #666666;
    border-left-color: #FFFFFF;
    /* 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.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(../images/topnav-dn.gif);
    background-repeat: no-repeat;
    background-position: 0% 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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;

  • Dreamweaver CS4 SPRY Menu Problems in IE

    I am trying to have a drop-down menu on my site using the SPRY option in Dreamweaver CS4. In all browsers it looks exactly like it should. Unofrtunately in IE it pops out to the side instead of down. Anyone know a fix around this. The site is http://mtltechnologies.com/
    Here is the SPRY 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: 12px;
        cursor: default;
        width: auto;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    /* 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: 154px;
        float: left;
        height: 25px;
    /* 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;
        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: 154px;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        padding: 5px;
        color: #FFF;
        text-decoration: none;
        background-image: url(../images/button_bg.jpg);
        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;
        background-image: url(../images/button_bg_down.jpg);
    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(../images/button_bg.jpg);
    /* 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(../images/button_bg_down.jpg);
        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(../images/button_bg_down.jpg);
        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;
    Anyone know a fix?
    Thanks,

    The code is too long. Let's do it this way, did you change anything on the default css of the SPRY menu?
    just my thought, why don't you remove it from the table? That might be the cause. Try to think of an alternative way like using divs and css.

  • Dreamweaver cs5 .spry menu bar

    Hola que tal a todos
    necesito ayuda con esto. estoy haciendo una pagina en la cual me piden que tenga submenús , entonces utilize la spry bar y me quedo muy bien pero cuando lo subo al hosting , se ve muy mal, no se ve como deberia  .
    por que pasa eso ? como lo soluciono? existen otras opciones para hacer eso ?
    gracias!

    Hola Iris,
    he intentado su código en un horizontal "Menú Spry", para usar su entretenimiento y que "menu.jpg". Se parece a esto:
            <td colspan="5" align="center" valign="top"><p><img src="menu.jpg" alt="" width="990" height="124" border="0" usemap="#Map" id="Image1" /></p>
              <ul id="MenuBar2" class="MenuBarHorizontal">
                <li><a class="MenuBarItemSubmenu" href="index.html">Inicio</a>
                  <ul>
                    <li><a href="#">Element 1.1</a></li>
                    <li><a href="#">Element 1.2</a></li>
                    <li><a href="#">Element 1.3</a></li>
                  </ul>
                </li>
                <li><a href="nosotros.html">Nosotros</a></li>
                <li><a class="MenuBarItemSubmenu" href="#">Servicios</a>
                  <ul>
                    <li><a class="MenuBarItemSubmenu" href="#">Element 3.1</a>
                      <ul>
                        <li><a href="#">Element 3.1.1</a></li>
                        <li><a href="#">Element 3.1.2</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Element 3.2</a></li>
                    <li><a href="#">Element 3.3</a></li>
                  </ul>
                </li>
                <li><a href="#">Experiencia</a></li>
                <li><a href="certificado.html">Certificado de Confiabilidad</a></li>
                <li><a href="#">Notcias</a></li>
    <li><a href="contacto.html">Contacto</a></li>
              </ul>
    DW también crea la siguiente línea:
        <td height="50" align="center" valign="top"><img src="abajo.png" width="990" height="50" /></td>
      </tr>
    </table>
    <script type="text/javascript">
    swfobject.registerObject("FlashID");
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    Todo esto se parece a esto (se debe usar "SpryMenuBarHorizontalPer.css" adaptadas de forma natural, incluso a sus propias necesidades):
    Una pequeña nota de paso: Por varias razones, espacios y caracteres especiales en nombres de archivo o la imagen no está bien. Por favor, no: "Análisis de entorno social y situación patrimonial.html" pero en cambio, el uso de subrayado o de separación con letras mayúsculas.
    Por ejemplo: "AnalisisDeEntornoSocialYSituacionPatrimonial.html"
    Hans-Günter
    Post Scriptum: Por favor, escriba en el foro por lo que también puede obtener consejos de otros voluntarios.

  • Spry menu problem - CS6 Dreamweaver

    I wonder if anyone can help me with my spry menu problem which I have with a fixed 960px wide horizonal menu bar that has 8 items in it. The sub-menus don't seem to display properly when you click on them in that some of the submenus only show up at the end of the menu bar itself in Explorer browsers 8/9. Does anyone know of any code I can apply to fix this problem? I am new to spry menu features and so any help would be very much appreciated.

    Also validate the rest of the code in your pages to see if you have any critical errors that need fixing.  For example, a missing doc type declaration might explain Spry failures.
    CSS - http://jigsaw.w3.org/css-validator/
    HTML - http://validator.w3.org/
    As an FYI, Adobe abandonded the Spry Framework late last year, after CS6 was released because Spry drop-menus don't hold up well on touch screen devices.   If you can't get satisfaction with Spry, try jQuery Superfish.  It's a better menu system.
    http://users.tpg.com.au/j_birch/plugins/superfish/
    Nancy O.

  • Dreamweaver CS5 and xampp problem

    Hi folks,
    i had cs5 trial installed on my last laptop
    running vista 32bit
    with xampp, i could edit wordpress files
    no problem,
    but i just got a new laptop
    now running windows 7 64bit,
    i installed cs5 trial fine and xampp.
    I just went to edit wordpress files for the first time
    and when i go to index.php as soon as i go to
    'discover' i get dreamweaver 'not responding'
    and it doesn't respond.
    Anybody have any ideas?
    Thanks
    Daniel

    Thanks for the reply,
    there was an update for dreamweaver yesterday which fixed my problem,
    i don't know why because the update was for browserlab and dreamweaver compatibility or something like that,
    but it fixed my problem and now the files load instead of the program (not responding)
    so now i'm happy lol.
    Daniel
    Date: Fri, 21 May 2010 15:10:16 -0600
    From: [email protected]
    To: [email protected]
    Subject: dreamweaver CS5 and xampp problem
    Unfortunately I can't help you. But if it's any consolation, you are not alone. I am suffering from same symptom except it happens with any dynamic site I need to work on. And it doesn't matter whether the sites are local or remote.
    I am running Windows 7 64bit as well in both of my machines, desktop (AMD) and laptop (Intel), and this happens on both of them and with any dynamic site, Joomla! for instance.
    >

  • Help with Dreamweaver CS5 spry menus. Menu is not dropping down in IE7.

    Hello.
    We recently upgraded from GoLive CS3 to Dreamweaver CS5. Wow! This has been a big change for us. We are having trouble with a website that we are building, specifically the Spry Menu drop downs not appearing correctly in IE7 and older. While the dropdown menu appears in other browsers, it is not dropping down at all in IE7 and earlier versions. After researching this topic on many websites, including this forum, we are still unable to resolve our particular issue. We have tried many of the suggestions that are common to our problem, but have not found a solution as yet. Could someone please check out this page for us, and possibly give us some advise. We are working on Mac OSX. Thank you in advance for any suggestions you may offer.
    http://www.advertools.net/pgtdemo/index.html

    When I added the following to the document
    <style>
    #main_image {position:static;}
    </style>
    the menu items appeared albeit in the wrong position.
    The reason for the hidden menu items is because #main_image had a position of relative, effectively creating a flow of its own rather than following the natural flow of the document.
    Now for the postion of the submenu. If I add the following style rules to the document the submenu items are in the correct position
    ul.MenuBarHorizontal li {text-align: left;}
    ul.MenuBarHorizontal a {text-align: center;}
    In the first line I have reset the rule that you had changed to center align and in the second line (which is not in the original CSS) I have aligned the text in the anchor tag to align center.
    The reason is that IE<8 behaves differently to other browsers when it comes to list items causing the nested list items (submenu) to align themselves to the center of the text of the parent list item.
    I hope the above helps.
    Gramps

  • Spry Menu problem with using a transparent background image

    Hi-  I'm new to CS5 and Dreamweaver. I just finished the beginning webpage tutorial and I have started to work on a personal project. The Problem: when I use a transparent png image as a backgroun-image for my spry menu it shows up fine in live view, but doesn't work in browser view (safari), in fact the menu reverts to it's original grey and blue boredom. Does anyone have a solution for me? Does this mean it will be grey and blue when it goes live? Thanks, Ruth333333

    Please supply a link to your site.
    Gramps

  • Spry menu problems. Please help.

    Hello,
    I am new to web design so please try and be patient with me . 
    I am trying to create a horizontal spry menu bar into a new page.  Even though I select horizontal, the menu is vertical.  I have read through many previous posts and FAQ'q, but cannot find the answer.  It is not just in IE, it is in every browser and dreamweaver itself.  I am using 5.5.
    UPDATE-- If I create the spry into a new blank HTML document, it works just fine. So I imagine it is something to do with the template?
    Heres the code:
    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: 8em;
              float: none;
    /* 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;
    /* 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: #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: #33C;
              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
              background-color: #33C;
              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%;
    /* 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;
    ul.MenuBarHorizontal {
              width:8em;
              margin: auto;
    And this is the HTML for the menu bar when insterted into a page:
    InstanceBeginEditable name="Header" -->
                <div class="Header">
                  <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>
                </div>
                <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="Main Content" -->
    Thank you for any and all help!
    Nick

    Ok so I decided to make a nice menu through fireworks.
    This confuses me even further, how did you make a SpryMenuBar through FW?
    It now works, but the links to the drop down menu are not horizontal in the drop down menu.
    So it doesn't work
    And this is only when trying to enter it into the template, into a new HTML it works fine..So it does work
    Unforuntely I cannot post the website
    Well, our worries are over, there is no need to correct the problem, no one will ever see the website.
    Yes, I am being facetious.
    In all seriousness, you can upload the website to a temporary location. This way we will be able help you.
    Have a happy New Year!
    Gramps

  • Spry menu problems

    When inserting spry accordion and spry collapsible menus from
    dreamweaver cs3 in a blank html page i get a javascript error and
    continue to get them making the use of these spry menus unworkable.
    The error says" While executing inspectSelection in
    spry_accordion.htm, a Javascript error occured." Does anyone know
    of a fix to this problem?

    Hi Lucaandluna,
    Well the website page I have linked was done in Dreamweaver
    MX (think thats version 8) and I used the Pop Up Menu behaviour in
    that program. Its a great little tool and you can change the sub
    menu text and box size and much more. BUT I can not easily copy
    this to other pages as when I do copy it looses all the information
    on the Drop down menu. Thus for every page on my website I have to
    change each Drop Down menu by hand which is a very time consuming
    process. Thus I want to use a CSS menu system so I only have to
    updage the Drop Down menu once for the whole site.
    So I have the same problem with the sub menu text, I can't
    seem to figure out how to make the colour different from the main
    menu. For the look of my Spry Menu I have been altering the Spry
    CSS file. IF you don't want thos little arrows then look in the CSS
    file for something called Submenu Indication. There you will find
    the Gif files for the arrows, delete the ones u don't want.

  • Spry menu problem with div

    when I try to place a horz. spry menu into a div, it hops outside the container.

    I went back to the thread but could not figure out how to respond.
    The site was originally built using AP Divs (including a spry menu bar). It appeared that the new menu “hopped” because the absolute position was still within the code – is that possible?
    I created a new spry asset folder and started over. As you can see, it’s in the div just fine, but the buttons (font size, hover, etc.) are all messed up and I can’t figure out how to fix the problem.
    http://www.hoistco.com/test3.html
    Thanks for your help.

  • Spry menu problems in IE

    I recently changed my menu on my site to be a spry menu. My problem is that in IE the menu messes up after the drop down menu. Everything after the drop down moves underneath the menu bar and changes to just hyperlinked text. The menu works fine in all other browsers, The site is corinth-baptist.net  any help would be greatly appreciated!!

    Your markup is screwed up. Compare yours with the following
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
        <ul>
          <li><a href="about us.html">About Us</a>
          <li><a href="calendar.html">Calendar</a></li>
          <li><a href="bus ministry.html">Bus Ministry</a></li>
          <li><a href="subscribe.html">Newsletter</a></li>
        </ul>
      </li>
      <li><a href="directions.html">Directions</a>
      <li><a href="sermons.html">Sermons</a></li>
      <li><a href="contacts.html">Contacts</a></li>
      <li><a href="gallery.html">Gallery</a></li>
    </ul>
    Gramps

  • Spry menu problem suggestions?

    My horizontal spray menu on my website at www.goodimage.com under images/kids or images/pets shows kids and pets on same line. This appears correct when looking at the source layout, the live view layout but when put on my site it looks bad with both kids and pets on the same menu line.
    Any suggestions? HLower

    There are a few problems with the main stylesheet - and in the spry menu stylesheet:
    http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. goodimage.com%2F
    When you moved the css from the head of the document you also included the style tags:  The code in red should be removed from the mygoodimage.css.
    <style type="text/css">
    all the styles here
    </style>
    ALSO:
    body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #;        <--------------------   an empty selector here.  you need to specifiy a color or remove the it altogether.
    SPRY MENU STYLESHEET:
    the IE Hack comment isn't closed - you need to add the bit in red to close off the comment - and the menu should work correctly in IE.
    /* 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;
        width: auto;
        background-image: url(../images/background_slate.gif);
    PS:  Some of these errors could also contribute to the template problem...  I've a template not work correctly due to errors either in the html or the css, so if you fix these and see how you go with the menu and then try the template again.

  • Dreamweaver CS6 - Spry Menu for iPhone

    Hi
    Seems that spry menu in CS6 doesn't work on iphone/pad?
    Can't open the submenu
    Greetings
    Philipp

    @c-studio.eu
    I have used all of the Spry framework, partially because they come free of charge with DW and partially because there are very strong components. All this despite their age.
    The strongest of these are the various dataset variations (XML, HTML, JSON, CSV and YQL) and Spry validation widgets.
    The weakest one is the menubar, mainly because it does not support touch screens, or conversely, touch screens do not have a hover event. Spry UI Menubar, also known as version 2.0, does have the ability to be used with touch screens, but because it is not integrated with DW, it is harder to modify once it has left the Widget Browser.
    The original menubar can still be used for touch screens if it is single level, i.e. there are no sub-menus or when a submenu is used, the main menu item does not link to another page as in
    <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
      <ul>
        <li><a href="about.html">Our Company</a></li>
        <li><a href="history.html">Company History</a></li>
        <li><a href="mission.html">Mission Satement</a></li>
      </ul>
    </li>
    The above will work in touch screen devices.
    As David has suggested, no real effort has been made by Adobe to further develop the framework, giving a strong impression that they will not support it in future versions of DW. Much is the pity.
    I tend to use jQuery substitutes, not because they are easier to use, but because they are free of charge and are kept up to date. Adobe has also invested in jQuery, particularly the mobile stuff.
    As far as commercial alternatives are concerned, there are a number of well-formed widgets out there, one that is used by a number of prominent forum users. Other available widgets come from  Webassist, DMXZone and CodeCanyon or if you Google the subject, your sure to find a few others.
    And to join others who have shown their preference, lately I have been using Webassist's CSS Menu Writer, http://www.webassist.com/dreamweaver-extensions/css-menu-writer/
    Gramps

  • Another spry menu problem with ie

    I dont know, but i have tried everything to getie to render the spry menu for my site : http://www.jtltours.com/proofing/, but no luch to date. As you may have seen , it works perfectly with firefox and chrome, but no luch for ie. It does'nt even seem to be rendering any css for the menu. Any help in the right direction is appreciated.

    Are you sure the issue is created by Spry? I have check out the source and there seems to be allooot of JavaScript includes. Which could potentially generate IE errors them selfs and make Spry MenuBars stop working.
    I haven't got IE on my machine so I can't verify it. But it might be worth looking at.

Maybe you are looking for