Return to Widget Browser for editing a customized Menu Bar?

How to edit a Spry Menu 2.0 _after_ customizing with the Adobe Widget Browser and inserting the menu and further structural customizing via DW CS5?
Yes, the new Browser and the new Menu 2.0 are a large step forward - thanks! But no resources (searched high and low ...) show how to return to the Widget Browser, and all its wonderful configuration tools, once a menu is inserted.
The Widget Browser apparently does not allow setting up correct button labels, levels, etc.; instead the Widget Browser is where all the 'style' configuration is done. So, we use the Widget Browser to configure / style a Spry Menu 2.0 and then insert it into a page with DW CS5.  Of course, then the menu has to get the correct button labels, levels, etc.  So further structural customization, in DW.
Now, we decide we want to try out some alternative styling, to compare and contrast options. Of course, that means we want to return to the Widget Browser again and use it. That CSS is hard in a widget such as this, and the whole point of the Widget Browser is to make that styling accessible.
How to do that, to return to the Widget Browser - and at the same time not lose all the structural customization done in DW?
What are we missing? Your help is most greatly appreciated.  David Allen

Yes, of course! Add an ID to each main menu bar item (customize...) and in the CSS, make descendant selectors that include the ID and indicate the background color for that section.
For this set of menu items:
  <li id="food"><a class="MenuBarItemSubmenu" href="#">Food</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
  </li>
these selectors:
ul.MenuBarHorizontal li#food a.MenuBarItemHover,
ul.MenuBarHorizontal li#food  a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal li#food  a.MenuBarSubmenuVisible
    background-color: green;
will add the background-color 'green' to all hovered menu list items (and submenu list items) of the list item with the id="food".
If you want yet another color for the submenus, do it this way:
ul.MenuBarHorizontal li#food a.MenuBarItemHover
    background-color: green;
and
ul.MenuBarHorizontal li#food  a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal li#food  a.MenuBarSubmenuVisible
    background-color: lightgreen;
this latter will catch all the submenus's hover background-color.
Beth

