Spry Vert Menu - Submenu position in IE

Hi - I've waited for a week for an answer from the Spry
Framework discussion forum and no answer, so hope to get one here.
I've searched through numerous posts, but none of the solutions
seemed to work.
The problem: Spry vertical menu, when a secondary page is
loaded with the submenu visible, the sub moves to the top of the
div. It won't stay aligned with it's parent menu item. I tried
updating to Spry 1.6 and had more problems so backed up to 1.4.
Works fine in FF, Safari.
Sample Link: <
http://www.vwc.com/ATC138_test/industry-construction.html>
Thanks for any help.

Any help out there?

Similar Messages

  • Spry horizontal menu: submenu background problem in IE7

    Hello,
    I am using the Spry horizontal menu in this website: http://www.isis-papyrus.com
    It works perfectly on all current version browsers, but in IE7 the white submenu background only shows behind the actual text for each link and not to the border of the submenu box.
    I modified the css to allow for dynamic sizing for each submenu (see below). 
    Any suggestions would be greatly appreciated.
    Best, Oliver
    @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: 10px;
    cursor: default;
    width: auto;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: normal;
    /* 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;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 100%;
    clear:left;
        float: none;
    background-color: transparent;
        color: #fff;
    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: 100%;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #339999;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #fff;
    padding: 0.4em 0.8em;
    color: #339999;
    text-decoration: none;
    white-space: nowrap;
    /* 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: #fff;
    color: #339999;
    /* 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: #339999;
    color: #fff;
    /* 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;

    Thank you so much for your quick answer Beth!
    You solved half my problem!
    I added the bg-color to the li and ul styles of the submenus (css below) and now the white background shows correctly in IE7.
    The only thing I still would like to resolve: The hover style for the menu items (inverse bg and text colors) only works for the actual text of the link and not for the entire width of the submenu box.
    Any suggestions?
    Thank you again.
    Best, Oliver
    @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: 10px;
    cursor: default;
    width: auto;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: normal;
    /* 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;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 100%;
    clear:left;
        float: none;
    background-color: #fff;
         color: #fff;
    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: 100%;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #339999;
    background-color: #FFF;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #fff;
    padding: 0.4em 0.8em;
    color: #339999;
    text-decoration: none;
    white-space: nowrap;
    /* 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: #fff;
    color: #339999;
    /* 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: #339999;
    color: #fff;
    /* 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;

  • Horizontal Menu - Submenu position

    I have delayed the new version of my site because I was
    looking for the solution, but now, I couldn't wait anymore and it
    is online with the following problems on the horizontal menu bar:
    1- On IE, the submenus' position is wrong and becomes
    vertical when mouse is hovering.
    2- On all browsers (those I could test, at least) the second
    level of submenus appears above the first level, hiding it. (see
    "amateur" submenus for exemple)
    My website: www.thebaysoccer.com
    in case it helps, I copied the css below.
    Thanks in advance for your help! Sorry if the question looks
    stupid, but I'm learning and I didn't know anything about HTML when
    I started the site...Any help would be appreciated!
    @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: 12px;
    cursor: default;
    width: auto;
    font-family: "Arial Rounded MT Bold";
    /* 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: 12px;
    position: relative;
    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
    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;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 10em;
    background-color: transparent;
    /* Submenus should appear slightly overlapping to the right
    (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    /* 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: #333;
    padding: 0.5em 0.75em;
    color: #EEE;
    text-decoration: none;
    text-align: left;
    /* 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: #ef3121;
    color: #000000;
    width: auto;
    /* 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: #ef3121;
    color: #000000;
    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%;
    width: auto;
    /* 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;
    /* 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: #333333;

    Anybody can help?

  • Spry vertical menu bar positioning issue in IE

    I have been trying to fix a problem with my spry menu bar and have been looking for answers at several spry forums. I have modified my vertical spry menu to open submenus above and to the right of the main menu. It works in Opera, Firefox and Safari and opens below in IE. I tried changing the positioning from absolute to relative and that made it position itself below in all browsers. So, by deductive reasoning there seems to be something going on with IE when it reads the absolute positioning, is there a fix for this? You can see my website at raydlett.com the menubar is called STUDIO.
    Here is my vertical menubar CSS:
    @charset "UTF-8";
    /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* 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: 100%;
        cursor: default;
        width: 6.75em;
    /* 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: 6.75em;
    /* 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: 0 0 0 95%;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: absolute;
        z-index: 1020;
        cursor: default;
        width: 9.2em;
        left: -1000em;
        bottom:-1%;
    /* 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
        width: 9.2em;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
        border: 0px solid #fff;
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
        border: 0px solid #fff;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarVertical a
        display: block;
        cursor: pointer;
        background-color: #fff;
        padding: 0.5em 0.75em;
        color: #666;
        text-decoration: none;
    /* Menu items that have mouse over or focus have a white background and orange text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
        background-color: #fff;
        color: #FF4C00;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a white background and orange text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
        background-color: #fff;
        color: #FF4C00;
    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;
        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.MenuBarVertical li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;
    Here are the associated global.css components:
    body  {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 76%;
        padding: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        margin: 0;
        background: #fff;
        color: #666;
        text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
        line-height: 1em;
    #container {
        width: 880px;
        text-align: left;/* this overrides the text-align: center on the body element. */
        margin-right: auto;/* the auto margins (in conjunction with a width) center the page */
        margin-left: auto;
        margin-top: 0;
        margin-bottom: 0;
        position: relative;
        font-family: Verdana, Geneva, sans-serif;
    #header {
        font-size: 1em;
        padding-left: 17px;
        height: 26px;
        position: relative;
    ul {
        padding:0;
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 10px; /* used for both menubar 1 and 2 */
        margin-left: 20px;/* used for both menubar 1 and 2 */
    li {
        margin:0;
        padding:0 0 0 5px;/* used for both menubar 1 and 2 */
    I have also attached the index.html file that uses the modified "STUDIO" Spry MenuBar2
    Any help on this would be greatly appreciated. Thanks in advance.
    ribit10

    That makes sense, tooltips are tooltips, and appear at the tip of the mouse...But those "submenu triggers" can be simply styled links (as they are in a spry menu)...don't need to be swaps or images or image maps.
    What about a using show/hide behavior? Click the STUDIO and the menu pops up adjacent in an apDiv. Click a link. Or click the x to close the apDiv.
    You know this is just an exercise to run through all the Javascript and Spry that is in Dreamweaver, eh?
    By the way, just providing a link to your page is quite all you need to do. You don't need to attach your files or show pictures of them...by providing a link, I can save a web page in its entirety and open it in Dreamweaver.
    Beth

  • Accordion Menu - Submenu position issue

    Hello,
    I've created an accordion menu that resides in the top right corner of my website. I seem to be getting various undesired results when previewing the site.
    Desired layout: Build mode
    Undesired Result: Page Preview
    Undesired Result: Site Preview
    The top level sites work fine but when I move the submenu to the left of the menu using the X position, then preview the page or site, the submenus show up either right over the menu or way off to the left of the site, almost completely off the page. I have no idea why, please help.
    Jeff

    Hi Sanjit, thank you for your reply.
    The first image is a from the Design View, the second is a page preview in browser and the final image is a site preview in browser. My default browser is Safari (also testing in Chrome however).
    If I leave the menu with default settings, the submenus appear off the site's live area and when I preview they do not show up at all. Presumabley they are off to the right side of the site.
    The menu is and has been set to "All Pages" and not manually throught my build. Other than plaving the vertical menu widget within the accordion widget, it is more or less default with exeption of some styling.
    I will try to rebuild the menu and see if the problem is still occuring. If you have any further sugestions I would be happy to hear them.
    Thnaks again

  • Spry Vert Menu problem

    Hi,
    A little history... I am new to DW (CS3) and am trying to
    teach myself. I have built a couple sites prior so I know just
    enough to be dangerous... :)
    I have a site I am developing with a frameset layout. "fixed
    top, nested left" in DW terms.
    Problem: My left panel is my 'menu' html. When I create a
    vertical menu w/spry widget and has a menu with a submenu, the
    submenus seem to go 'behind' the main page or what I call the body
    of my webpage. Is there a way to have the menus 'float' over a
    bordering page on a frameset ? My description might be less than
    crystal so please ask what info is needed. This site is not posted
    anywhere so there is no code to inspect ..yet..
    TIA,
    B

    B_Nemo wrote:
    > A little history... I am new to DW (CS3) and am trying
    to teach myself. I
    > have built a couple sites prior so I know just enough to
    be dangerous... :)
    Obviously not enough to know that each frame in a frameset is
    a separate
    window. You cannot make the content of one frame display over
    the
    content of another. It's one of the many disadvantages of
    frames.
    David Powers, Adobe Community Expert
    Author, "The Essential Guide to Dreamweaver CS3" (friends of
    ED)
    Author, "PHP Solutions" (friends of ED)
    http://foundationphp.com/

  • Spry horizontal menu - submenu items are displaying laterally instead of vertically in IE

    I am currently building a website in Dreamweaver CS5 (on a mac) that includes a horizontal Spry menubar.  The drop down items appear vertically, as I want them to in Firefox, Safari, and Chrome, but not in Internet Explorer for Windows.  Instead, the items are listed laterally in IE.  How can I fix this?
    Here's a link to the page:
    http://dcsyc.org/
    Thanks!

    I'm not certain which attribute I changed, ive done a lot more coding since then, but if you open the CSS file linked above its in there somewhere. I'm pretty sure I set the submenus width to automatic to fix it, but I'm not 100%.
    ul.MenuBarHorizontal ul
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 12pt;
         z-index: 1020;
         cursor: default;
         width: auto;
         position: absolute;
         left: -1000em;
    I think its the width: auto; in that tag.
    On the plus side, the link to the CSS works, and the answer is in there somewhere.
    If you really cant figure it out, post again here and we'll put our heads togethe .

  • Spry Horizontal Menu Bar position change in different browsers

    Here is the page: http://pragati.de/index2.html
    There is a Horizontal Spry Menu Bar which is floating right.  In Dreamweaver CS5's Live View, the navigation menu appears perfectly in line with background image and same is the true when previewed in Google Chrome and Safari.  However when previewed in Firefox or Opera, the navigation menu appears a little below the background image and leaves kind of a dent which is clearly visible.  I have not yet tried it in IE.
    I have posted this question before but didn't find any solution.

    Here is the page: http://pragati.de/index2.html
    There is a Horizontal Spry Menu Bar which is floating right.  In Dreamweaver CS5's Live View, the navigation menu appears perfectly in line with background image and same is the true when previewed in Google Chrome and Safari.  However when previewed in Firefox or Opera, the navigation menu appears a little below the background image and leaves kind of a dent which is clearly visible.  I have not yet tried it in IE.
    I have posted this question before but didn't find any solution.

  • Spry Vert Menu: Weird top item display in DW design view

    Whenever I insert a vertical menu, the top Item always dispalys in Design View right justified (see attached image).  Really distracting. Displays fine once published.  Just bugging me?

    Thanks Ben.  Code below.  I didnt really think it wa simportant mainlyu because this is is the totally untweaked DW code dropped in
    after choosing a vertical menu spry via the wizard menu.  I did nothing to this code.  ANY menu I drop in thgru the wizard shows up like this initially - its the default drop in code from DW program itelf doing htis.
    <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
      <TR>
        <TD WIDTH="200" VALIGN="TOP" BACKGROUND="images/leftmenubg1.gif">
       <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0','widt h','200','height','215','src','flash/flashlogo','menu','false','quality','high','bgcolor', '#000000','pluginspage','http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Ve rsion=ShockwaveFlash','movie','flash/flashlogo' ); //end AC code
    </script><noscript><OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
          CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
          WIDTH="200" HEIGHT="215"><PARAM NAME="movie" VALUE="flash/flashlogo.swf"><PARAM
          NAME="menu" VALUE="false"><PARAM NAME="quality" VALUE="high"><PARAM
          NAME="bgcolor" VALUE="#000000"><EMBED SRC="flash/flashlogo.swf" MENU="false"
          QUALITY="high" BGCOLOR="#003366" WIDTH="200" HEIGHT="215"
          TYPE="application/x-shockwave-flash"
          PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></O BJECT></noscript>
         <BR>
                     <BR>
                <ul id="MenuBar1" class="MenuBarVertical">
                       <li><a href="index.html">Home</a>                   </li>
                       <li><a href="news_events/events/events.html">Events</a></li>
                       <li><a href="education/cme/cme.html">Publications</a>                   </li>
                       <li><a href="pda/index.html">Tools</a>                   </li>
                       <li><a href="disclosures.html">Disclosures</a></li>
                       <li><a href="consult.html">Consulting</a></li>
                       <li><a href="mission.html">Our Mission</a></li>
                       <li><a href="members.html">Our Members</a></li>
                       <li><a href="history.html">Our History</a></li>
                       <li><a href="contact.html">Contact</a></li>
                </ul>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
         </script>

  • Spry Horizontal Menu bar - submenu position

    I'm new to spry so apologies in advance if this has been
    posted before.......
    I'm putting together a new site using the spry horizontal
    menu bar - I've managed to put together a CSS format which works
    well in both FireFox and IE7 EXCEPT for the position of the
    sub-menus below the main menu bar. IE7 seems to position the sub
    menu relative to the top right corner of the parent menu item.
    Firefox seems to position it relative to the bottom left corner -
    and I can't find a solution which works for both browsers. Any
    ideas?

    You must have fixed it in the meantime as I see no problem.
    Gramps

  • Spry Menu not positioned correctly in IE

    I've search for a answer to this and it seems to be common but there has been no solution to be found. I have a spry horizontal menu that in FireFox, Safari and Opera opens and functions fine. In IE the menu buttons are in the correct place but the dropdowns are at the top of the screen. The virtical position is correct but the horizontal position is obviously off. I tried to keep the spry code as original as possible and have only altered the css to change font sizes and bkg colors.
    Another issue I can't seem to solve is the font sizes for the sub menus. I would like the main buttons to be in bold and every sub menu that opens below to be in a normal font. No matter what I change in the CSS I can't get the fonts to go to normal w/o it altering the fonts in the button above. I hope this make sence. Here is the CSS code I'm working with.
    @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: 17px;
        cursor: default;
        width: 800px;
    /* 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 this controls the main menu bar */
    ul.MenuBarHorizontal li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 17px;
        position: relative;
        text-align: center;
        cursor: pointer;
        width: 160px;
        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: -5% 0 0 20%;
        padding: 0;
        list-style-type: none;
        font-size: 10px;
        z-index: 1020;
        cursor: default;
        width: 8.2em;
        position: absolute;
        left: -1000em;
        font-weight: normal;
    /* 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: #000000;
        color: #FFFFFF;
        text-decoration: none;
        width: 162px;
        font-style: oblique;
        font-size: 16px;
        font-weight: bold;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
    /* 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: #666666;
        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: #999999;
        color: #FFF;   
    /*My Menu bar test css*/
    ul.testtext
        color:#006699;
        font-size:12px;
    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;

    Because you have centered the menu items you need to take special care not to upset the apple cart.
    To center the menu items properly have a look here: http://foundationphp.com/tutorials/sprymenu/centering.php and while you are at it have a look at customizing a Spry menu as well.
    After you have done that and made the appropriate chenges, please return here with further questions.
    Ben

  • Spry Horizontal Submenu Positioning

    I created a spry horizontal menu. my submenus are positioned
    differently depending on if it is viewed in IE or Firefox. is this
    normal and is there a fix?
    edit: what i wanted was my horizontal menu to stretch accross
    my entire page so i changed the default width of the menus from
    8.2ems to 12.5ems. that is when the display position went all
    screwy on me. the only way to change the position was to edit the
    ul.MenuBarHorizontal.ul ul margin values. no matter what i try the
    submenus position is different between browsers.

    Normally the submenus should be positioned the same way in
    both IE and Firefox.
    I don't think that the solution you tried (extending the
    width of the submenus) will do what you want - extending the menu
    to the page width.
    It is better to take a look first at these
    samples
    If you still have problems, please provide an URL with a
    sample page, what are you exactly trying to do, and on what browser
    versions have you tested.

  • Spry Vertical Menu Mac - 2nd Submenu

    Hi,
    I have a Spry Verticle Menu installed via DWCS4 on the PC.
    The HTML website in question has about 5 buttons, but one of them
    has a dropdown with 3 topics, 2 of which have flyouts.
    ***Question: Why doesn't the SECOND flyout show up in any MAC browser?
    Here is the code:
    <li><a class="MenuBarItemSubmenu" href="chapters.htm">    CHAPTERS</a>
                                <ul>
                                  <li><a class="MenuBarItemSubmenu" href="chapters.htm">North America</a>
                                    <ul>
                                      <li><a href="http://www.website.com/" target="_blank">USA</a></li>
                                      <li><a href="http://www.website.com/" target="_blank">NY</a></li>
    <li><a href="http://website.com" target="_blank">LA</a></li>
                                    </ul>
                                    </li>
                                  <li><a href="#">International</a></li>
                                    <ul>
                                      <li><a href="http://www.website.com/" target="_blank">Headquarters</a></li>
                                      <li><a href="http://www.website.it" target="_blank">Italy</a></li>
                                    </ul>
                                  <li><a href="start_chapter.htm">Start a Chapter</a></li>
                                </ul>
                              </li>
    Thanks!
    -toonsas

      <li><a class="MenuBarItemSubmenu" href="chapters.htm">CHAPTERS</a>
        <ul>
          <li><a class="MenuBarItemSubmenu" href="chapters.htm">North America</a>
            <ul>
              <li><a href="http://www.website.com/" target="_blank">USA</a></li>
              <li><a href="http://www.website.com/" target="_blank">NY</a></li>
    <li><a href="http://website.com" target="_blank">LA</a></li>
            </ul>
          </li>
          <li><a class="MenuBarItemSubmenu" href="#">International</a><!--</li>-->
            <ul>
              <li><a href="http://www.website.com/" target="_blank">Headquarters</a></li>
              <li><a href="http://www.website.it" target="_blank">Italy</a></li>
            </ul>
          </li>
          <li><a href="start_chapter.htm">Start a Chapter</a></li>
        </ul>
      </li>
    Gramps

  • Spry Horizontal Menu Bar not working in IE

    Hi! I am new to this forum and new to Dreamweaver. I recently used Dreamweaver to build a website to display my digital portfolio. I am not very good at this and don't understand much of this works. I inserted a spry horizontal menu bar for my navigation. I did change the original set up to have the background the colors I wanted and I also changed the size so it would go across the top of my page. This looks fine in Firefox and Safari but in Internet Explorer the bar displays vertically, which does not look good. Can anyone look at my code and tell me how I can fix this problem?
    I appreciate any help I can get with this as I have tried everything I know.
    This is the link to my site: www.digitaldesignsbymargee.com

    Hi! I am new to this forum. I inserted a spry horizontal menu bar for my navigation but i cannot able veiw a horizontal menubar in IE though it works fine in google chrome and Mozila. Can anyone look at my code and tell me how I can fix this problem?
    w@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: 0px;
        padding: 0px;
        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: 0px;
        padding: 0px;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 14em;
        float: left;
        border-color: white;
        border-left-style: solid;
        border-left-width: 1px;
        border-right-style: none;
        border-right-width: 1px;
    /* 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: 14em;
        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: 14em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin: 0 0 0 99%;
    /* 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
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        padding: 0.9em 0.75em;
        color: white;
        font-size: 14px;
        font-weight: bold;
        font-family: Arial, Helvetica, Verdana, sans-serif;
        text-decoration: none;
        color: white;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
        background-image: url(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 10px 85%;
    /* 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
        b/ackground-image: url(SpryMenuBarDownHover.gif);
        background-repeat: no-repeat;
        background-position: 10px 85%;
    /* 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
        b/ackground-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;
            float: left;
           /* I have updated and checked the code as mentioned in the forum topic but still it is not working */
    ul.MenuBarHorizontal a:visited { color: white;}
    ul ul a { background-color: #436d9c; }
    ul a.MenuBarItemHover { background-color: #19385a; }
    ul .MenuBarItemSubmenu ul li a { border: none; }
    ul a.MenuBarItemSubmenu.MenuBarItemSubmenuHover { background-color: #19385a; }
    ul.MenuBarSubmenuVisible li { border: none; }
    I appreciate any help I can get with this as I have tried everything I know.

  • Spry vertical menu button shows background color instead of image in preview

    Hello All, I'm a newbie (to the forum and Dreamweaver) so my apologies if my question is not in good form.  I've searched for this issue but cannot seem to find the exact problem I have. 
    I've created a website (my first) and used the spry menu bar.  It works well using the default blue and grey colors for button and hover.  However, I decided I want to spruce it up a little and change the buttons to use a background image (rainbow pattern) instead of background color.  I internet researched this for some time and watched all the youtube videos people have posted for this process and editing the spry vertical menu bar CSS.  Using the .a and hover lines from the CSS, I was able to add my background .jpg image file.  In the design view, the button look exactly how I want them to.  However, when I attempt to preview in IE, Chrome, or FF, the buttons still have the default colors and no image.  I've gone back and deleted the default blue and grey, but then the preview just shows dark grey and white for the buttoms.  is there something that I am overlooking that would cause the background color to show instead of the image I have attached to the buttons.  I can't figure out why it looks right in DW but not in preview.
    BTW, I'm editing a template file and all the pages are updated with the new image buttons, but none of the pages show correctly in preview. 
    Thanks

    Point taken :-)
    This is my spry vertical css code.  No sub-menus. 
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Outermost menu container has borders on all sides */
    ul.MenuBarVertical
    border: 1px solid #CCC;
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    background-image: url(/Images/Rainbow_Button.jpg);
    background-color: ;
    background-repeat: no-repeat;
    background-position: center;
    /* 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: #666666;
    color: #333333;
    background-image: url(/Images/Rainbow_Button_Hover.jpg);
    /* 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: #0000FF;
    color: #FFF;

Maybe you are looking for

  • URL problems with SQL Server Reporting Services 2012 with wildcard SSL certificate

    Hi, I have single server, domain member, with SQL Server 2012 SP1 Reporting Services. I am trying to get work with url: https://reports.mydomain.com I have valid wildcard certificate (*.mydomain.com) implemented and configured URLs in Configuration M

  • Resolution when copying a graphic from Preview

    When I select a graphic in Preview and copy it, the resolution always appears to be "screen" resolution (i.e., when I paste into Photoshop). Any way to copy at a higher resolution? The copies resolution does not appear to depend on the pdf magnificat

  • Pricing date on sale order

    Hey my question is how to change or control the pricing date in quantity contract to sale order. while creating sale order with reference to contract pricing date is copying from contract. My requirment : pricing date should come of that date when we

  • Is there a Java Graphic Package that doesn't depend on DISPLAY?

    Hi Is there a Java Graphic Package that doesn't depend on DISPLAY?. I need to generate some images on the web and I can't guarantee that the DISPLAY variable is set correctly. Regards, N�stor Bosc�n

  • Getting old messages back after a restore with no back up

    Hello. I tried to download a ringtone and my phone then told me it needed to restore because of the updates. I transferred my purchases over but stupidly didn't make a back up. After restorting I realised the most recent back up I had was for April.