Spry menu IE Problems, shifting submenu to the right

ok haveing trubble with the menu shifting to the right of the drop down, it works in all other but IE... any ideas ?
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
          list-style-type: none;
          font-size: 105%;
          cursor: default;
          width: auto;
          margin-top: -32px;
          margin-right: 0%;
          margin-bottom: 0px;
          margin-left: 5em;
          height: auto;
          float: left;
          border-bottom-style: none;
          font-weight: normal;
          line-height: normal;
          font-style: normal;
          color: #000;
          padding-top: 0px;
          padding-right: 0%;
          padding-bottom: 0px;
          padding-left: 0%;
          text-align: center;
          border-top-style: none;
          border-right-style: none;
          border-left-style: none;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
          z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: relative;
          text-align: center;
          cursor: pointer;
          width: auto;
          float: left;
          margin-top: 10px;
          margin-right: 0;
          margin-bottom: 0;
          margin-left: 0;
          visibility: inherit;
/* 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: 110%;
          z-index: 1020;
          cursor: default;
          width: 12em;
          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;
          -khtml-opacity: 0.9;
          background-color: #666;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
          width: 11em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
          position: absolute;
          margin-right: 0;
          margin-bottom: 0;
          width: 12em;
          margin-left: 12em;
/* 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;
          background-color: #666;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
          border: 1.5px solid #fff;
          font-size: 12px;
          padding-top: 0px;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: auto;
          background-color: opacity
:0.4;
          color: #FFFFFF;
          text-decoration: none;
          font-size: 100%;
          padding-top: 0em;
          padding-right: 2em;
          padding-bottom: 0em;
          padding-left: 0em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
          color: #F69;
          background-color: transparent;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
          background-color: transparent;
          color: #FF6699;
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;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ 
ul.MenuBarHorizontal li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background-color: #FFF;
          filter:alpha(opacity=0);
          /* [disabled]-moz-opacity:0.; */
          -khtml-opacity: 0.;
          opacity: 0.;

There are so many (unnecessary) changes made to the SpryMenuBarHorizontal.css that I have given up.
Please have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one and start again.
Gramps