Similar Messages

  • Acrobat Pro Ver 9 for Win 7 the menu bar (File, Edit, View, Document etc) Disappears when I move the Window

    Lately in Acrobat Pro Ver 9 for Win 7 the menu bar (File, Edit, View, Document etc) disappears when I move the window . . only happens when I have a pdf file open . . everything worked fine until a few days ago . . F9 fixes the problem until I move the window again . . I realize my version is old so I tried tried downloading XI reader and having the same issue . . any help would be appreciated

    Hi Ernestprinter,
    Check if you have multiple Java versions installed on your computer.
    Try clean boot http://support.microsoft.com/kb/929135
    Also i would suggest uninstall security software and install it back.
    Currently you may use F9 key to restore Menu bar.
    Regards,
    Ajlan Huda.

  • Problem opening Widget Browser [subject edited by moderator]

    Hallo. Ich kann den Widget Browser nicht öffnen. Die Anmeldung ist unmöglich. Folgende Meldung kommt :
    Unable to load WSDL. If currently online, please verify the URI and/or format of the WSDL (http://www.adobe.com/cfusion/exchange/exchangedwwidgetsfacade.cfc?wsdl)
    Wer kann mir weiterhelfen?
    Gruss JR

    The widgets in Widget Browser were outdated and few if any developers were updating their offerings.  So Adobe closed it down.  Use the widgets in  jQuery UI.
    http://jqueryui.com/widget/
    http://jqueryui.com/
    Nancy O.

  • Customized Menu Bar

    Is there a away to create a custom Spry Menu Bar where each item has it's own specific rollover color by editing it with CSS?
    An example of what I am talking about can be found here: http://pittpropertymanagement.com/
    I know you can all of the item rollovers by editing the ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal            a.MenuBarItemHover rules, but I want to target specific list items. Is this possible?
    Thanks.

    Yes, of course! Add an ID to each main menu bar item (customize...) and in the CSS, make descendant selectors that include the ID and indicate the background color for that section.
    For this set of menu items:
      <li id="food"><a class="MenuBarItemSubmenu" href="#">Food</a>
        <ul>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
        </ul>
      </li>
    these selectors:
    ul.MenuBarHorizontal li#food a.MenuBarItemHover,
    ul.MenuBarHorizontal li#food  a.MenuBarItemSubmenuHover,
    ul.MenuBarHorizontal li#food  a.MenuBarSubmenuVisible
        background-color: green;
    will add the background-color 'green' to all hovered menu list items (and submenu list items) of the list item with the id="food".
    If you want yet another color for the submenus, do it this way:
    ul.MenuBarHorizontal li#food a.MenuBarItemHover
        background-color: green;
    and
    ul.MenuBarHorizontal li#food  a.MenuBarItemSubmenuHover,
    ul.MenuBarHorizontal li#food  a.MenuBarSubmenuVisible
        background-color: lightgreen;
    this latter will catch all the submenus's hover background-color.
    Beth

  • Shorten Menu items to make room for more icons in menu bar

    Is there any way to shorten the menu items in the menu bar, so that there will be more space for the icons? For instance, in Safari, the first Menu item, File, could be abbreviated to F, Edit could be E, etc. That way, the shortcuts for apps through icons in the menu bar would have more space, to permit more icons to be shown.
    An option, although not a full fledged one, would be to configure the icons in much the same way as in the dock, drag and drop them to the desired location.
    Any thoughts on this?

    Not possible by normal methods - some hacking is required.

  • How to edit Firefox 4+ Menu Bar

    I usually edit Menu Bar Items in Firefox with Stylish, but it only changes the items in the Classic Firefox Menu. How do you edit the Firefox 4+ Popup Button Menu Items?

    Have you tried this Add-on:
    *'''''Personal Menu (Personal Firefox Button)''''' --> https://addons.mozilla.org/en-US/firefox/addon/personal-menu/
    *Forum support for the Add-on --> http://forums.mozillazine.org/viewtopic.php?f=48&t=613565
    '''If this reply solves your problem, please click "Solved It" next to this reply when <u>signed-in</u> to the forum.'''
    Not related to your question, but...
    You may need to update some plug-ins. Check your plug-ins and update as necessary:
    *Plug-in check --> http://www.mozilla.org/en-US/plugincheck/
    *Adobe Shockwave for Director Netscape plug-in: [https://support.mozilla.org/en-US/kb/Using%20the%20Shockwave%20plugin%20with%20Firefox#w_installing-shockwave Installing ('''''or Updating''''') the Shockwave plugin with Firefox]
    *'''''Adobe PDF Plug-In For Firefox and Netscape''''': [https://support.mozilla.org/en-US/kb/Using%20the%20Adobe%20Reader%20plugin%20with%20Firefox#w_installing-and-updating-adobe-reader Installing/Updating Adobe Reader in Firefox]
    *Shockwave Flash (Adobe Flash or Flash): [https://support.mozilla.org/en-US/kb/Managing%20the%20Flash%20plugin#w_updating-flash Updating Flash in Firefox]
    *Next Generation Java Plug-in for Mozilla browsers: [https://support.mozilla.org/en-US/kb/Using%20the%20Java%20plugin%20with%20Firefox#w_installing-or-updating-java Installing or Updating Java in Firefox]

  • Labview - How to create custom menu bars, drop down menus, pop ups etc.

    Hi,
    I have  a very naive question. How does one create menu bars with custom labels (not NIs defaults), drop down / side menus, pop ups etc.?
    Thanks in advance
    Paul

    Search for the following on the NI website: Run-Time Menus, Run-Time Shortcut Menus.
    For pop ups, search for 'dialog' in the Examle Finder (Help -> Find Examples)
    Adnan Zafar
    Certified LabVIEW Architect
    Coleman Technologies

  • I want Firefox browser not,YAHOO (I don't know this came to be), I'm unable to use the How to make Firefox my browser because this requires a menu bar, and until I get rid of YAHOO! I can not see a menu bar. Help Regards Arthur Norton.

    I want Firefox as Browser. I've got Yahoo, but wish to delete it. I do not have a menu bar therefore cannot use How to make Firefox etc.

    The akamai servers are used by a lot of web servers to store large files (e.g. images and media files)
    A domain with fbstatic in it is likely a domain that is used by Facebook (fb), so you may have other problems if you stay on such a web page or get redirected
    If you use extensions (Tools > Add-ons > Extensions) like <i>Adblock Plus</i> or <i>NoScript</i> or <i>Flash Block</i> that can block content then make sure that such extensions aren't blocking content.
    Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).
    *Do not click the Reset button on the Safe mode start window or otherwise make changes.
    *https://support.mozilla.org/kb/Safe+Mode
    *https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes
    Clear the cache and the cookies from sites that cause problems.
    "Clear the Cache":
    *Firefox > Preferences > Advanced > Network > Cached Web Content: "Clear Now"
    "Remove Cookies" from sites causing problems:
    *Firefox > Preferences > Privacy > Cookies: "Show Cookies"

  • Dreamweaver Widget Browser for Html5 video player not working

    Html5 video player (kalturaPlayer) not working on server.  It works fine in Dreamweaver Live View.  Need to get this resolved soon for client's web page.
    Here is my code:
    <figure>  <div>
              <video width="640" height="360" poster="NewFiles/images.tdrbcf/home/2012/denise4video2.jpg" duration="2:04" preload="auto"  >
                <source type="video/h264"> <source src="NewFiles/images.tdrbcf/video/liv-fab-well.mp4" width="640" height="360" />
          <source type="video/webm"> <source src="NewFiles/images.tdrbcf/video/liv-fab-well.webm"  width="640" height="360" />
                <source type="video/ogg" &gt;>
                <source src="NewFiles/images.tdrbcf/video/liv-fab-well.ogv" width="640" height="360" />
                </video>
      </div></figure>
    I'm not as familiar with editing the script ... so I left it alone.  Could there be an error there, do the video player files need to be in a particular location and are there some servers that do not support the kalturaPlayer?

    Html5 video player (kalturaPlayer) not working on server.  It works fine in Dreamweaver Live View.  Need to get this resolved soon for client's web page.
    Here is my code:
    <figure>  <div>
              <video width="640" height="360" poster="NewFiles/images.tdrbcf/home/2012/denise4video2.jpg" duration="2:04" preload="auto"  >
                <source type="video/h264"> <source src="NewFiles/images.tdrbcf/video/liv-fab-well.mp4" width="640" height="360" />
          <source type="video/webm"> <source src="NewFiles/images.tdrbcf/video/liv-fab-well.webm"  width="640" height="360" />
                <source type="video/ogg" &gt;>
                <source src="NewFiles/images.tdrbcf/video/liv-fab-well.ogv" width="640" height="360" />
                </video>
      </div></figure>
    I'm not as familiar with editing the script ... so I left it alone.  Could there be an error there, do the video player files need to be in a particular location and are there some servers that do not support the kalturaPlayer?

  • Setting default browser for Mail's contextual menu items

    I use Firefox as my default browser. In "Safari>General>Default Web Browser" I have it set to Firefox and URL links within Mail trigger Firefox as expected.
    However, if I right-click within an email message on some text and select 'Search in Google' it opens in Safari regardless of the default browser indicated in the Safari preferences.
    Anybody know how to fix this? It's very annoying.
    Dual 2.0 GHz G5   Mac OS X (10.4.8)  

    Hello,
    I have been searching for the cause of this failure, but have not found much. It may relate to some problems with Contextual Menu Items, discussed within the article at the link below, but I do not know for sure:
    http://www.macdevcenter.com/pub/a/mac/2004/05/28/cm_pt1.html
    and may relate to some incompleteness in Firefox, rather than OSX, per se. The contextual menu items are separate from the default preferences, I believe.
    Btw, while I like some aspects of a Google search with Firefox, the fact that PDF links are downloaded, rather than opened in the browser, make me prefer Safari for searches. Perhaps there is a preference to cure this problem, but I have not looked very hard for it.
    Ernie

  • Hide Custom Menu Bar

    Hi All,
    Ours is a custom application, which requires to have the menu and tabs to be hidden when a particular page is opened. Please let me know how to accomplish the same.
    Thanks

    Welcome to the Apple Discussions. I don't know if you can turn off the old navbar with iWeb 1 but with V2 you can via the Inspector/Page/Page pane.
    In V2 you can select the text you added to the shape and, using the Inspector/Link/Format pane, you can remove the underline and make any color changes to the link, i.e. rollover, visited, unvisited, etc., that you want. This demo page has such a link.
    If you're needing to change it before you get the new version perhaps you should post in the iWeb (Previous to iWeb '08) forum.
    OT
    Message was edited by: Old Toad

  • Customizing Menu Bar

    Last night I was searching online for desktops and ran across this desktop.
    http://fc01.deviantart.com/fs10/i/2006/130/8/4/Shuffleme_a_little_bit__byPsychopulse.png
    How in the world can I go about changing the font and the color of the highlight?
    I'm dying to know....
    Cheers!

    Yeah, it's not free (any longer) but it's the answer
    Good luck

  • Help needed changing colour for each top Parent menu bar

    Can anyone help me I need the change the background of each
    parent menu block. with the child block keeping the same colour.
    but having a tint of the same colour in hover state.

    Can anyone help me I need the change the background of each
    parent menu block. with the child block keeping the same colour.
    but having a tint of the same colour in hover state.

  • Spry Menu Bar Widget 2.0 (1.0) -- IE 6 Rendering Snag

    Hi:
    Once again I need to call on the aid of others with more detailed knowledge of the spry frameworks, particularly the Spry Menu Widget 2.0 (vers. 1.0) developed by Adobe labs.
    I have posted the site to http://www.aclco.org/testing/index.html.  You will see that it works beautifully, thanks to the help of many contributors, except in IE 6.0, where, when the sub menus become visible and drop down, it causes all page elements (divs) to be pushed down to create the necessary room to accommodate the drop down.  The natural overlap of the sub-menu over pre-existing content doesn't seem to overlay properly.
    It does this on all pages, and not just those which present flash sideshows.  And as I say it is peculiar to IE 6.
    I have followed the tutorial provided by David Powers in deploying the widget and have not altered the spry skin css or the basic css.  Any changes (affecting padding, etc. and adding of background images where created using the widget browser and supplemented in the css added to the template page.  The "add-on" css was then added to the general style sheet governing the whole site layout.
    I was wondering if anyone else has experienced this problem, if there are any work arounds or hacks that anyone is aware of, or any other suggestions that might help.
    I haven't been able to preview this on a free standing PC using IE6, but was able to reproduce the problem on 2 cross browser testing services employing a "live mode".  I renders properly until the sub-menus are called upon to become visible, and then the problem manifests.
    Your assistance will be greatly appreciated.
    Sincerely,
    Steve Webster
    Attach.
    Please note:  Attached are the relevant excerpts from the customized style sheet as amended from the spry widget browser:
    /*  -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles --  */
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
    These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
    MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
    MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
    MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
    MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
    and centered in its parent container.
    MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
    background-color:transparent;
    font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
    MenuItem, and MenuItemLabel
    at a given level all use same definition for ems.
    Note that this means the size is also inherited to child submenus,
    so use caution in using relative sizes other than
    100% on submenu fonts. */
    font-weight: normal;
    font-size: 17px;
    font-style: normal;
    padding:0;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
    .MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
    .MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
    .MenuBarFixedLeft {
    float: left;
    width: 80em;
    .MenuBarFixedCentered {
    float: none;
    width: 80em;
    margin-left:auto;
    margin-right:auto;
    .MenuBarFixedCentered br {
    clear:both;
    display:block;
    .MenuBarFixedCentered .SubMenu br {
    display:none;
    .MenuBarFullwidth {
    float: left;
    width: 100%;
    /* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0; /* Zero out margin  on the item containers. The MenuItem is the active hover area.
    For most items, we have to do top or bottom padding or borders only on the MenuItem
    or a child so we keep the entire submenu tiled with items.
    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
    padding: 10px 10px 10px 4px;
    background-color:#000088;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segme nt-Dark.png);
    background-repeat:repeat-x;
    #MenuBar  .MenuItemFirst {
    border-style: none none none none;
    #MenuBar .MenuItemLast {
    border-style: none none none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
    text-align:center;
    line-height:1.4em;
    color:#ffffff;
    background-color:transparent;
    padding: 0px 18px 0px 5px;
    width: 10em;
    width:auto;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    font-style: normal;
    background-color:#000088;
    padding:0px 2px 0px 0px;
    border-width:0px;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    /* Border styles are overriden by first and last items */
    border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
    border-style: none;
    padding: 0px;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 0px;
    #MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 10px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:left;
    line-height:1em;
    background-color:transparent;
    color:#ffffff;
    padding: 10px 10px 10px 10px;
    width: 240px;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
    background-color: #2E35A3;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segme nt%20Light2.png);
    background-repeat:repeat-x;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
    background-color:2E35A3;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: transparent;
    color: #ffffff;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
    background-color: transparent;
    min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%; /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
    and your personal taste.
    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
    on MenuItemContainer and MenuItem on the parent
    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
    the dropdown with the left of the menu item label.*/
    z-index:10;
    #MenuBar.MenuBarVertical .SubMenuVisible {
    top: 0px;
    left:100%;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: transparent;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
    vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
    * The 'SpryIsIE6' class is placed on the HTML element by  the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
    background-color: transparent; /* consider exposing this prop separately*/
    color: #ffffff;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
    margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    /* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */

    I have systematically reviewed the tutorial of David Powers on the Spry Menu bar 2.0, and recreated the process in a methodical process - making one change at a time, and then checking each step on a cross browser testing server, and have found, quite to my amazement that what seems to be causing the problem of the "gap" in IE 6 is by removing the customized styles from the head of the individual pages, and placing them in CSS stylesheet that governs the entire site.
    I find this quite inexplicable.  When the customized CSS rules governing the menu bar are situated in a separate stylesheet, the page renders well enough for any of the "modern" browsers, but won't render in IE 6.  All that I get is a horizontal menu with drop downs, but none of the styling (specifically background colours, background images, etc.) that are called for in the stylesheet and that otherwise appear when rendered by other browsers.
    I realize that this sounds strange, but I was wondering if anyone had experienced this phenomenon, or could offer any explanation.
    Any suggestions would be greatly appreciated.
    Steve Webster

  • Spry Menu Bar 2.0 (1.0) - Handling of widget generated CSS, placement and rendering problems in CSS

    Hello:
    I wanted to repost my question to re-frame the issue based on what I have learned thus far.
    I am working on a website that has been developed using the Spry Menu Bar Framework UI (2.0) I.0, that has some peculiar rendering problems that affect IE 6 in particular.  The CSS is reprinted below.
    In particular, when I post the widget generated CSS in the head as it is orginally situated by the framework, the menu bar works fine.  However, it seemed to me that I should be able to reduce page weight (an important consideration considering my target population) by placing it in the general style sheet governing the entire site.
    When I place the styles at the beginning of the style sheet the menu doesn't render at all in any of the browsers (IE 6+, Firefox, Opera, Safari, Netscape, etc.) as it conflicts with the general rules governing links that appear later in the style sheet.  When I place the styles specific to the Menu bar at the end of the style sheet, then the menu bar renders properly in all browsers except IE 6.
    The odd thing is that the only way to ensure that the menu bar works in IE 6 is to keep the menu related styles in the head of each page.  This raises problems related to page weight (not an insurmountable consideration if no other solution can be found) but still an issue.  Likewise I need to support IE 6, again given the target audience/population.  The issue obviously has something to do with specificity, but I am not certain that is the only consideration at work here.  I have not tried the !important selector in regard to the menu, as IE 6 seems to only partially support this.
    Thanks in advance for any advice or insight that can be provided.  Thanks in particular to Martin for his contributions to my earlier question related to this issue.
    Steve Webster.
    The CSS governing the horizontal menu bar is as follows:  (currently the following CSS is embedded in the head of the web page)
    <style type="text/css">
    /*  -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles --  */
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
       these rules, with the exception of the images used for down or rightpointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
       .MenuBar - Applies to all menubars - default is horizontal bar, allsubmenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
       You can also pass in extra classnames to set your desired top levelmenu bar layout. Normally, these are set by using a preset.
        They only apply to horizontal menu bars:
            MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
            MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
            MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
            MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                            and centered in its parent container.
            MenuBarFullwidth - Grows to fill its parent container width.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
       with the rules. This permits use of multiple MenuBarBasic widgets onthe same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:transparent;
       font-family: Arial, Helvetica, sans-serif; /* Specify fonts on onMenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                    MenuItem, and MenuItemLabel
                                                    at a given level all use same definition for ems.
                                                    Note that this means the size is also inherited to child submenus,
                                                    so use caution in using relative sizes other than
                                                    100% on submenu fonts. */
        font-weight: normal;
        font-size: 17px;
        font-style: normal;
        padding:0;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
        display:none;
    .MenuBarLeftShrink {
        float: left; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarRightShrink {
        float: right; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarFixedLeft {
        float: left;
        width: 80em;
    .MenuBarFixedCentered {
        float: none;
        width: 80em;
        margin-left:auto;
        margin-right:auto;
    .MenuBarFixedCentered br {
        clear:both;
        display:block;
    .MenuBarFixedCentered .SubMenu br {
        display:none;
    .MenuBarFullwidth {
        float: left;
        width: 100%;
    /* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
        padding: 0px 0px 0px 0px;
        margin: 0;     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                    For most items, we have to do top or bottom padding or borders only on the MenuItem
                    or a child so we keep the entire submenu tiled with items.
                    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
        padding: 10px 10px 10px 4px;
        background-color:#000088;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment-Dark.png);
        background-repeat:repeat-x;       
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none none none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
        text-align:center;
        line-height:1.4em;
        color:#ffffff;
        background-color:transparent;
        padding: 0px 18px 0px 5px;
        width: 10em;
        width:auto;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
        width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 15px;
        font-style: normal;
        background-color:#000088;
        padding:0px 2px 0px 0px;
        border-width:0px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: none;
        padding: 0px;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 0px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: none none none none;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
        padding-bottom: 10px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
        text-align:left;
        line-height:1em;   
        background-color:transparent;
        color:#ffffff;
        padding: 10px 10px 10px 10px;
        width: 240px;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
        background-color: #2E35A3;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment%20Light2.png);
        background-repeat:repeat-x;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
        background-color:#2E35A3;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #ffffff;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: transparent;
       min-width:0%;  /* This keeps the menu from being skinnier than theparent MenuItemContainer - nice to have but not available on ie6 */
        border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
        top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                        and your personal taste.
                       0px will left align the dropdown with the content area of theMenuItemContainer. Assuming you keep the margins 0
                        on MenuItemContainer and MenuItem on the parent
                        menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                        the dropdown with the left of the menu item label.*/
        z-index:10;
    #MenuBar.MenuBarVertical .SubMenuVisible {
        top: 0px;   
        left:100%;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
        background-color: transparent;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
        top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                    vertically 'centered' on its invoking item */
        left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element forselection, such as "hover" (MenuItemHover) and "has a subMenu"(MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in aselector for an element. For a selector such as '.foo.bar.baz', IE6ignores
    * all but the final classname (here, '.baz'), and sets thespecificity accordingly, counting just one of those classs assignificant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lotof these needed, the plugin does not generate the extra classes formodern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these,as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.jsscript.
    * The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser isInternet Explorer 6. This avoids the necessity of IE conditionalcomments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
        margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    /* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
    </style>
    The CSS governing the site generally is reproduced below:  (my belief is that it is the a:link, a:visited,  a:hover, a:active styles that may be in conflict).
    @charset "utf-8";
    body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
       min-height: 0; /* This is necessary to overcome the "haslayout" bugthat is found in Windows 7 in conjuction with IE8.  For Moreinformation see: URL -- http://reference.sitepoint.com/css/haslayout.html */
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align:center; /* This allows for the centering of the container and overcomes a bug inherent in IE 5 */
        color: #000000;
        list-style-image: none;
        background-color: #FCFCFC;
    h1,h2,h3,h4,h5,h6 {
    color:#000066;
    a:link {
        color: #151A96;
        text-decoration: underline;
    a:visited {
        text-decoration: underline;
        color: #1B8DCD;
    a:hover {
        text-decoration: none;
        color: #F30A0A;
    a:active {
        text-decoration: underline;
        color: #151A96;
    #container {
        width: 960px;   
        margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
        text-align: left; /* this overrides the text-align: center on the body element. */
        background-image:
        url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Midsection %20_960.png);
        background-repeat: repeat-y;
    #header {
           padding: 0;  /* this padding matches the left alignment of the elementsin the divs that appear beneath it. If an image is used in the #headerinstead of text, you may want to remove the padding. */
            width:960px;
            height:332px;
            background-image:
            url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960 .png);
            background-repeat:no-repeat;
    #header h1 {
        margin-right: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
        padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
        display:none;
    #header img {
        display: none;
    #Main_nav_contents {
        padding: 0;
        margin-top: 0px;
        height: 39px;
        width: 950px;       
        padding-top: 275px; 
        padding-left: 39px;
        z-index: 3; 
    #MenuBarVertical {
        margin-bottom: 50px;
        padding-top: 50px;
        padding-bottom:200px;
        padding-left: 15px;
        padding-right: 15px;
    .mainContent_left {
       margin: 0;/* the right margin on this div element creates the columndown the right side of the page - no matter how much content thesidebar1 div contains, the column space will remain. You can removethis margin if you want the #mainContent div's text to fill the#sidebar1 space when the content in #sidebar1 ends. */
        padding-left:30px;
        padding-right:20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
        width: 600px;
        float: left;
    .sidebar_right {
        float: right; /* since this element is floated, a width must be given */
        width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
        margin-top: 30px;
        margin-left:0;
        margin-right:10px;
        font-size:90%;
    .mainContent_right {
        margin-left: 10px;
        padding-left:30px;
        padding-right:20px;
        width: 600px;
        float: right;
    .sidebar_left {
        float: left; /* since this element is floated, a width must be given */
        width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
        margin-top: 30px;
        margin-left:30px;
        margin-right:0;
        overflow: hidden;
        font-size:90%;
    .main_content_centered {
        width: 650px;
        margin-left: 155px;
    .main_content_centered_header {
        margin-left: 75px;
    .sidebar_textbox {
        margin: 0px;   
        width: 260px;
        padding: 2px;
    .sidebar_textbox_header {
        width:255px;
        height:58px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Por trait%20Textbox%20Header.png);
    .sidebar_textbox_background_middle {
         width: 255px;   
        padding-top: 12px;   
        padding-bottom: 10px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Por trait%20Textbox%20Middle.png);
        background-repeat: repeat-y;
    .sidebar_textbox_content {
       /* The width and padding are set as follows to accomodate quirks inbrowser rendering and to ensure that text is contained within thebackground of the text box */
        width: 230px;
        padding-left: 20px;
        padding-right: 40px;
    .sidebar_textbox_footer {
        width:255px;
        height:64px;
    background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Port rait%20Textbox%20Footer.png);
    #issues_menu a:link {
        color: #151A96;
        text-decoration: none;
        font-weight:bold;
    #issues_menu a:visited {
        color: #151A96;
        font-weight:bold;
        text-decoration: none;
    #issues_menu a:hover {   
        color: #F30A0A;
        font-weight:bold;
        font-style: oblique;
        text-decoration: none;
    #issues_menu a:active {
        color: #151A96;
        font-weight:bold;
        text-decoration: none;
    #archives {
        padding-top: 15px;
        padding-right: 15px;
        padding-bottom: 20px;
        padding-left: 0px;
    .landscape_textbox {
        width: 500px;
        margin-right: 0px;
        margin-left: 30px;
        padding-top:35px;
        padding-bottom: 25px;
        font-style: normal;
        font-weight: normal;
    .landscape_textbox_hdr {
        width:500px;
        height:38px;
        margin:auto;
        padding:0;
        background-image:
    url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%2 0Header.png);
    .landscape_textbox_middle {
        width:auto;
        margin:auto;
        padding-top: 12px;
        padding-bottom: 12px;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/lan dscapte%20Textbox%20Middle.png);
        background-repeat:repeat-y;
    .landscape_textbox_content {
        width:450px;
        padding:25px;
    .landscape_textbox_ftr {
        width:500px;
        height:44px;
        margin:auto;
        padding:0;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Lan dscape%20Textbox%20Footer.png);
    #footer {
        padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
        width: 960px;
        height: 222px;
        background-image:
        url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_ 960.png);
        background-repeat:no-repeat;
    #footer p {
       margin: 0px; /* zeroing the margins of the first element in the footerwill avoid the possibility of margin collapse - a space between divs */
        padding:0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
        text-align:center;
        margin-left: 50px;
        margin-right: 50px;
        padding: 10px;
        font-size: small;
    #footer h5 {
    text-align:center;
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .dropcap {
        display: block;
        float: left;
        line-height: 80%;
        font-size: 250%;
        font-weight: bolder;
        color: #000066;   
        padding: .03em .1em 0 0;
    .red_arrows {
        list-style-position: outside;
        list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Arrow%20Large.png);    
    .blue_bullets {
        list-style-position: outside;
        list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Bullet%20Medium%20Fu ll.png);   
    .attention {
        color: #F30A0A;
        font-size:x-large;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-weight:900;
    .attention_small {
        color: #F30A0A;
        font-size:large;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-weight:900;
    .table {
        table-layout:fixed;
    .blue {
        color: #00F;
    #container .mainContent_left p .blue {
        color: #0303A0;

    Hi Nancy:
    The specific code that I am referring to is the CSS code governing the styling of the spry menu widget that only works in IE 6 if, and only if, it remains in the head of the web page.  If removed and placed in a stylesheet, the IE plugins fail to compensate for the IE 6 "gap" bug.  As I said, it doesn't make sense to me that, assuming specificity is addressed, that these can not be included in an external style sheet.  I am looking for a) an explanation why they must remain embedded in the web page; and 2) any means by which I might be able to export them.
    I will reproduce the specific css style (code) below:  it should also be visable through reveal source --
    Thanks again, Steve Webster.
    The CSS governing the horizontal menu bar is as follows:  (currently the following CSS is embedded in the head of the web page)
    <style type="text/css">
    /*  -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles --  */
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
       these rules, with the exception of the images used for down or rightpointing arrows, which are in the file SpryMenuBasic.css
         These assume the following widget classes for menu layout (set in a preset)
       .MenuBar - Applies to all menubars - default is horizontal bar, allsubmenus are vertical - 2nd level subs and beyond are pull-right.
        .MenuBarVertical - vertical main bar; all submenus are pull-right.
       You can also pass in extra classnames to set your desired top levelmenu bar layout. Normally, these are set by using a preset.
        They only apply to horizontal menu bars:
            MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
            MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
            MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
            MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                            and centered in its parent container.
            MenuBarFullwidth - Grows to fill its parent container width.
        In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
       with the rules. This permits use of multiple MenuBarBasic widgets onthe same page with different layouts. Because of IE6 limitations,
        there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
        background-color:transparent;
       font-family: Arial, Helvetica, sans-serif; /* Specify fonts on onMenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                    MenuItem, and MenuItemLabel
                                                    at a given level all use same definition for ems.
                                                    Note that this means the size is also inherited to child submenus,
                                                    so use caution in using relative sizes other than
                                                    100% on submenu fonts. */
        font-weight: normal;
        font-size: 17px;
        font-style: normal;
        padding:0;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
        display:none;
    .MenuBarLeftShrink {
        float: left; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarRightShrink {
        float: right; /* shrink to content, as well as float the MenuBar */
        width: auto;
    .MenuBarFixedLeft {
        float: left;
        width: 80em;
    .MenuBarFixedCentered {
        float: none;
        width: 80em;
        margin-left:auto;
        margin-right:auto;
    .MenuBarFixedCentered br {
        clear:both;
        display:block;
    .MenuBarFixedCentered .SubMenu br {
        display:none;
    .MenuBarFullwidth {
        float: left;
        width: 100%;
    /* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
        padding: 0px 0px 0px 0px;
        margin: 0;     /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                    For most items, we have to do top or bottom padding or borders only on the MenuItem
                    or a child so we keep the entire submenu tiled with items.
                    Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
        padding: 10px 10px 10px 4px;
        background-color:#000088;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment-Dark.png);
        background-repeat:repeat-x;       
    #MenuBar  .MenuItemFirst {
        border-style: none none none none;
    #MenuBar .MenuItemLast {
        border-style: none none none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
        text-align:center;
        line-height:1.4em;
        color:#ffffff;
        background-color:transparent;
        padding: 0px 18px 0px 5px;
        width: 10em;
        width:auto;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
        width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 15px;
        font-style: normal;
        background-color:#000088;
        padding:0px 2px 0px 0px;
        border-width:0px;
        border-color: #cccccc #cccccc #cccccc #cccccc;
        /* Border styles are overriden by first and last items */
        border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
        border-style: none;
        padding: 0px;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
        padding-top: 0px;
    #MenuBar .SubMenu .MenuItemLast {
        border-style: none none none none;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
        padding-bottom: 10px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
        text-align:left;
        line-height:1em;   
        background-color:transparent;
        color:#ffffff;
        padding: 10px 10px 10px 10px;
        width: 240px;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
        background-color: #2E35A3;
        background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment%20Light2.png);
        background-repeat:repeat-x;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
        background-color:#2E35A3;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
        background-color: transparent;
        color: #ffffff;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
        background-color: transparent;
       min-width:0%;  /* This keeps the menu from being skinnier than theparent MenuItemContainer - nice to have but not available on ie6 */
        border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
        top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
        left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                        and your personal taste.
                       0px will left align the dropdown with the content area of theMenuItemContainer. Assuming you keep the margins 0
                        on MenuItemContainer and MenuItem on the parent
                        menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                        the dropdown with the left of the menu item label.*/
        z-index:10;
    #MenuBar.MenuBarVertical .SubMenuVisible {
        top: 0px;   
        left:100%;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
        background-color: transparent;
        min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
        top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                    vertically 'centered' on its invoking item */
        left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                    to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element forselection, such as "hover" (MenuItemHover) and "has a subMenu"(MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in aselector for an element. For a selector such as '.foo.bar.baz', IE6ignores
    * all but the final classname (here, '.baz'), and sets thespecificity accordingly, counting just one of those classs assignificant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lotof these needed, the plugin does not generate the extra classes formodern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these,as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.jsscript.
    * The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser isInternet Explorer 6. This avoids the necessity of IE conditionalcomments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
        background-color: transparent; /* consider exposing this prop separately*/
        color: #ffffff;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
        margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    /* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
    </style>

Maybe you are looking for

  • How to store multiple data in one aray at one go?

    Hi i am creating a Recipe Cooking Book and i have got a recipe class, ingredient class, equipment class and jFORM GUI. the gui form will have a list and it will contain couple of equipments. the user should be able to select more than 1 equipments wh

  • Changing the NTFS Allocation for win2012R2 VM with or without reformatting

    Hi community  Benjamin Niaulin has written an excellent article on maximising the performance of SharePoint 2013 on a VM. Now one of the major improvements it increase the NTFS Allocation size as this will make SQLServer have few reads .. Ok but sinc

  • Service Request template with status resolved

    Hi all, There is a way to create a Service Request template with the status "resolved"? We would like to use this kind of template in a location when we don't care about  the issues, but we need to know their number. So we just have to open a new SR,

  • Question a bout Ospf & eigrp

    Guys, I would like to have more over view to the following:- 1- what is the exact functionality of (DR/BDR) on ospf tobology. 2- what is the point of using (auto-summary) command on eigrp, and when we should use it? 3- also I am alittle bit confused

  • Lost key Microsoft Office

    I'm changing to a new computer.  I lost the key code to Microsoft Office 11.  I don't have the disc either.  I found my proof of purchase though on amazon.  Will Microsoft give me a new key?  Just trying to anticipate the cost of an new computer.  Th