Arrow in menubar

Hi guys,
I've a small problem. I've a BorderPain and in the top I've a MenuBar with some MenuItem (1 ord two for every Menu). When I click in the menu the menu is opened but is displayed a down arrow and only one menuitem is displayed!!!
It's very strage, infact after I clicked on the arrow the menu is show entirely and no arrow is displayed.
Any suggestion?
Thanks very much

Sorry but that is the only code that create the menu. It's very strange infact in my scenebuilder in preview mode I've not this problem but after, when I run the application I have the arrow in the menu.
This is the controller of the main app where there is the menu:
public class OdontoxController implements Initializable {
    private Main application;
    @FXML //  fx:id="container"
    private Pane container; // Value injected by FXMLLoader
//    @FXML //  fx:id="itemLavorazioni"
//    private MenuItem itemLavorazioni; // Value injected by FXMLLoader
//    @FXML //  fx:id="itemClienti"
//    private MenuItem itemClienti; // Value injected by FXMLLoader
//    @FXML //  fx:id="itemMovimenti"
//    private MenuItem itemMovimenti; // Value injected by FXMLLoader
//    @FXML //  fx:id="itemProdotti"
//    private MenuItem itemProdotti; // Value injected by FXMLLoader
//    @FXML //  fx:id="menuAnagrafiche"
//    private Menu menuAnagrafiche; // Value injected by FXMLLoader
//    @FXML //  fx:id="menuLavorazioni"
//    private Menu menuLavorazioni; // Value injected by FXMLLoader
//    @FXML //  fx:id="menubar"
//    private MenuBar menubar; // Value injected by FXMLLoader
//    @FXML //  fx:id="menucontabilita"
//    private Menu menucontabilita; // Value injected by FXMLLoader
    @FXML //  fx:id="vbox"
    private VBox vbox; // Value injected by FXMLLoader
    @FXML //  fx:id="headerApp"
    private Pane headerApp; // Value injected by FXMLLoader
    @Override // This method is called by the FXMLLoader when initialization is complete
    public void initialize(URL fxmlFileLocation, ResourceBundle resources) {
//        assert itemClienti != null : "fx:id=\"itemClienti\" was not injected: check your FXML file 'Odontox.fxml'.";
//        assert itemLavorazioni != null : "fx:id=\"itemLavorazioni\" was not injected: check your FXML file 'Odontox.fxml'.";
//        assert itemMovimenti != null : "fx:id=\"itemMovimenti\" was not injected: check your FXML file 'Odontox.fxml'.";
//        assert itemProdotti != null : "fx:id=\"itemProdotti\" was not injected: check your FXML file 'Odontox.fxml'.";
//        assert menuAnagrafiche != null : "fx:id=\"menuAnagrafiche\" was not injected: check your FXML file 'Odontox.fxml'.";
//        assert menuLavorazioni != null : "fx:id=\"menuLavorazioni\" was not injected: check your FXML file 'Odontox.fxml'.";
//        assert menubar != null : "fx:id=\"menubar\" was not injected: check your FXML file 'Odontox.fxml'.";
//        assert menucontabilita != null : "fx:id=\"menucontabilita\" was not injected: check your FXML file 'Odontox.fxml'.";
        assert vbox != null : "fx:id=\"vbox\" was not injected: check your FXML file 'Odontox.fxml'.";
        // initialize your logic here: all @FXML variables will have been injected
        start();
    private void start() {
    public void setApp(Main application) {
        this.application = application;
    // Handler for Menu[fx:id="menuLavorazioni"] onAction
    public void processLavorazioni(ActionEvent event) {
        try {
            LavoriController controller = (LavoriController) replaceSceneContent("lavori/Lavori.fxml");
            controller.setOdontoxController(this);
        } catch (Exception ex) {
            ex.printStackTrace();
    public void processNuovaLavorazione(ActionEvent event) {
        try {
            LavoriDettaglioController controller = (LavoriDettaglioController) replaceSceneContent("lavori/LavoriDettaglio.fxml");
            controller.setOdontoxController(this);
        } catch (Exception ex) {
            ex.printStackTrace();
    // Handler for Menu[fx:id="menuLavorazioni"] onAction
    public void processClienti(ActionEvent event) {
        try {
            ClientiController controller = (ClientiController) replaceSceneContent("clienti/Clienti.fxml");
            controller.setApp(application);
        } catch (Exception ex) {
            ex.printStackTrace();
    // Handler for MenuItem[fx:id="itemMovimenti"] onAction
    public void processMovimenti(ActionEvent event) {
        try {
            MovimentiController controller = (MovimentiController) replaceSceneContent("movimenti/Movimenti.fxml");
            controller.setApp(application);
        } catch (Exception ex) {
            ex.printStackTrace();
    // Handler for MenuItem[fx:id="itemProdotti"] onAction
    public void processProdotti(ActionEvent event) {
        try {
            ProdottiController controller = (ProdottiController) replaceSceneContent("prodotti/Prodotti.fxml");
            controller.setApp(application);
        } catch (Exception ex) {
            ex.printStackTrace();
    public Initializable replaceSceneContent(String fxml) throws Exception {
        FXMLLoader loader = new FXMLLoader();
        InputStream in = OdontoxController.class.getResourceAsStream(fxml);
        loader.setBuilderFactory(new JavaFXBuilderFactory());
        loader.setLocation(OdontoxController.class.getResource(fxml));
        AnchorPane page;
        try {
            page = (AnchorPane) loader.load(in);
        } finally {
            if (in != null) {
                in.close();
        container.getChildren().clear();
        container.getChildren().add(page);
        return (Initializable) loader.getController();
}As you can see I have commented the code that refers the menu as test but not even in this case the menu works fine.
Any ideas?
Thanks

Similar Messages

  • Spry Menu 2.0 issues in IE7..   yes another one!

    I have CS4, and have used the widget browser to create a Spry Menu 2.0 and have imported it to my site. It displays fine in every browser except for IE7. I have been reading a LOT of threads on issues similiar to this one, so I'm prepared to tell everyone I know to upgrade to at least IE8!! However, I would like to fix it if possible. The menu bar is located in an include file and is attached to all my pages through the php function. I have made zero changes to the css code since I imported it into the site.
    I also am wondering why there are two css pages for the menu bar.??
    Any help would be appreciated..
    One of the pages on the site is: michaelandrewshairstudio.com/offers.php
    That page is: ( I have taken out some meta tags and content, but the div's are all still in place.) I also deleted some commented tags by accident when I imported it..
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Michael Andrews Hair Salon Offers</title>
    <link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBar.css" rel="stylesheet" type="text/css" />
    <link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
    <script type='text/javascript' src="Spry-UI-1.7/includes/SpryDOMUtils.js"></script>
    <script type='text/javascript' src="Spry-UI-1.7/includes/SpryDOMEffects.js"></script>
    <script type='text/javascript' src="Spry-UI-1.7/includes/SpryWidget.js"></script>
    <script type='text/javascript' src="Spry-UI-1.7/includes/SpryMenu.js"></script>
    <script type='text/javascript' src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js"></script>
    <script type='text/javascript' src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js"></script>
    <link href="CSS/stylesA.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="outerwrapper">
    <div id="header">
    <div id="navbar">
    <?php include("Spry-UI-1.7/includes/SpryMenuBar.php"); ?>
    </div>
    </div>
    <div id="mainbody">
    <div id="logo">
    </div>
    <hr />
    <div id="content">
    </div>
    </div>
    <div id="footer">
    <div id="footernav">
    </div>
    <div id="footertext">
    </div>
    </div>
    </div>
    </body>
    </html>
    SpryMenuBar.css
    #MenuBar  {
    background-color:#333;
    font-family: "Trebuchet MS", 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: 14px;
    font-style: normal;
    padding:0;
    border-color: #999999 #999999 #999999 #999999;
    border-width:3px;
    border-style: outset outset outset outset;
    /* 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: 0px 24px 0px 0px;
    background-color:#333333;
    border-width:1px;
    border-color: #cccccc #ffffff #cccccc #999999;
    border-style: none none none solid;
    #MenuBar  .MenuItemFirst {
    border-style: none none none none;
    #MenuBar .MenuItemLast {
    border-style: none none none solid;
    #MenuBar  .MenuItem  .MenuItemLabel{
    text-align:center;
    line-height:1.4em;
    color:#cccccc;
    background-color:#333333;
    padding: 6px 15px 6px 39px;
    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: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 12px;
    font-style: normal;
    background-color:#666666;
    padding:0px 2px 0px 0px;
    border-width:1px;
    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: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 6px;
    #MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 6px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:left;
    line-height:1em;
    background-color:#666666;
    color:#cccccc;
    padding: 6px 12px 6px 5px;
    width: 7em;
    width:auto;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
    background-color: #333333;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: #333333; /* consider exposing this prop separately*/
    color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
    background-color: #333333;
    color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
    background-color: #666666;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: #666666;
    color: #ffffff;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
    background-color:#333;
    min-width:100%;  /* 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: #ffffff;
    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: #333333; /* consider exposing this prop separately*/
    color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
    background-color: #666666; /* 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 */
    SpryMenuBasic.css
    /* SpryMenuBasic.css - version 0.5 - Spry Pre-Release 1.7 */
    /* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
    /* This is the css for a basic Spry 2 MenuBar.
    * The first section is basic layout, and should in general not need to be  modified.
    * The final section of this file specifies images to use for arrows for the menu. These
    * are either down or right-pointing as required by horizonatal or vertical layouts. You
    * can either replace the referenced images with your own, or you can modify these rules to
    * point to your won images.
    * These rules are supplemented by those specified in the OAM file for inclusion in the html document,
    * or alternatively, the file SpryMenuBarBasicSkin.css which is included with this widget. */
    /* Resets for ul and li in menus */
    .MenuBar  .MenuBarView, .MenuBar  .SubMenuView {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
    /*** Layout Rules for Basic Menu ***/
    /* Top Level MenuBar
    * Because we float the MenuItemContainers in the MenuBar, we have to make sure the menubar wrapper expands to hold them all.
    * The simplest way is to float the widget wrapper
    .MenuBar { /* overridden by .MenuBarVertical version of this rule */
    float:left;
    width:100%;
    .MenuBarVertical {
    float:left; /* Used to make menubar shirink to fit contents */
    width:auto;
    /* SubMenus */
    .MenuBar .SubMenu {
    display:block;
    position:absolute;
    top:0;
    left:-10000px; /* By default, all non-visible submenus are hidden by moving way to the west */
    padding:0;
    /* First level of submenus - pulls down from horizontal menubar, right from vertical */
    .MenuBar .SubMenuVisible{ /* overridden by .MenuBarVertical version of this rule */
    top:100%;
    left:0px;
    .MenuBarVertical .SubMenuVisible {
    top:0px;
    left:100%;
    /* All submenus below level 1. All pullout to the right */
    .MenuBar .SubMenu .SubMenuVisible {
    display:block;
    position:absolute;
    top:0px;
    left:100%;
    /* MenuItems, MenuItemLabels, and MenuItemContainers */
    .MenuBar .MenuItem {
    display:block;
    text-decoration:none;
    .MenuBar .MenuItemLabel {
    display:block;
    .MenuBar .MenuItemContainer {
    position:relative;
    white-space:nowrap;
    float:left; /* overridden by .MenuBarVertical version of this rule */
    display:block;
    margin:0;
    padding:0;
    .MenuBarVertical .MenuItemContainer {
    float:none;
    .MenuBar .SubMenu .MenuItemContainer {
    float:none;
    /* Layout Rules needed by IE6 - excluded from other browsers */
    .SpryIsIE6 .SubMenu .SubMenu {
    width:100px;
    height:1%;
    .SpryIsIE6 .MenuBar .SubMenuVisible .SubMenuVisible {
    width:auto;
    /* End Layout section */
    * Arrows - This section specifies arrow images for a submenu dropdowns in Basic SpryMenu.
    .MenuBar .MenuItemLabel{
    background-image:none;
    /* For all arrows used here, we depend upon the image to push itself away from right edge, or the user can add right padding to the MenuItem */
    .MenuBar .MenuItemWithSubMenu .MenuItemLabel{
    background-image:url("images/ArrowMenuDownGrey.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .MenuBar .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
    background-image:url("images/ArrowMenuDownWhite.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .MenuBarVertical .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
    background-image:url("images/ArrowMenuRight.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .MenuBarVertical .MenuItemWithSubMenu .MenuItemLabel{
    background-image:url("images/ArrowMenuRight.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .MenuBar .SubMenu .MenuItemWithSubMenu .MenuItemLabel{
    background-image:url("images/ArrowMenuRight.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .MenuBar .SubMenu .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
    background-image:url("images/ArrowMenuRight.gif");
    background-position:right center;
    background-repeat:no-repeat;
    /* IE6 rules for Arrows */
    .SpryIsIE6 .MenuBar .MenuItemWithSubMenuHover .MenuItemLabel{
    background-image:url("images/ArrowMenuDown.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .SpryIsIE6 .MenuBarVertical .MenuItemWithSubMenuHover .MenuItemLabel{
    background-image:url("images/ArrowMenuRight.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .SpryIsIE6 .MenuBar .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel{
    background-image:url("images/ArrowMenuRight.gif");
    background-position:right center;
    background-repeat:no-repeat;

    I love your subject line
    Spry Menu 2.0 issues in IE7..   yes another one!
    It is us as designers/developers that need to create websites for all current browsers. No sense in blaming the browsers, although in this case we could blame Spry Menu 2.0.
    Problem with that is that Spry Menu 2.0 has been successfully tested in all modern browsers.
    This leaves us with just one possibility, the designer/developer has erred somewhere along the line. After having checked the support files (JS and CSS) and looked at the markup, we now go to the constructor and see the following
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
        widgetID: "MenuBar",
        widgetClass: "MenuBar  MenuBarLeftShrink",
        insertMenuBarBreak: true,
    A comma after the last value.
    I also am wondering why there are two css pages for the menu bar.??
    One is the standard CSS for the menubar and under normal circumstances, should not be touched; the other is for the convenience of the designer/developer so that he/she can tweak the menubar to suit. If you wish, you can combine both. In all cases, keep in mind that the CSS for the standard (basic) menubar should come first, so that the other CSS can override the first.
    This needs to be corrected in your document
    Gramps

  • Change the colour of my submenu in spry-UI-1.7

    hello,
    as the title says, how do i change the background colour of my submenu (the one that collapses)  and the hover action background.
    i created it with the widget browser, but found out this colour doesnt work so well.
    in my spry-UI-1.7>css>Menu>basic i have two .css files
    SpryMenuBasic.css
    this is the css:
    @charset "UTF-8";
    /* SpryMenuBasic.css - version 0.5 - Spry Pre-Release 1.7 */
    /* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
    /* This is the css for a basic Spry 2 MenuBar.
    * The first section is basic layout, and should in general not need to be  modified.
    * The final section of this file specifies images to use for arrows for the menu. These
    * are either down or right-pointing as required by horizonatal or vertical layouts. You
    * can either replace the referenced images with your own, or you can modify these rules to
    * point to your won images.
    * These rules are supplemented by those specified in the OAM file for inclusion in the html document,
    * or alternatively, the file SpryMenuBarBasicSkin.css which is included with this widget. */
    /* Resets for ul and li in menus */
    .MenuBar  .MenuBarView, .MenuBar  .SubMenuView {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
    /*** Layout Rules for Basic Menu ***/
    /* Top Level MenuBar
    * Because we float the MenuItemContainers in the MenuBar, we have to make sure the menubar wrapper expands to hold them all.
    * The simplest way is to float the widget wrapper
    .MenuBar { /* overridden by .MenuBarVertical version of this rule */
    float:left;
    width:100%;
    .MenuBarVertical {
    float:left; /* Used to make menubar shirink to fit contents */
    width:auto;
    /* SubMenus */
    .MenuBar .SubMenu {
    display:block;
    position:absolute;
    top:0;
    left:-10000px; /* By default, all non-visible submenus are hidden by moving way to the west */
    padding:0;
    /* First level of submenus - pulls down from horizontal menubar, right from vertical */
    .MenuBar .SubMenuVisible{ /* overridden by .MenuBarVertical version of this rule */
    top:100%;
    left:0px;
    .MenuBarVertical .SubMenuVisible {
    top:0px;
    left:100%;
    /* All submenus below level 1. All pullout to the right */
    .MenuBar .SubMenu .SubMenuVisible {
    display:block;
    position:absolute;
    top:0px;
    left:100%;
    /* MenuItems, MenuItemLabels, and MenuItemContainers */
    .MenuBar .MenuItem {
    display:block;
    text-decoration:none;
    .MenuBar .MenuItemLabel {
    display:block;
    .MenuBar .MenuItemContainer {
    position:relative;
    white-space:nowrap;
    float:left; /* overridden by .MenuBarVertical version of this rule */
    display:block;
    margin:0;
    padding:0;
    .MenuBarVertical .MenuItemContainer {
    float:none;
    .MenuBar .SubMenu .MenuItemContainer {
    float:none;
    /* Layout Rules needed by IE6 - excluded from other browsers */
    .SpryIsIE6 .SubMenu .SubMenu {
    width:100px;
    height:1%;
    .SpryIsIE6 .MenuBar .SubMenuVisible .SubMenuVisible {
    width:auto;
    /* End Layout section */
    * Arrows - This section specifies arrow images for a submenu dropdowns in Basic SpryMenu.
    .MenuBar .MenuItemLabel{
    background-image:none;
    /* For all arrows used here, we depend upon the image to push itself away from right edge, or the user can add right padding to the MenuItem */
    .MenuBar .MenuItemWithSubMenu .MenuItemLabel{
    background-image:url("images/ArrowMenuDown.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .MenuBar .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
    background-image:url("images/ArrowMenuDown.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .MenuBarVertical .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
    background-image:url("images/ArrowMenuRight.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .MenuBarVertical .MenuItemWithSubMenu .MenuItemLabel{
    background-image:url("images/ArrowMenuRight.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .MenuBar .SubMenu .MenuItemWithSubMenu .MenuItemLabel{
    background-image:url("images/ArrowMenuRight.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .MenuBar .SubMenu .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
    background-image:url("images/ArrowMenuRight.gif");
    background-position:right center;
    background-repeat:no-repeat;
    /* IE6 rules for Arrows */
    .SpryIsIE6 .MenuBar .MenuItemWithSubMenuHover .MenuItemLabel{
    background-image:url("images/ArrowMenuDown.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .SpryIsIE6 .MenuBarVertical .MenuItemWithSubMenuHover .MenuItemLabel{
    background-image:url("images/ArrowMenuRight.gif");
    background-position:right center;
    background-repeat:no-repeat;
    .SpryIsIE6 .MenuBar .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel{
    background-image:url("images/ArrowMenuRight.gif");
    background-position:right center;
    background-repeat:no-repeat;
    and i got "SpryMenuBasicSkin.css"
    with this css:
    @charset "UTF-8";
    /* SpryMenuBasicSkin.css - version 0.5 - Spry Pre-Release 1.7 */
    /* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
    /* This is the skinning css for a basic Spry 2 MenuBar.
    * You can use this CSS as a starting point for skinning an instance of the SpryMenuBar widget */
    /* The rules in this file  assume the following widget classes for menu layout:
    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.
    These should be set as the 'WidgetClass' in the widget constructor. If the menu is to be vertical, pass both names,
    space-delimited. For example: WidgetClass: "MenuBar MenuBarVertical".
    You can also pass in extra classnames to set your desired top level menu bar layout. 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.
    eg: WidgetClass: "MenuBar MenuBarLeftShrink"
    .MenuBar  {
    background-color:#cccccc;
    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: 16px;
    font-style: normal;
    padding:0;
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
    /* 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: 0px 24px 0px 0px;
    background-color:#cccccc;
    border-width:1px;
    border-color: #cccccc #ffffff #cccccc #ffffff;
    border-style: none solid none solid;
    .MenuBar  .MenuItemFirst {
    border-style: none none none none;
    .MenuBar .MenuItemLast {
    border-style: none solid none none;
    .MenuBar  .MenuItem  .MenuItemLabel{
    text-align:center;
    line-height:1.4em;
    color:#333333;
    padding: 6px 15px 6px 39px;
    width: 6em;
    width:auto;
    background: #cccccc;
    .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: normal;
    font-size: 14px;
    font-style: normal;
    background-color:#ffffff;
    padding:0px 2px 0px 0px;
    border-width:1px;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    /* Border styles are overriden by first and last items */
    border-style: solid solid solid solid;
    .MenuBar  .SubMenu .MenuItemFirst {
    border-style: solid solid solid solid;
    .MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 6px;
    .MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
    .MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 6px;
    .MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:left;
    line-height:1em;
    background-color:#ffffff;
    color:#333333;
    padding: 6px 12px 6px 5px;
    width: 7em;
    /* Hover states for containers, items and labels */
    .MenuBar .MenuItemHover {
    background-color: #999999;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    .MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: #999999; /* consider exposing this prop separately*/
    color: #000000;
    .MenuBar .MenuItemHover .MenuItemLabel{
    background-color: #999999;
    color: #000000;
    .MenuBar .SubMenu .MenuItemHover {
    background-color: #cccccc;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    .MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: #cccccc;
    color: #333333;
    /* Submenu properties -- First level of submenus */
    .MenuBar .SubMenuVisible {
    background-color: #ffffff;
    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: #ffffff;
    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: #999999; /* consider exposing this prop separately*/
    color: #000000;
    .SpryIsIE6 .MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
    background-color: #cccccc; /* consider exposing this prop separately*/
    color: #333333;
    .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 */
    what is the rule i nedd to change? i think the background colour of the submenu is lightgray #CCCCCC right now, and the hover one is a darker colour.
    thanks!

    I am sorry to have to point out to you that you have changed SpryMenuBasicSkin.css so much that it is impossible to render any assistance.
    To start with, the menubar has an ID of MenuBar, yet in the CSS I only see this referenced as a CLASS as in
    .MenuBar  {
    background-color:#cccccc;
    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: 16px;
    font-style: normal;
    padding:0;
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
    I would suggest to start again.
    Once you have done that, supply a link to your site and we will assist you further.
    Gramps

  • Spry 2, IE7/IE8 bad, IE9 ok.

    I have a horizontal spry menu version 2 (Spry pre-release 1.7) that appears to have a small problem with IE 7, and IE 8, but not IE9 or other browsers like Firefox, Safari, and Chrome.
    The problem is when I open the submenu, and scroll the mouse up and down the submenu, the submenu will close.  It does this even before I have scrolled the mouse down to the last menu item.  I also notice that the clickable zone is only active where the text is located, not the full width of the submenu.
    What is bad is that I can produce this same problem with a clean website and using nothing but the default settings and code.
    So I ask, is there a hack or fix for this?  Has anyone see this and knows what I need to do to get it working?
    This is the code for the main page. 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">-->
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <link href="../css/html5-template.css" rel="stylesheet" type="text/css"><!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="../css/hefs.css" rel="stylesheet" type="text/css"><!--email contact pages-->
    <link href="../css/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css">
    <script src="../css/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="../css/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js"type="text/javascript"></script>
    <script src="../css/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
    <script src="../css/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
    <script src="../css/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
    <style type="text/css">
    /* 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:#0075be;       
                    font-family: Verdana;/*, Geneva, 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: bolder;
                    font-size: 10px;
                    font-style: normal;
                    padding:0;          
                    border-color: #ffffff #ffffff #003366 #ffffff;
                    border-width:0px;
                    border-style: none none solid none;
    /* 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: 800px;
    .MenuBarFixedCentered {
                    float: none;
                    width: 800px;
                    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: 0px 5px 0px 0px;
                    background-color:#0075be;       
                    border-width:0px;
                    border-color: #cccccc #ffffff #000000 #ffffff;
                    border-style: none solid solid solid;
    #MenuBar  .MenuItemFirst {
                    border-style: none none none none;
    #MenuBar .MenuItemLast {
                    border-style: none solid none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
                    text-align:center;
                    line-height:1.4em;
                    color:#ffffff;
                    background-color:#0075be;
                    padding: 6px 15px 6px 10px;
                    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: 10px;
                    font-style: normal;
                    background-color:#0075be;
                    padding:0px 2px 0px 0px;
                    border-width:0px;
                    border-color: #000000 #000000 #000000 #000000;
                    /* Border styles are overriden by first and last items */
                    border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
                    border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
                    padding-top: 6px;
    #MenuBar .SubMenu .MenuItemLast {
                    border-style: solid solid solid solid;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
                    padding-bottom: 6px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
                    text-align:left;
                    line-height:1em;
                    background-color:#0075be;
                    color:#ffffff;
                    width: 7em;
                    width:auto;
                    padding-top: 6px;
                    padding-right: 24px;/*Increased padding from 12px to 24px.  added more space before submenu icon */
                    padding-bottom: 6px;
                    padding-left: 5px;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
                    background-color: #008fe6;
                    border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
                    background-color: #008fe6; /* consider exposing this prop separately*/
                    color: #ffffff;
    #MenuBar .MenuItemHover .MenuItemLabel{
                    background-color: #008fe6;
                    color: #ffffff;
    #MenuBar .SubMenu .MenuItemHover {
                    background-color: #008fe6;
                    border-color: #000000 #000000 #000000 #000000;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
                    background-color: #008fe6;
                    color: #ffffff;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
                    background-color: #0075be;
                    min-width:100%;  /* 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: #0075be;
                    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: #008fe6; /* consider exposing this prop separately*/
                    color: #ffffff;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
                    background-color: #008fe6; /* 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 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2141544" binding="#MenuBar" />
    </oa:widgets>
    -->
    </script>
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </head>
    <body>
    <ul id="MenuBar">
      <li> <a href="#">Home</a></li>
      <li> <a href="#">Entertainment</a>
        <ul>
          <li> <a href="#">TV Listings</a></li>
          <li> <a href="#">Music</a>
            <ul>
              <li> <a href="#">Hits</a></li>
              <li> <a href="#">Ragga</a>
                <ul>
                  <li> <a href="#">Roots</a></li>
                  <li> <a href="#">Reggaeton</a></li>
                  <li> <a href="#">Dancehall</a></li>
                </ul>
              </li>
              <li> <a href="#">Country</a></li>
            </ul>
          </li>
          <li> <a href="#">The Dirt</a>
            <ul>
              <li> <a href="#">Hollywood</a></li>
              <li> <a href="#">NY Beat</a></li>
              <li> <a href="#">London Scene</a></li>
            </ul>
          </li>
          <li> <a href="#">The Web</a></li>
        </ul>
      </li>
      <li> <a href="#">Politics</a></li>
      <li> <a href="#">Sports</a>
        <ul>
          <li> <a href="#">Football</a></li>
          <li> <a href="#">Baseball</a></li>
          <li> <a href="#">Basketball</a></li>
          <li> <a href="#">Racing</a>
            <ul>
              <li> <a href="#">F1</a></li>
              <li> <a href="#">Indy Car</a></li>
              <li> <a href="#">Stock Car</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <script type="text/javascript">
    // BeginOAWidget_Instance_2141544: #MenuBar
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
          widgetID: "MenuBar",
                      widgetClass: "MenuBar  MenuBarLeftShrink",
                      insertMenuBarBreak: true
    // EndOAWidget_Instance_2141544
    </script>
    </body>
    </html>
    This is the code for the SpryMenuBasic.css file.  I only made changes to this file to remove the arrows from the top menu.
    @charset "UTF-8";
    /* SpryMenuBasic.css - version 0.5 - Spry Pre-Release 1.7 */
    /* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
    /* This is the css for a basic Spry 2 MenuBar.
    * The first section is basic layout, and should in general not need to be  modified.
    * The final section of this file specifies images to use for arrows for the menu. These
    * are either down or right-pointing as required by horizonatal or vertical layouts. You
    * can either replace the referenced images with your own, or you can modify these rules to
    * point to your won images.
    * These rules are supplemented by those specified in the OAM file for inclusion in the html document,
    * or alternatively, the file SpryMenuBarBasicSkin.css which is included with this widget. */
    /* Resets for ul and li in menus */
    .MenuBar  .MenuBarView, .MenuBar  .SubMenuView {
                    display:block;
                    list-style:none;
                    margin:0;
                    padding:0;          
    /*** Layout Rules for Basic Menu ***/
    /* Top Level MenuBar
    * Because we float the MenuItemContainers in the MenuBar, we have to make sure the menubar wrapper expands to hold them all.
    * The simplest way is to float the widget wrapper
    .MenuBar { /* overridden by .MenuBarVertical version of this rule */
                    float:left;
                    width:100%;
    .MenuBarVertical {
                    float:left;             /* Used to make menubar shirink to fit contents */
                    width:auto;
    /* SubMenus */
    .MenuBar .SubMenu {
                    display:block;
                    position:absolute;
                    top:0;
                    left:-10000px; /* By default, all non-visible submenus are hidden by moving way to the west */
                    padding:0;
    /* First level of submenus - pulls down from horizontal menubar, right from vertical */
    .MenuBar .SubMenuVisible{ /* overridden by .MenuBarVertical version of this rule */
                    top:100%;
                    left:0px;
    .MenuBarVertical .SubMenuVisible {
                    top:0px;
                    left:100%;
    /* All submenus below level 1. All pullout to the right */
    .MenuBar .SubMenu .SubMenuVisible {
                    display:block;
                    position:absolute;
                    top:0px;
                    left:100%;
    /* MenuItems, MenuItemLabels, and MenuItemContainers */
    .MenuBar .MenuItem {
                    display:block;
                    text-decoration:none;
    .MenuBar .MenuItemLabel {
                    display:block;
    .MenuBar .MenuItemContainer {
                    position:relative;
                    white-space:nowrap;
                    float:left; /* overridden by .MenuBarVertical version of this rule */
                    display:block;
                    margin:0;
                    padding:0;          
    .MenuBarVertical .MenuItemContainer {
                    float:none;
    .MenuBar .SubMenu .MenuItemContainer {
                    float:none;
    /* Layout Rules needed by IE6 - excluded from other browsers */
    .SpryIsIE6 .SubMenu .SubMenu {
                    width:100px;
                    height:1%;
    .SpryIsIE6 .MenuBar .SubMenuVisible .SubMenuVisible {
                    width:auto;
    /* End Layout section */
    * Arrows - This section specifies arrow images for a submenu dropdowns in Basic SpryMenu.
    .MenuBar .MenuItemLabel{
                    background-image:none;
    /* For all arrows used here, we depend upon the image to push itself away from right edge, or the user can add right padding to the MenuItem */
    .MenuBar .MenuItemWithSubMenu .MenuItemLabel{
                    background-image:url("images/ArrowMenuDown.gif");
                    background-position:right center;
                    background-repeat:no-repeat;
    .MenuBar .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
                    background-image:url("images/ArrowMenuDown.gif");
                    background-position:right center;
                    background-repeat:no-repeat;
    .MenuBarVertical .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
                    background-image:url("images/ArrowMenuRightWhite.gif");
                    background-position:right center;
                    background-repeat:no-repeat;
    .MenuBarVertical .MenuItemWithSubMenu .MenuItemLabel{
                    background-image:url("images/ArrowMenuRightWhite.gif");
                    background-position:right center;
                    background-repeat:no-repeat;
    .MenuBar .SubMenu .MenuItemWithSubMenu .MenuItemLabel{
                    background-image:url("images/ArrowMenuRightWhite.gif");
                    background-position:right center;
                    background-repeat:no-repeat;
    .MenuBar .SubMenu .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
                    background-image:url("images/ArrowMenuRightWhite.gif");
                    background-position:right center;
                    background-repeat:no-repeat;
    /* IE6 rules for Arrows */
    .SpryIsIE6 .MenuBar .MenuItemWithSubMenuHover .MenuItemLabel{
                    background-image:url("images/ArrowMenuDown.gif");
                    background-position:right center;
                    background-repeat:no-repeat;
    .SpryIsIE6 .MenuBarVertical .MenuItemWithSubMenuHover .MenuItemLabel{
                    background-image:url("images/ArrowMenuRightWhite.gif");
                    background-position:right center;
                    background-repeat:no-repeat;
    .SpryIsIE6 .MenuBar .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel{
                    background-image:url("images/ArrowMenuRightWhite.gif");
                    background-position:right center;
                    background-repeat:no-repeat;

    You have used elements like header, footer, footer1 and nav without using the correct DOCTYPE declaration. Replace the first line of your code with
    <!doctype html>
    Also have a look here for other problems http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fhome.surewest.net%2Fstorytales%2F test%2Fforposting.html
    After the above has been fixed, please come back here to fix the remaining problem(s)
    Gramps

  • Menubar with empty space and arrow underneath it

    Take a look at the menubar in these two screenshots. How do I get rid of that empty space in the menubar? Also, when I click on the empty space an arrow pops up beneath the menubar, when I click again the arrow dissappears. I tried holding command and dragging it away but it didn't work.

    I downloaded an app called bartender and discovered it was Evernote that was causing the problem.

  • MenuBar with drop down arrow - how to?

    Hi, I want to add a drop down arrow to one of the buttons in my MenuBar (see mockup attached). How is this possible?

    ...anyone, anyone?

  • Change Arrow Color of Combos and MenuBars

    I have several combo boxes and a menubar with a dropdown at
    the top of the page. The client wants the menu and the buttons to
    be black and the "down" arrows on the combos to be white. Also, the
    drop down menubar at the top has multiple choices within that have
    black arrows that also need to be white.
    I can't seem to find a property that would manipulate the
    color of these arrows. I have also used the Flex Style Explorer and
    nothing there seems to indicate how to do it either. Is this
    possible?

    From what I can gather looking at the source for the Flex components, this is not a style that is settable using a normal style property. However, there is a way to get at the button.
    If you look at the code for a combo box, you'll see that it's based on the ComboBase class. Inside this class is where the button for the drop down really lives, an mx_internal variable called: downArrowButton:Button. To access it, you can create a class that subclasses the Combo Box class, (you might have to put a "using namespace mx_internal;" in the import section of your class), then access the button directly as:
    mx_internal::downArrowButton
    From there, you should be able to do whatever you want to with the button's style properties. I hope that helps!
    -Caleb

  • Problems to add a background-image to the widget Spry MenuBar!

    With DreamweaverCS4 version 10.0 Build 4117, (italian language) I have tried to add a Spry MenuBar to the one website page.
    But the problem is that I haven't understood where add my property "background-image": url(../immagini/Menu_Button_01.gif).
    In the Application Page of Dreamweaver I have this screenshot:
    But in the Preview Window of InternetExplorer 7 I have this strange behavior:
    The "Menu_Button_01.gif" are a rounded square button made with PhotoshopCS4 and have a transparent background.
    In the IE7 MenuBar doesn't appears as expected, without the transparent background!
    1) How can I do to show my "Menu_Button_01.gif" image as transparent background in the MenuBar?
    2) What is the correct CSS Style Rule to apply the "background-image" property?
    (Example: "ul.MenuBarHorizontal li"? Or "ul.MenuBarHorizontal a"? )
    3) Should I also apply the property: "background-color:transparent"? Where? What is the specific CSS Style Rule?
    I have uploaded my little local WebSite to Rapidshare (100KB):
    http://rapidshare.com/files/370735082/Test_Spry.zip.html
    Please download it to inspect my problem.
    Please response me!
    Horsepower0171.

    For a starter, you should not put your background style rules in the following. The accompanying descriptions will tell you this.
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 116px;
        float: left;
        background-image: url(../immagini/Menu_Button_01.gif);
        background-color: transparent;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: 116px;
        position: absolute;
        left: -1000em;
        background-image: url(../immagini/Menu_Button_01.gif);
        background-color: transparent;
    Then when you apply style rules to
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        padding: 0.5em 0.75em;
        color: #333;
        text-decoration: none;
        background-image: url(../immagini/Menu_Button_01.gif);
        background-color: transparent;
    this will be overridden by the following rules. They replace your image with an arrow image.
    /* 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%;
    There are one of two solutions
    If you do not want and arrow, simply set background to none in the above four instances.
    If you do want an arrow, include a down arrow image in a second Menu_Button_01.gif image called Menu_Button_01_DownArrow.gif or similar as well as a third one for your right arrow image.
    I hope this helps.
    Ben

  • Spry Menu Bar 2.0 and positioning of arrows

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

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

  • On my new 15" MacBook Pro (June 2011) using Calendar I click the  corner arrow to enlarge the screen.  Now it is MORE than full size.  No arrow visible to return to small size.  Menu bar can't be grabbed.  I sweep and get back to desktop. No small screen?

    I installed Lion on my newish 15" MacBook Pro.  When using Calendar I click the  corner arrow to enlarge the screen.  Now ithe calendar is MORE than full size, no arrow visible to return to small size.  The Menu bar doesn't respond. when I try grabbing it to move the whole screen sideways.  When  I sweep I get back to desktop. I can sweep back to the calendar, but can't make it small again.  Menubar options include changing font size, but nothing about reverting to smaller window size.  Any suggestions?

    I installed Lion on my newish 15" MacBook Pro.  When using Calendar I click the  corner arrow to enlarge the screen.  Now ithe calendar is MORE than full size, no arrow visible to return to small size.  The Menu bar doesn't respond. when I try grabbing it to move the whole screen sideways.  When  I sweep I get back to desktop. I can sweep back to the calendar, but can't make it small again.  Menubar options include changing font size, but nothing about reverting to smaller window size.  Any suggestions?

  • Dreamweaver spry menubar vertical doesn't work properly in firefox 3.6.3 for windows

    The links in the menu items in the left hand sidebar (a Spry menubar vertical) do NOT work properly in Firefox 3.6.3 for Windows. They work when the home page is first loaded, but when you go to another page using the menu links and return to the home page via the BACK ARROW, the links no longer work. You have to reload the page to get the links to reappear.This bug is only manifested in Firefox 3.6.3 for Windows. The menus work as expected in IE 8 for Windows, Google Chrome 4.1.249.1064 (45376) for Windows, Safari 4.0.5 for the Mac, Google Chrome 5.0.375.38 beta for the Mac and Firefox 2.0.0.17 for the Mac.
    == URL of affected sites ==
    http://elkview.zxq.net/

    Your above posted system details show multiple Java Console extensions.
    You can uninstall (remove) the Java Console extensions and disable the Java Quick Starter extension, you do not need them to run Java applets.
    See http://kb.mozillazine.org/Java#Multiple_Java_Console_extensions
    See also http://www.java.com/en/download/help/quickstarter.xml - What is Java Quick Starter (JQS)? What is the benefit of running JQS? - 6.0
    Disable the Java Quick Starter extension: Tools -> Addons -> Extensions
    Control Panel -> Java -> Advanced tab -> Miscellaneous -> Java Quick Starter (disable)
    You can try a direct connection: <br />
    Control Panel > Java > General tab > "Network Settings...": "Direct Connection" (enable)

  • MenuBar Component - Aligning Menu Left

    Hello all,
    I have a quick question. Is it possible to set the menubar
    component so that it's submenu is configured to display to the left
    ( if it was on the far left of the screen)?
    Currently I have it placed on the left side of the screen,
    with text aligned to right. The following problems occur :
    The arrows that are displayed when a menu has children is on
    the right, is it possible to align it left?
    The 2nd/3d level submenus open on TOP of their parent menu,
    instead of to the left, like I would like them to.
    Is there a sort of static property or something that I'm not
    finding that is made to align the entire menu to the right?
    Screenshot
    Here

    Can you please explain why you have PHP code inside your CSS body selector?
    PHP does not belong in your CSS code.
    body{
    <?php
    // define variables and set to empty values
    $nameErr = $emailErr = $genderErr = $websiteErr = "";
    $name = $email = $gender = $comment = $website = "";
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
      if (empty($_POST["name"])) {
        $nameErr = "Name is required";
      } else {
        $name = test_input($_POST["name"]);
        // check if name only contains letters and whitespace
        if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
          $nameErr = "Only letters and white space allowed";
      if (empty($_POST["email"])) {
        $emailErr = "Email is required";
      } else {
        $email = test_input($_POST["email"]);
        // check if e-mail address is well-formed
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
          $emailErr = "Invalid email format";
      if (empty($_POST["website"])) {
        $website = "";
      } else {
        $website = test_input($_POST["website"]);
        // check if URL address syntax is valid (this regular expression also allows dashes in the URL)
        if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%= ~_|]/i",$website)) {
          $websiteErr = "Invalid URL";
      if (empty($_POST["comment"])) {
        $comment = "";
      } else {
        $comment = test_input($_POST["comment"]);
      if (empty($_POST["gender"])) {
        $genderErr = "Gender is required";
      } else {
        $gender = test_input($_POST["gender"]);
    function test_input($data) {
      $data = trim($data);
      $data = stripslashes($data);
      $data = htmlspecialchars($data);
      return $data;
    Nancy O.

  • Different backgrounds for menubar Spry UI 1.7

    All the q/a I've found refer to previous versions of MenuBar, not the newest 2.0 MenuBar that's in Spry UI 1.7 / DW CS5.
    I want to use different background images for each of the top level MenuBars. I've found the place in the CSS,
    #MenuBar .MenuItem {
        background-image: url(blue.jpg);
    Works fine for one -- and unfortunately all.  Now I want the adjacent bar to be red, the next to be yellow, etc.
    So how do I pass a unique identifier in each <li> in the source code -- when it looks like the JavaScript renames all the <li>'s to "MenuItem"?
    I've tried ids, classes, and names --
    <li class="red"> in the source code, and
    #MenuBar .MenuItem .red {
        background-image: url(red.jpg);
    or
    <li id="red"> in the source code, and
    #MenuBar .MenuItem #red {
        background-image: url(red.jpg);
    for example. No success.
    This should be easy, I would think.  Advice?

    I'm using the MenuBar that's in Spry-UI-1.7.  They call it MenuBar_2 in their menubar.css.  Says at the top:"
    /* BeginOAWidget_Instance_2141544: #MenuBar_2 */
    /* 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."
    Says "/* SpryMenuBasic.css - version 0.5 - Spry Pre-Release 1.7 */" in that file.
    At any rate, my Web site isn't posted anywhere yet, it's still local.  My question is simply, given the menubar widget I'm using, what's the right syntax to use to identify different <li>'s under <ul id="MenuBar">, such that I can specify the images I want in different "#MenuBar .MenuItem xxx" lines in menubar.css? 
    Perusing SpryMenu.js, it would seem this section looks like it could be relevant:
    Spry.Widget.MenuBar2.prototype.transformMarkup = function()
        var evt = new Spry.Widget.Event(this);
        this.notifyObservers("onPreTransformMarkup", evt);
        if (!evt.performDefaultAction)
            return;
        // Find the <a> elements and convert them to MenuItems.
        var eles = Spry.$$("a", this.element);
        for (var i = 0; i < eles.length; i++)
            var a = eles[i];
            var ca = this.extractChildNodes(a);
            this.createOptionalSlicedStructure(a, "span", this.menuItemClass);
            var label = this.createOptionalSlicedStructure(null, "span", this.menuItemLabelClass);
            this.appendChildNodes(label.contentContainer, ca);
            a.contentContainer.appendChild(label);
        // Add MenuItemContainer class to all <li> elements.
        var eles = Spry.$$("li", this.element);
        for (var i = 0; i < eles.length; i++)
            this.addClassName(eles[i], this.menuItemContainerClass);
        // Find all <ul> elements and convert them to SubMenus.
        var eles = Spry.$$("ul", this.element);
        for (var i = 0; i < eles.length; i++)
            var ul = eles[i];
            this.addClassName(ul, this.subMenuViewClass);
            var sm = this.createOptionalSlicedStructure(null, "div", this.subMenuClass);
            ul.parentNode.insertBefore(sm, ul);
            sm.contentContainer.appendChild(ul);
            var mi = this.getMenuItemForSubMenu(sm);
            if (mi)
                this.addClassName(mi, this.menuItemWithSubMenuClass);
            if (this.insertSubMenuBreak)
                var br = document.createElement("br");
                this.addClassName(br, this.subMenuBreakClass);
                sm.contentContainer.appendChild(br);
        // Mark each submenu with a class that indicates its level.
        var sms = Spry.$$("." + this.subMenuClass, this.element);
        var r = this.element;
        for (var i = 0; i < sms.length; i++)
            var e = sms[i].parentNode;
            var level = 1;
            while (e && e != r)
                if (this.hasClassName(e, this.subMenuClass))
                    level++;
                e = e.parentNode;
            this.addClassName(sms[i], this.menuLevelClassPrefix + level);
        // Wrap the original menubar <ul> with a <div>.
        var root = this.createOptionalSlicedStructure(null, "div", this.widgetClass);
        var oldRoot = this.element;
        oldRoot.parentNode.insertBefore(root, oldRoot);
        root.contentContainer.appendChild(oldRoot);
        this.addClassName(oldRoot, this.menuBarViewClass);
        this.element = root;
        if (this.insertMenuBarBreak)
            var br = document.createElement("br");
            this.addClassName(br, this.menuBarBreakClass);
            root.contentContainer.appendChild(br);
        // Add a class to the first and last menu item in the MenuBar and its submenus.
        var eles = Spry.$$("." + this.menuBarViewClass + ", ." + this.subMenuViewClass, this.element);
        for (var i = 0; i < eles.length; i++)
            var containers = this.getElementChildren(eles[i]);
            if (containers.length)
                this.addClassName(this.getElementChildren(containers[0])[0], this.menuItemFirstClass);
                this.addClassName(this.getElementChildren(containers[containers.length - 1])[0], this.menuItemLastClass);
        if (this.widgetID)
            if (oldRoot.id == this.widgetID)
                oldRoot.id = "";
            root.id = this.widgetID;
        this.notifyObservers("onPostTransformMarkup", evt);

  • Removing Sync icon from Menubar

    Hello,
    I have a blackberry and installed pocketmac. While doing so it placed a circle of arrows in my menubar. I believe this is for sync services. Recently, I moved from Pocketmac to The Missing Sync. I did my uninstall of Pocketmac but the circle arrows still are present. Does anyone know how to remove these? I checked pocketmac's website but there was nothing regarding this issue.
    Any help appreciated!
    Craig

    Hi
    I had the 'Mobile Me' icon appear in the menu bar, I think I just clicked and dragged it away and it did the little 'poof' animation and disappeared.
    Have you got a pocketmac selection in System Preferences which you can then turn off the icon. Or perhaps there was a way to turn the icon on or off from within pocketmac's preferences. Which will have gone when you removed the application. You could try loading it again and seeing if there is anything in the preferences to disable the menu icon.
    Sorry I can't be of any better assistance.
    Phil

  • Set MenuBar component margin sizes

    Hello everyone,
    I use mx:MenuBar component in my application. I'm gonna create an options window for my search button. I'll set options for search property.
    as you see in the image, I couldn't set the size near the arrow down character(v). Also could'n not set the blue color. I checked all properties and style options but not found any solution to set these.
    Please any idea about this issue or any other solution to mysettings window solution.

    For those that are interested, I was able to find a solution. I manually set my margins to 0.5" all around. Here is a snippet below:
    PrinterJob job = PrinterJob.getPrinterJob( );
    PageFormat format = job.defaultPage( );
    Paper paper = new Paper();
    double margin = 36; //72 is the default which equals to an inch
    paper.setImageableArea( margin, margin, paper.getWidth() - margin * 2, paper.getHeight() - margin * 2 );
    format.setPaper( paper );
    job.setPrintable( this, format );
    I hope that helps.

Maybe you are looking for