Similar Messages

  • The right click menu pops up after I push the right mouse button, instead of when I release it.

    I am using an extension All-In-One Gestures. It works on my other installation of Firefox 4 - particularly, the right-click menu pops up if I click right mouse button and then release it so I can perform gesture or turn the wheel instead of getting a right click menu.
    But on this installation (basically the same addons and OS), the right-click menu pops up on pushing down the right mouse button so the right-button+wheel gestures do not work, and the menu stays there while I am performing the gesture which is rather annoying.
    So I though maybe there is some obscure configuration option to toggle to make right-click menu pop up after the button release? Or is this entirely the extension's fault? Note that it does work as expected on other installation...

    You have to enable in Firefox
    -> Options -> Content -> Activate JavaScript (yes) -> More
    -> Allow scripts the following actions
    -> Inactivate or replace context menu (yes)
    in order to allow All-in-one-Gesture to block the immediate appearance of the context menu.
    If you forbid Firefox JavaScript and/or the manipulation of the context menu by use of JavaScript, All-in-one-Gesture cannot work properly.

  • Spry menu bar woes (add submenu levels and edit width)

    So i need some spry menu bar help. Apparently as a graphic designer i'm also expected to webdesign, and while i can solve most problems with a good googling, i seem to be at  my wit's end fo this one.  So the site i'm doing has a header ith a horizontal spry pop-up menubar (in Dreamweaver CS4). But some problems arise:  when i manually add another submenu level, they don't show up in chrome or FF, they do werk perfectly in IE6. I just add the following code to the codepage:
    <li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>             <ul>               <li><a href="#">Digital Matrix Systems</a></li>               <ul>               <li><a href="#">R2 Digital Audio Matrix</a></li>               </ul>               <li><a href="#">pre-amplifiers &amp; mixers</a></li>               <ul>               <li><a href="#">PMX124</a></li>               </ul>
    the PMX never pops open in FF an chrome.. Should i be adding anything else to another part of the code?  i'd like my submenu text to have a slight indent? How ever, when i add the indent to ul.menubarhorizontal ul , it elongates the submeny boxes in IE6, while looking normal (width) in chrome and FF. WHat part of the CSS style should i change to just have the text scoot over a bit without it really affecting the box layout? ALso, if anyone could tell me how to add a wee bit of spacing above the text (and beneath), i'd be eternally gratefull.  Also, how do i change the with of the submenus? seing as my main buttons are images, but the names i ned to put in my submenus are turning out to be pretty long...
    HTML code for the menu:
    <tr>     <td><ul id="MenuBar1" class="MenuBarHorizontal">       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/knoppenrollover_01.jpg',1)"><img src="images/knoppenbalk_01.jpg" name="Products" width="169" height="41" border="0" id="Products" /></a>         <ul>           <li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>             <ul>               <li><a href="#">Digital Matrix Systems</a></li>               <ul>               <li><a href="#">R2 Digital Audio Matrix</a></li>               </ul>               <li><a href="#">pre-amplifiers &amp; mixers</a></li>               <ul>               <li><a href="#">PMX124</a></li>               </ul>               <li><a href="#">music Sources</a></li>               <li><a href="#">amplifiers</a></li>               <li><a href="#">paging</a></li>               <li><a href="#">speakers</a></li>               <li><a href="#">microphones</a></li>             </ul>           </li>           <li><a href="#">racks and stands</a></li>           <li><a href="#">cables</a></li>         </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Company','','images/knoppenrollover_02.jpg',1)"><img src="images/knoppenbalk_02.jpg" name="Company" width="165" height="41" border="0" id="Company" /></a>         <ul>           <li><a href="#">Who are we?</a></li>           <li><a href="#">history</a></li>   <li><a href="#">contact us</a></li>   <li><a href="#">philosophy</a></li>   <li><a href="#">careers</a></li>         </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/knoppenrollover_03.jpg',1)"><img src="images/knoppenbalk_03.jpg" name="news" width="166" height="41" border="0" id="news" /></a></li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projects','','images/knoppenrollover_04.jpg',1)"><img src="images/knoppenbalk_04.jpg" name="projects" width="166" height="41" border="0" id="projects" /></a></li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Downloads','','images/knoppenrollover_05.jpg',1)"><img src="images/knoppenbalk_05.jpg" name="Downloads" width="165" height="41" border="0" id="Downloads" /></a>         <ul>           <li><a href="#">catalogs</a>            </li>           <li><a href="#">manuals</a></li>           <li><a href="#">software</a></li>           <li><a href="#">documents</a></li>           <li><a href="#">pricelists</a></li> </ul>       </li>       <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/knoppenrollover_06.jpg',1)"><img src="images/knoppenbalk_06.jpg" name="Contact" width="169" height="41" border="0" id="Contact" /></a></li>     </ul></td>
    sprymenuhorizontal.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: 14px;      cursor: default;      width: 1010px;      font-family: Arial, Helvetica, sans-serif; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */ 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;      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 {      list-style-type: none;      font-size: 100%;      z-index: 1020;      cursor: default;      width: 166px;      position: absolute;      left: -1000em;      background-color: #6C6C6C;      height: 0px;      margin-top: 0px;      margin-right: 0em;      margin-bottom: 10px;      margin-left: 0em;      text-align: right;      text-indent: 0em;      padding-top: 0px;      padding-right: 0em;      padding-bottom: 0px;      padding-left: 0px;      border-top-width: 1px;      border-right-width: 1px;      border-bottom-width: 1px;      border-left-width: 1px;      border-top-style: solid;      border-right-style: solid;      border-bottom-style: solid;      border-left-style: solid;      border-top-color: #666;      border-right-color: #666;      border-bottom-color: #666;      border-left-color: #666; } /* 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;      height: 0px; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li {      width: 166px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul {      position: absolute;      height: 41px;      margin-top: 0%;      margin-right: 0%;      margin-bottom: 0px;      margin-left: 162px;      float: right; } /* 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 #666;      background-color: #6C6C6C;      height: 0px;      padding-left: 0em; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a {      display: block;      cursor: pointer;      background-color: #6C6C6C;      padding: 0em;      color: #FC0;      text-decoration: none;      font-size: 14px;      margin-left: 0em; } /* 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: #FC0;      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: #FC0;      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: 98% 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: 98% 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: 98% 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: 98% 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;      } }[/SPOILER]  any help would be greatly appreciated, as i've been fidgiting with this thing for 2 days now, to no satisfying effect...

    since the layout of the pasted text got all weird, here i'm trying it again.
    sprymenubarhorizontal.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: 14px;
    cursor: default;
    width: 1010px;
    font-family: 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;
    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
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 166px;
    position: absolute;
    left: -1000em;
    background-color: #6C6C6C;
    height: 0px;
    margin-top: 0px;
    margin-right: 0em;
    margin-bottom: 10px;
    margin-left: 0em;
    text-align: right;
    text-indent: 0em;
    padding-top: 0px;
    padding-right: 0em;
    padding-bottom: 0px;
    padding-left: 0px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #666;
    border-right-color: #666;
    border-bottom-color: #666;
    border-left-color: #666;
    /* 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;
    height: 0px;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 166px;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    height: 41px;
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0px;
    margin-left: 162px;
    float: right;
    /* 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 #666;
    background-color: #6C6C6C;
    height: 0px;
    padding-left: 0em;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #6C6C6C;
    padding: 0em;
    color: #FC0;
    text-decoration: none;
    font-size: 14px;
    margin-left: 0em;
    /* 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: #FC0;
    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: #FC0;
    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: 98% 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: 98% 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: 98% 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: 98% 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;

  • Spry Menu Bar problem in IE

    I am using a spry menu bar, which looks perfect in firefox, but in IE (version 6.0) I cannot get the font right for when an item on the menu bar has been visited. The font should stay white, but goes to a light purple colour which is hard to read. The site is www.binscombe.net and the CSS code is below. Any help really appreciated.
    Many thanks,
    Martin Brunet
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
        float: none;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
        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: 11pt;
        position: relative;
        text-align: left;
        cursor: pointer;
        float: left;
        background-color: #716BA3;
        font-family: Verdana, Geneva, sans-serif;
        color: #FFF;
        width: white-space
    : now;
    /* 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: 11pt;
        z-index: 1020;
        cursor: default;
        width: auto;
        position: absolute;
        left: -1000em;
        color: #FFF;
        border-right-width: 2px;
        border-right-style: groove;
    /* 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
        float: none;
        background-color: transparent;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin: -5% 0 0 95%;
        border-right-style: none;
        border-top-style: none;
        border-bottom-style: none;
        border-left-style: none;
    /* 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-right-width: 2px;
        border-top-style: none;
        border-right-style: groove;
        border-bottom-style: none;
        border-left-style: none;
        border-top-color: #CCC;
        border-right-color: #CCC;
        border-bottom-color: #CCC;
        border-left-color: #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #716BA3;
        color: #FFF;
        text-decoration: none;
        font-style: normal;
        font-weight: bold;
        border-right-style: groove;
        border-right-color: #006;
        padding-top: 0.5em;
        padding-right: 0.75em;
        padding-left: 0.75em;
        padding-bottom: 0.6em;
        border-right-width: 2px;
        list-style-type: none;
    /* Menu items that have mouse over or focus or visited have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus, ul.MenuBarHorizontal a:visited
        background-color: #716BA3;
        color: #FFF;
        font-weight: bold;
    /* 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: #006;
        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%;
        background-color: #716BA3;
        color: #FFF;
    /* 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;
    #Comment_label {
        font-weight: bold;
        color: #FFF;ul.MenuBarHorizontal a:visited {
        /*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;
    #Comment_label {
        font-weight: bold;
        color: #FFF;}

    Hi mjw133,
    There is already a topic about this problem
    here.
    You can also check out this
    tech
    note

  • Spry menu bar problem

    I am using the Spry Menu Bar to create a top navigation bar.
    There are three content div's absolutely positioned below the div
    for this navigation bar. Everything works fine in Firefox. But in
    both IE6 and IE7, the submenus are hidden behind the content div's.
    I have tried giving the content div's very low z-indexes but the
    only time that worked was with negative z-indexes - then the
    submenus were on top of the content div's in IE, but the content
    div's disappeared in Firefox (and yes I understand why this
    happened in Firefox). I tried giving the different elements in the
    menu bar very large z-indexes. Either I did not get the z-index
    into the correct element or that did not work either. And, yes,
    there are design reasons for why I am using absolute positioning
    instead of floating.
    Has anyone encountered and solved this problem?

    I solved the problem. I moved the top navigation bar div to
    the bottom of the html code so it is the last div in the document
    flow. Now the submenus are on top of the content div's in both
    Firefox and IE.

  • Another spry menu bar problem

    hey all, im very new to dreamweaver first of all. I set up a website www.apexref.com if you click the link you will see the drop down menu wont work correctly. i think its just a source code problem buit have no idea how or what to do!!! the file works perfect in dreamweaver preview but when i published it this happen.
    could really do with some help as im very much a rookie at this stuff.
    thank you
    S

    Hi S,
    the first I saw when I loaded your source code into my DW it "said":
    what means something like "Syntax error on line 1 ...". For comparison, my DW starts with a spry menu as follows:
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    not this:
      <script src="..SpryMenuBar.html" type="text/javascript"></script>
      <script src="..swfobject_modified.html" type="text/javascript"></script>
    Hans-G.
    P.S.
    For the here often discussed reasons, you should remove the spaces in file names, for example here:
    ApexRefrigeration_24hr Service 6Maintenance.html
    better:
    ApexRefrigeration_24hrService26Maintenance.html

  • Vertical Spry menu bar--adjusting bottom submenu

    I'm trying to adjust the last submenu on my vertical Spry menu bar. Originally, the submenu caused the page to either expand when I moused over the submenu (in IE), or the page would load with white space below the footer in order to accomodate the submenu when I mouse over it (in Firefox). The adjustment I want is to move the submenu up so that neither of those things happen. I've made the adjustment appear exactly how I want it to in Chrome and Safari, but IE, Firefox, and Opera now have the submenu placed halfway up the page. I can post the code if it's helpful, but I do not have the site hosted anywhere at the moment. The adjustment I made is in the Spry menu's css:
    ul.MenuBarVertical ul#last
    margin: -205% 0 0 95%;
    Any help is appreciated. Thank you!
    Sarah

    Thanks for the reply. After changing the code to your suggestion, now the submenu loads approximately 80px below the last menu item in all browsers except IE. In IE, the submenu looks the way it did straight out of the box. Any other ideas to try?
    Sarah

  • Spry Menu display problems in IE

    Hi!
    I'm making a menu for a website and i tried Spry. version 1.4
    returned me some trouble with IE, but none with FireFox.
    i then updated to version 1.6, expecting some changes, but
    nothing has happened.
    I'm using the following: SpryMenuBarHorizontal.css - version
    0.6 - Spry Pre-Release 1.6
    here's the address for you to see what's happening and
    possibly help me:
    page
    I'd like to thank you in advance and say i'm here for any
    other information you need.

    Hi ssorizo,
    Try removing those <div align="center"> tags inside the
    level one <li> tags.
    They are not needed.
    Also, I noticed that you have modified slightly the CSS file,
    please use a fresh version and modify only what you strictly need
    (fonts, colors etc), not the various widths measured in em.
    Florin TUDOR

  • Spry menu positioning problem in Internet Explorer

    Hi everyone,
    My website is working fine in Firefox and Chrome, but my spry menu doesn't show up correctly in IE 8. When I view the site in IE, the spry menu shows up as a white rectangle and the submenus appear too high up on the page. If anyone could help me figure out how to fix this, that would be great.
    I noticed that in Firefox/chrome, the positioning of the submenus starts counting from the top of the spry menu (40px down), but in IE it seems to start counting from the top of the page?
    Here's a link to my website: http://www.student.kuleuven.be/~s0183195/index.html
    I'm using the latest version of spry.
    Thanks for your time,
    Tine

    That's much better, thank you!
    However, the submenus still appear too far to the right side. When I do a local preview in IE via Dreamweaver everything looks fine, but when I upload my files and view the site online the submenus appear under the word next to the selected word.
    Thanks!
    Edit: I just noticed that if I turn off the compatibility view in IE, the submenus appear as they should. Is there a way to make them appear correctly with the compatibility view turned on as well?

  • Crystal XI - No Printer option shifts report to the right

    Post Author: yishion
    CA Forum: General
    Hi all, I have encountered a problem which shifts the entire report to the right whenever I check the 'No Printer (optimize for screen display)' option in page setup. Has anyone encountered this problem and is there a working solution to this problem? Thanks in advance.

    Solved my problem. I had to tweak the ODBC drivers on the server.

  • Problem with menus on the right and image is too far to the right.

    Notice the difference in sizes of the menus, (Unfamiliar with the correct terminology). I cannot get the Adjustments, Layers, Properties, etc. to all be the same size, increase their width. Notice the loaded image is too far to the right underneath the menus. I have to go to Window/Arrange/Float in window to move the image to the left. Also I cannot get the Maximize/Minimize button to work. How can I fix these problems.

    I did that already with the same results. Trying to widen the Adjustment
    menu does not work. I am satisfied with
    the way the other menus appear. The only other problem that bothers me
    is that the loaded image is to far to the
    right, and is underneath the menus. The only way I can move the image to
    the left is to use the Float in window
    command, but it is not permanent. It goes back to the default position
    when another image is opened.
    Thanks for the Alt shortcuts and the button is visible.
    Gary

  • Any page I open does so with the screen shifting 25% to the right meaning I can't see all the page - how do I sort this?

    When I open firefox and go to any webpage (including right now as I write this) the screen has shifted to the right and runs off screen - I'm left with a huge blank gap on the left handside of the page.
    I have uninstalled and reinstalled firefox, but it hs done the same thing - although mysteriously my homepage was kept?

    The Babylon Toolbar 1.1.8 extension is known to cause something like that. Disable or uninstall that add-on until the developer fixes the cause of that problem.

  • Shifting Handouts to the Right

    Hi,
    I use Keynote to create handouts of lecture notes, and I use two per page. When I do this, there is about a 2 inch area of white space on the right and very little on the left. Is there a way to "shift" the slides to the right and have more blank area on the left? I want to do this so that the three holes punched in for a binder does not destroy any content.
    Thanks,
    Ken

    There are so many (unnecessary) changes made to the SpryMenuBarHorizontal.css that I have given up.
    Please have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one and start again.
    Gramps

  • Formatting Spry Tabbed Panel so tabs appear on the right side

    Hi, I know this is a rookie question, but that is because I'm a rookie. How can I format a Spry Tabbed Panel so the tabs appear on the top-right side rather than the default top-left. I found the solution on the Adobe Labs site, but couldn't get it to work. If anyone can please help me with the code or point me in the right direction if I can change it with css. Thanks.

    Add/modify the following
    .TabbedPanelsTab {
        float: right;
    Using the above, you will have to remember that the first tab will be on the extreme right.
    Gramps

  • Spry menu works fine local and turns the whole web page white when it goes live. Please help.

    Thanks in advance to anyone who helps me out with this problem.  I have been working on it all day and I took the time to design nice buttons in Photoshop and backgrounds.  It works perfect viewing it in my browser locally. 
    I have ran into a problem.  My whole page turns white I can't see anything at all when i upload it live.  I use hostgator webhosting business package if this helps.
    I have made sure that I uploaded my SpryAssets folder with everything in it to the server.  As you can see I changed the links to work with my website.
    This is the following code I am editing in my header file live minus some keywords and html tags.  
    <base href="http://{$host}"></base>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="templates/{$template}/styles.css" type="text/css" />
    <script language="javascript" src="libs/prototype/prototype.js"></script>
    <script language="javascript" src="js/functions.js"></script>
    <script language="javascript" src="js/labels.js"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    {if $load_js==1}<script language="javascript" src="js/modules/{$module}.js"></script>{/if}
    </head>
    <body background="templates/{$template}/images/bg.gif" alt="something here">
    <table cellpadding="0" cellspacing="0" width="100%" align="center">
      <tr><td align="center" background="templates/{$template}/images/header_bg.gif" alt="something here">
      <table width="736" cellpadding="0" cellspacing="0" align="center" height="179"><tr>
          <td background="templates/{$template}/images/header.jpg" alt="something here" width="736" height="179" align="center" valign="bottom" style="padding-bottom:0px;">
    </td>
        </tr>
        </table>
        <table cellpadding="0" cellspacing="0" align="center"><tr>
          <td width="2"></td>
      <td width="162"><a href="index.html"><img src="templates/{$template}/images/tab_something.png"  onmouseover="this.src='templates/{$template}/images/tab_something_MouseOver.png';" onmouseout="this.src='templates/{$template}/images/tab_something.png';" border="0"></a></td>
      <td width="14"></td>
      <td width="162"><a href="most-popular/"><img src="templates/{$template}/images/tab_popular.png  "
    onmouseover="this.src='templates/{$template}/images/tab_popular_MouseOver.png';" onmouseout="this.src='templates/{$template}/images/tab_popular.png';" border="0"></a></td>
      <td width="13"></td>
      <td width="162"><a href="top-rated/"><img src="templates/{$template}/images/tab_rated.png"
    onmouseover="this.src='templates/{$template}/images/tab_rated_MouseOver.png';" onmouseout="this.src='templates/{$template}/images/tab_rated.png';" border="0"></a></td>
              <td width="13"></td>
              <td width="162"><a href="cam.html"><img src="templates/{$template}/images/buttonhere.png"  onmouseover="this.src='templates/{$template}/images/lbuttonhere_MouseOver.png';" onmouseout="this.src='templates/{$template}/images/buttonhere.png';" border="0"></a></td>
      <td width="14"></td>
    </tr></table>
        </td></tr>
    </table>
    </body>
    </html>
    The code below it is what makes my website go white, you can't even see anything at all.  Notice all i took out was buttons and then i added the spry code.  The site will still work perfect without the buttons, but as soon as I place the spry code within the page anywhere it goes white and won't work at all.
    <base href="http://{$host}"></base>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="templates/{$template}/styles.css" type="text/css" />
    <script language="javascript" src="libs/prototype/prototype.js"></script>
    <script language="javascript" src="js/functions.js"></script>
    <script language="javascript" src="js/labels.js"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    {if $load_js==1}<script language="javascript" src="js/modules/{$module}.js"></script>{/if}
    </head>
    <body background="templates/{$template}/images/bg.gif" alt="something here">
    <table cellpadding="0" cellspacing="0" width="100%" align="center">
      <tr><td align="center" background="templates/{$template}/images/header_bg.gif" alt="something here">
      <table width="736" cellpadding="0" cellspacing="0" align="center" height="179"><tr>
          <td background="templates/{$template}/images/header.jpg" alt="something here" width="736" height="179" align="center" valign="bottom" style="padding-bottom:0px;">
    </td>
        </tr>
        </table>
    <link href="/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li>
    <div align="center"><a href="/index.html">something here</a>
    </div>
    </li>
    <li>
    <div align="center"><a href="/categories">something here</a>
    </div>
    </li>
    <li>
    <div align="center"><a href="/most-popular">something here</a> </div>
    </li>
    <li>
    <div align="center"><a href="/top-rated">Top Rated</a>
    </div>
    </li>
    <li>
    <div align="center"><a href="/name.html">Name</a> </div>
    </li>
    <li id="list1">
    <form name="search_form" id="search_form" action="index.php" method="get"    padding-left:0px;">
    <input type="text" class="input-text" name="tag" id="tag" value="" style="width: 100px;  background-position: -14px 0px; height:35px; padding-left:0px;">
    <input type="submit" class="input-button" value="Search" style=" align: left; width: 60px; height:35px;">
    </form> </li>
    </ul>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
        </td></tr>
    </table>
    </body>
    </html>

    I'll try to be nice, but if it doesn't come over that way, please forgive this grumpy old man.
    When I look at your markup as follows
    <link href="/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li>
    <div align="center"><a href="/index.html">something here</a>
    </div>
    </li>
    <li>
    <div align="center"><a href="/categories">something here</a>
    </div>
    </li>
    <li>
    <div align="center"><a href="/most-popular">something here</a> </div>
    </li>
    <li>
    <div align="center"><a href="/top-rated">Top Rated</a>
    </div>
    </li>
    <li>
    <div align="center"><a href="/name.html">Name</a> </div>
    </li>
    <li id="list1">
    <form name="search_form" id="search_form" action="index.php" method="get"    padding-left:0px;">
    <input
    type="text" class="input-text" name="tag" id="tag" value=""
    style="width: 100px;  background-position: -14px 0px; height:35px;
    padding-left:0px;">
    <input type="submit" class="input-button" value="Search" style=" align: left; width: 60px; height:35px;">
    </form> </li>
    </ul>
    I wonder
    what a link to a style sheet is doing in the middle of your document. The placement of a link to CSS should only be within the head-section of your document
    why a div has been placed right in the middle of a list. If you want to place the menu item in the middle, then do so using CSS on the a element.
    why a form has been placed within the menu bar. Everything within the ul element will be considered part of the menu bar.
    Clean up your code and all should be well.
    Gramps

Maybe you are looking for

  • Error while applying the patch 9239089

    Dear All, I have installed the Oracle E-Business Suite Release 12(12.1.1) on Windows 2003 (32-bit) OS successfully.Its a single node installation. Hardware & Software Specifications: - Intel Core 2 Duo, CPU 2.40 GHz - 2 GB of RAM - 180 GB Hard Drive

  • Why won't my event copy anymore between libraries?

    Howdy In order to back up a large project I am working on, I use two libraries. One is the working library on the RAID, and the other is a local, backup library. When I want to 'backup', I would delete the events from the local library, and then copy

  • What is the best temperature gauge software for MacBook Pro?

    My MacBook Pro (late 2011, i7 Quad 2.4 GHz, SSD, OS 10.8.5, 8 Gigs RAM) which I use for pro audio production has started stuttering while playing back audio a couple of times - only editing a stereo track with no plug-ins.  I thought it was my Glyph

  • TOC not displayed

    When the webhelp zip file is deployed to a local filesystem, we can navigate the help content with no problem. However, when we deploy the content to a subfolder within the application, the TOC navigation does not display. (At the bottom of the brows

  • [not a problem?] Errors in kernel upgrade

    I received the following messages when upgrading the system. Can I reboot safely? ==> Building image "default" ==> Running command: /sbin/mkinitcpio -k 2.6.28-ARCH -c /etc/mkinitcpio.conf -g /boot/kernel26.img :: Begin build ERROR: module 'ide[-_]dis