Menu problem with Firefox

9 posts, 0 answers
  1. Rob
    Rob avatar
    44 posts
    Member since:
    Apr 2008

    Posted 16 Sep 2008 Link to this post

    Hi,

    I have a custom menu set up that works fine in IE7, but in firefox, the background graphic for the menu items does not get displayed behind each item, but just once in the middle of the menu.

    Any idea what might be wrong?

    My css file is a follows (copy of Web20 with changes for new background graphics)

    /* r.a.d.menu Web 2.0 skin */

    .RadMenu_Web20
    {
     background: url(Menu/MenuItemBackground.gif);
     border-left: solid 1px #617fb5;
    }

    .RadMenu_Web20_Context
    {
     background: none;
     border:0;
    }

    .RadMenu_Web20 .rmLink
    {
     text-decoration: none;
     color: #fff;
     border-left: solid 1px #c2cfe3;
     border-right: solid 1px #617fb5;
     background: transparent;
    }

    .RadMenu_Web20 .rmLink:hover,
    .RadMenu_Web20 .rmFocused,
    .RadMenu_Web20 .rmExpanded
    {
     color: #006;
     background: transparent url(Menu/MainItemBackgroundHover.gif) no-repeat center;
    }

    .RadMenu_Web20 .rmText
    {
     /*background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center;*/
     padding-left: 22px; /* should be adjusted to the size of the images, if they are larger than 16x16px */
     margin-right: 4px;
     font: bold 12px Arial, Verdana, Sans-serif;
     line-height: 28px;
     padding-right: 24px;
        background-image:none;
    }

    .RadMenu_Web20 .rmRootGroup .rmText .rmLeftImage
    {
     margin: 3px 1px 0; /* should be adjusted to the size of the images, if they are larger than 16x16px */
    }

    .RadMenu_Web20 .rmHorizontal .rmExpandBottom, 
    .RadMenu_Web20 .rmHorizontal .rmExpandTop 

      background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center; 
    }

    .RadMenu_Web20 .rmVertical .rmExpandLeft,
    .RadMenu_Web20 .rmVertical .rmExpandRight 

      background: transparent url(Menu/invertedGroupImage.gif) no-repeat right center; 
    }

    .RadMenu_Web20 .rmSlide
    {
     margin-top:-1px;
    }

    .RadMenu_Web20 .rmGroup
    {
     border: solid 1px #ffffff;
     background: transparent url(Menu/Flyout.jpg) no-repeat;
     color:#ffffff;
    }

    .RadMenu_Web20 .rmGroup .rmLink
    {
     background: transparent url(Menu/Flyout.jpg) no-repeat;
     border: 0px;
     border-bottom: solid 1px #ffffff;
     color: #ffffff;
    }

    .RadMenu_Web20 .rmGroup .rmText
    {
     font-weight: normal !important;
     background: none;
     margin-right: 0 !important;
     padding-left: 30px;
     padding-right: 40px;
     font-size: 11px;
    }

    .RadMenu_Web20 .rmGroup .rmLink:hover,
    .RadMenu_Web20 .rmGroup .rmFocused,
    .RadMenu_Web20 .rmGroup .rmExpanded
    {
     background: transparent url(Menu/Flyout2.jpg) no-repeat;
     border: 0px;
     border-bottom: solid 1px #ffffff;
     color:#000000;
    }

    .RadMenu_Web20 .rmLeftArrow,
    .RadMenu_Web20 .rmRightArrow,
    .RadMenu_Web20 .rmTopArrow,
    .RadMenu_Web20 .rmBottomArrow,
    .RadMenu_Web20 .rmLeftArrowDisabled,
    .RadMenu_Web20 .rmRightArrowDisabled,
    .RadMenu_Web20 .rmTopArrowDisabled,
    .RadMenu_Web20 .rmBottomArrowDisabled
    {
     background: #e7f1ff url(Menu/left.gif) center center no-repeat;
     width: 15px;
     text-decoration:none;
     text-indent:-3000px;
     color:#e7f1ff;
     overflow:hidden;
    }

    .RadMenu_Web20 .rmTopArrow,
    .RadMenu_Web20 .rmTopArrowDisabled
    {
     background-image: url(Menu/top.gif);
     width: 100%;
     height: 15px;
    }

    .RadMenu_Web20 .rmBottomArrow,
    .RadMenu_Web20 .rmBottomArrowDisabled
    {
     background-image:url(Menu/bottom.gif);
     width: 100%;
     height: 15px;
    }

    .RadMenu_Web20 .rmRightArrow,
    .RadMenu_Web20 .rmLeftArrow
    {
     height: 100%;
    }

    .RadMenu_Web20 .rmRightArrow,
    .RadMenu_Web20 .rmRightArrowDisabled
    {
     background-image: url(Menu/right.gif);
    }

    .RadMenu_Web20 .rmVertical .rmSeparator
    {
     padding-top: 2px;
     background: #6788be;
     font-size: 1px;
     line-height: 1px;
    }

    .RadMenu_Web20 .rmSeparator .rmText
    {
     display: none;
    }

    .RadMenu_Web20 .rmExpandLeft,
    .RadMenu_Web20 .rmExpandRight,
    .RadMenu_Web20 .rmFocused .rmExpandLeft,
    .RadMenu_Web20 .rmFocused .rmExpandRight,
    .RadMenu_Web20 .rmExpanded .rmExpandLeft,
    .RadMenu_Web20 .rmExpanded .rmExpandRight
    {
     background: transparent url(Menu/invertedGroupImage.gif) right center no-repeat;
    }

    .RadMenu_Web20 .rmGroup .rmExpandLeft,
    .RadMenu_Web20 .rmGroup .rmExpandRight,
    .RadMenu_Web20 .rmGroup .rmFocused .rmExpandLeft,
    .RadMenu_Web20 .rmGroup .rmFocused .rmExpandRight,
    .RadMenu_Web20 .rmGroup .rmExpanded .rmExpandLeft,
    .RadMenu_Web20 .rmGroup .rmExpanded .rmExpandRight
    {
     background: transparent url(Menu/groupImage.gif) right center no-repeat;
    }

    /* mozilla only - disabled state */
    .RadMenu_Web20 .rmLink.rmDisabled,
    .RadMenu_Web20 .rmLink.rmDisabled:hover
    {
     -moz-opacity: 0.8;
     opacity: 0.8;
     color: #ccc;
     background: none;
    }

    /*right-to-left support*/

    .RadMenu_Web20_rtl,
    .RadMenu_Web20_rtl *
    {
        text-align:right;
    }

    .RadMenu_Web20_rtl .rmRootGroup .rmText
    {
     padding-left: 24px;
     padding-right: 8px;
     margin-right: 0;
     margin-left: 4px;
    }

    .RadMenu_Web20_rtl .rmGroup .rmText
    {
     margin-left: 0 !important;
     padding-left: 40px;
     padding-right: 30px;
    }

    .RadMenu_Web20 .rmLeftImage
    {
     margin: 5px 2px 0;
    }

    .RadMenu_Web20_rtl .rmHorizontal .rmExpandBottom, 
    .RadMenu_Web20_rtl .rmHorizontal .rmExpandTop 

      background-position:left center; 
    }

    .RadMenu_Web20_rtl .rmVertical .rmExpandLeft,
    .RadMenu_Web20_rtl .rmVertical .rmExpandRight 

      background: transparent url(Menu/invertedGroupImageRTL.gif) no-repeat left center;
    }

    .RadMenu_Web20_rtl .rmGroup .rmExpandLeft,
    .RadMenu_Web20_rtl .rmGroup .rmExpandRight 

      background: transparent url(Menu/groupImageRTL.gif) no-repeat 5px center; 
    }

    .RadMenu_Web20_rtl .rmVertical .rmLink:hover .rmExpandLeft,
    .RadMenu_Web20_rtl .rmVertical .rmLink:hover .rmExpandRight,
    .RadMenu_Web20_rtl .rmVertical .rmFocused .rmExpandLeft,
    .RadMenu_Web20_rtl .rmVertical .rmFocused .rmExpandRight,
    .RadMenu_Web20_rtl .rmVertical .rmExpanded .rmExpandLeft,
    .RadMenu_Web20_rtl .rmVertical .rmExpanded .rmExpandRight
    {
     background: transparent url(Menu/invertedGroupImageRTL.gif) left center no-repeat;
    }

    .RadMenu_Web20_rtl .rmGroup .rmLink:hover .rmExpandLeft,
    .RadMenu_Web20_rtl .rmGroup .rmLink:hover .rmExpandRight,
    .RadMenu_Web20_rtl .rmGroup .rmFocused .rmExpandLeft,
    .RadMenu_Web20_rtl .rmGroup .rmFocused .rmExpandRight,
    .RadMenu_Web20_rtl .rmGroup .rmExpanded .rmExpandLeft,
    .RadMenu_Web20_rtl .rmGroup .rmExpanded .rmExpandRight
    {
     background: transparent url(Menu/groupImageRTL.gif) 5px center no-repeat;
    }

  2. Rob
    Rob avatar
    44 posts
    Member since:
    Apr 2008

    Posted 16 Sep 2008 Link to this post

    Also, the right arrow on the sub menu items only appears during hover, the "normal" right arrow doesn't appear.

    The issues arise with all non-IE browsers, everything works fine in IE.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rob
    Rob avatar
    44 posts
    Member since:
    Apr 2008

    Posted 17 Sep 2008 Link to this post

    Hi

    I noticed some obvious errors that had crept into the css file and have fixed them. So now if safari/firefox, I get the background image for the menu items OK, but the hover image doesn't appear. Also, on the sub menu items, the right arrow still doesn't appear in non-hover mode.

    It all still works fine in IE.

    I also decided not to be lazy and renamed the skin from Web20 to something different (my client's name).

    The new file is :

    .RadMenu_Logitech
    {
     border-left: solid 1px #617fb5;
    }

    .RadMenu_Logitech_Context
    {
     background: none;
     border:0;
    }

    .RadMenu_Logitech .rmLink
    {
     text-decoration: none;
     color: #000;
     border-left: solid 1px #c2cfe3;
     border-right: solid 1px #617fb5;
     background: url(Menu/menubar.jpg) center;
     vertical-align:middle;
    }

    .RadMenu_Logitech .rmLink:hover,
    {
     color: #000;
     font: bold, 12pt Verdana, Sans-serif;
     background: url(Menu/new_menu_bar02.jpg) center;
    }

    .RadMenu_Logitech .rmText
    {
     /*background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center;*/
     padding-left: 10px; /* should be adjusted to the size of the images, if they are larger than 16x16px */
     margin-right: 4px;
     font: 12pt Verdana, Sans-serif;
     padding-right: 10px;
     vertical-align:middle;
     line-height:46px;
    }

    .RadMenu_Logitech .rmRootGroup .rmText .rmLeftImage
    {
     margin: 3px 1px 0; /* should be adjusted to the size of the images, if they are larger than 16x16px */
    }

    .RadMenu_Logitech .rmHorizontal .rmExpandBottom, 
    .RadMenu_Logitech .rmHorizontal .rmExpandTop 

      background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center; 
    }

    .RadMenu_Logitech .rmVertical .rmExpandLeft,
    .RadMenu_Logitech .rmVertical .rmExpandRight 

      background: transparent url(Menu/white_arrow.gif) no-repeat right center; 
    }

    .RadMenu_Logitech .rmSlide
    {
     margin-top:-1px;
    }

    .RadMenu_Logitech .rmGroup
    {
     background: white;
    }

    .RadMenu_Logitech .rmGroup .rmLink
    {
      background: transparent url(Menu/flyout_bluegrey.jpg) right center; 
     border: 0px;
     color: white;
     height:16px;
     border-bottom: solid 2px white;
     padding-right:10px;
     text-align:left;
    }

    .RadMenu_Logitech .rmGroup .rmText
    {
     font-weight: normal !important;
     background: none;
     margin-right: 0 !important;
     padding-left: 10px;
     padding-right: 20px;
     font-size: 10px;
     line-height: 16px;
    }

    .RadMenu_Logitech .rmGroup .rmLink:hover,
    .RadMenu_Logitech .rmGroup .rmFocused,
    .RadMenu_Logitech .rmGroup .rmExpanded
    {
      background: transparent url(Menu/flyout_darkblue.jpg) right center; 
     border: 0px;
     padding-right:10px;
     border-bottom: solid 2px white;
     color: #939598;
    }

    .RadMenu_Logitech .rmLeftArrow,
    .RadMenu_Logitech .rmRightArrow,
    .RadMenu_Logitech .rmTopArrow,
    .RadMenu_Logitech .rmBottomArrow,
    .RadMenu_Logitech .rmLeftArrowDisabled,
    .RadMenu_Logitech .rmRightArrowDisabled,
    .RadMenu_Logitech .rmTopArrowDisabled,
    .RadMenu_Logitech .rmBottomArrowDisabled
    {
     background: #e7f1ff url(Menu/left.gif) center center no-repeat;
     width: 15px;
     text-decoration:none;
     text-indent:-3000px;
     color:#e7f1ff;
     overflow:hidden;
    }

    .RadMenu_Logitech .rmTopArrow,
    .RadMenu_Logitech .rmTopArrowDisabled
    {
     background-image: url(Menu/top.gif);
     width: 100%;
     height: 15px;
    }

    .RadMenu_Logitech .rmBottomArrow,
    .RadMenu_Logitech .rmBottomArrowDisabled
    {
     background-image:url(Menu/bottom.gif);
     width: 100%;
     height: 15px;
    }

    .RadMenu_Logitech .rmRightArrow,
    .RadMenu_Logitech .rmLeftArrow
    {
     height: 100%;
    }

    .RadMenu_Logitech .rmRightArrow,
    .RadMenu_Logitech .rmRightArrowDisabled
    {
     background-image: url(Menu/grey_arrow.gif);
    }

    .RadMenu_Logitech .rmVertical .rmSeparator
    {
     padding-top: 2px;
     background: #6788be;
     font-size: 1px;
     line-height: 1px;
    }

    .RadMenu_Logitech .rmSeparator .rmText
    {
     display: none;
    }

    .RadMenu_Logitech .rmExpandLeft,
    .RadMenu_Logitech .rmExpandRight,
    .RadMenu_Logitech .rmFocused .rmExpandLeft,
    .RadMenu_Logitech .rmFocused .rmExpandRight,
    .RadMenu_Logitech .rmExpanded .rmExpandLeft,
    .RadMenu_Logitech .rmExpanded .rmExpandRight
    {
     background: transparent url(Menu/white_arrow.gif) right center no-repeat;
    }

    .RadMenu_Logitech .rmGroup .rmExpandLeft,
    .RadMenu_Logitech .rmGroup .rmExpandRight,
    {
     background: transparent url(Menu/grey_arrow.gif) right center no-repeat;
    }

    .RadMenu_Logitech .rmGroup .rmExpandLeft:hover,
    .RadMenu_Logitech .rmGroup .rmExpandRight:hover,
    .RadMenu_Logitech .rmGroup .rmFocused .rmExpandLeft,
    .RadMenu_Logitech .rmGroup .rmFocused .rmExpandRight,
    .RadMenu_Logitech .rmGroup .rmExpanded .rmExpandLeft,
    .RadMenu_Logitech .rmGroup .rmExpanded .rmExpandRight
    {
     background: transparent url(Menu/white_arrow.gif) right center no-repeat;
    }

    /* mozilla only - disabled state */
    .RadMenu_Logitech .rmLink.rmDisabled,
    .RadMenu_Logitech .rmLink.rmDisabled:hover
    {
     -moz-opacity: 0.8;
     opacity: 0.8;
     color: #ccc;
     background: none;
    }

    /*right-to-left support*/

    .RadMenu_Logitech_rtl,
    .RadMenu_Logitech_rtl *
    {
        text-align:right;
    }

    .RadMenu_Logitech_rtl .rmRootGroup .rmText
    {
     padding-left: 24px;
     padding-right: 8px;
     margin-right: 0;
     margin-left: 4px;
    }

    .RadMenu_Logitech_rtl .rmGroup .rmText
    {
     margin-left: 0 !important;
     padding-left: 40px;
     padding-right: 30px;
    }

    .RadMenu_Logitech .rmLeftImage
    {
     margin: 5px 2px 0;
    }

    .RadMenu_Logitech_rtl .rmHorizontal .rmExpandBottom, 
    .RadMenu_Logitech_rtl .rmHorizontal .rmExpandTop 

      background-position:left center; 
    }

    .RadMenu_Logitech_rtl .rmVertical .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmVertical .rmExpandRight 

      background: transparent url(Menu/invertedGroupImageRTL.gif) no-repeat left center;
    }

    .RadMenu_Logitech_rtl .rmGroup .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmGroup .rmExpandRight 

      background: transparent url(Menu/groupImageRTL.gif) no-repeat 5px center; 
    }

    .RadMenu_Logitech_rtl .rmVertical .rmLink:hover .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmVertical .rmLink:hover .rmExpandRight,
    .RadMenu_Logitech_rtl .rmVertical .rmFocused .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmVertical .rmFocused .rmExpandRight,
    .RadMenu_Logitech_rtl .rmVertical .rmExpanded .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmVertical .rmExpanded .rmExpandRight
    {
     background: transparent url(Menu/invertedGroupImageRTL.gif) left center no-repeat;
    }

    .RadMenu_Logitech_rtl .rmGroup .rmLink:hover .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmGroup .rmLink:hover .rmExpandRight,
    .RadMenu_Logitech_rtl .rmGroup .rmFocused .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmGroup .rmFocused .rmExpandRight,
    .RadMenu_Logitech_rtl .rmGroup .rmExpanded .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmGroup .rmExpanded .rmExpandRight
    {
     background: transparent url(Menu/groupImageRTL.gif) 5px center no-repeat;
    }

  5. Rob
    Rob avatar
    44 posts
    Member since:
    Apr 2008

    Posted 17 Sep 2008 Link to this post

    I now have it almost working in all browsers - the only thing I can't make happen is the right arrow in the sub menu items when they are not hovered, in safari/firefox, but it works in IE.

    My currnent css file is:

    .RadMenu_Logitech
    {
     border-left: solid 1px #617fb5;
     background: url(Menu/menubar.jpg) repeat-x;
     width:891px;
    }

    .RadMenu_Logitech_Context
    {
     background: transparent;
     border:0;
    }

    .RadMenu_Logitech .rmLink
    {
     text-decoration: none;
     color: #000;
     border-left: solid 1px #c2cfe3;
     border-right: solid 1px #617fb5;
     background: url(Menu/menubar.jpg) center;
     vertical-align:middle;
    }

    .RadMenu_Logitech .rmLink:hover
    {
     color: #000;
     font: bold, 12pt Verdana, Sans-serif;
     background: url(Menu/new_menu_bar02.jpg) center;
    }

    .RadMenu_Logitech .rmText
    {
     /*background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center;*/
     padding-left: 10px; /* should be adjusted to the size of the images, if they are larger than 16x16px */
     margin-right: 4px;
     font: 12pt Verdana, Sans-serif;
     padding-right: 10px;
     vertical-align:middle;
     line-height:46px;
    }

    .RadMenu_Logitech .rmRootGroup .rmText .rmLeftImage
    {
     margin: 3px 1px 0; /* should be adjusted to the size of the images, if they are larger than 16x16px */
    }

    .RadMenu_Logitech .rmHorizontal .rmExpandBottom, 
    .RadMenu_Logitech .rmHorizontal .rmExpandTop 

      background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center; 
    }

    .RadMenu_Logitech .rmVertical .rmExpandLeft,
    .RadMenu_Logitech .rmVertical .rmExpandRight 

      background: transparent url(Menu/white_arrow.gif) no-repeat right center; 
    }

    .RadMenu_Logitech .rmSlide
    {
     margin-top:-1px;
    }

    .RadMenu_Logitech .rmGroup
    {
     background: white;
    }

    .RadMenu_Logitech .rmGroup .rmLink
    {
      background: transparent url(Menu/flyout_bluegrey.jpg) right center; 
     border: 0px;
     height:16px;
     border-bottom: solid 2px white;
     padding-right:10px;
     text-align:left;
     color: #939598;
    }

    .RadMenu_Logitech .rmGroup .rmText
    {
     font-weight: normal !important;
     background: none;
     margin-right: 0 !important;
     padding-left: 10px;
     padding-right: 20px;
     font-size: 10px;
     line-height: 16px;
    }

    .RadMenu_Logitech .rmGroup .rmLink:hover,
    .RadMenu_Logitech .rmGroup .rmFocused,
    .RadMenu_Logitech .rmGroup .rmExpanded
    {
      background: transparent url(Menu/flyout_darkblue.jpg) right center; 
     border: 0px;
     padding-right:10px;
     border-bottom: solid 2px white;
     color: White;
    }

    .RadMenu_Logitech .rmLeftArrow,
    .RadMenu_Logitech .rmRightArrow,
    .RadMenu_Logitech .rmTopArrow,
    .RadMenu_Logitech .rmBottomArrow,
    .RadMenu_Logitech .rmLeftArrowDisabled,
    .RadMenu_Logitech .rmRightArrowDisabled,
    .RadMenu_Logitech .rmTopArrowDisabled,
    .RadMenu_Logitech .rmBottomArrowDisabled
    {
     background: #e7f1ff url(Menu/left.gif) center center no-repeat;
     width: 15px;
     text-decoration:none;
     text-indent:-3000px;
     color:#e7f1ff;
     overflow:hidden;
    }

    .RadMenu_Logitech .rmTopArrow,
    .RadMenu_Logitech .rmTopArrowDisabled
    {
     background-image: url(Menu/top.gif);
     width: 100%;
     height: 15px;
    }

    .RadMenu_Logitech .rmBottomArrow,
    .RadMenu_Logitech .rmBottomArrowDisabled
    {
     background-image:url(Menu/bottom.gif);
     width: 100%;
     height: 15px;
    }

    .RadMenu_Logitech .rmRightArrow,
    .RadMenu_Logitech .rmLeftArrow
    {
     height: 100%;
    }

    .RadMenu_Logitech .rmRightArrow,
    .RadMenu_Logitech .rmRightArrowDisabled
    {
     background-image: url(Menu/grey_arrow.gif);
    }

    .RadMenu_Logitech .rmVertical .rmSeparator
    {
     padding-top: 2px;
     background: #6788be;
     font-size: 1px;
     line-height: 1px;
    }

    .RadMenu_Logitech .rmSeparator .rmText
    {
     display: none;
    }

    .RadMenu_Logitech .rmExpandLeft,
    .RadMenu_Logitech .rmExpandRight,
    .RadMenu_Logitech .rmFocused .rmExpandLeft,
    .RadMenu_Logitech .rmFocused .rmExpandRight,
    .RadMenu_Logitech .rmExpanded .rmExpandLeft,
    .RadMenu_Logitech .rmExpanded .rmExpandRight
    {
     background: transparent url(Menu/white_arrow.gif) right center no-repeat;
    }

    .RadMenu_Logitech .rmGroup .rmExpandLeft,
    .RadMenu_Logitech .rmGroup .rmExpandRight,
    {
     background: transparent url(Menu/grey_arrow.gif) right center no-repeat;
    }

    .RadMenu_Logitech .rmGroup .rmExpandLeft:hover,
    .RadMenu_Logitech .rmGroup .rmExpandRight:hover,
    .RadMenu_Logitech .rmGroup .rmFocused .rmExpandLeft,
    .RadMenu_Logitech .rmGroup .rmFocused .rmExpandRight,
    .RadMenu_Logitech .rmGroup .rmExpanded .rmExpandLeft,
    .RadMenu_Logitech .rmGroup .rmExpanded .rmExpandRight
    {
     background: transparent url(Menu/white_arrow.gif) right center no-repeat;
    }

    /* mozilla only - disabled state */
    .RadMenu_Logitech .rmLink.rmDisabled,
    .RadMenu_Logitech .rmLink.rmDisabled:hover
    {
     -moz-opacity: 0.8;
     opacity: 0.8;
     color: #ccc;
     background: none;
    }

    /*right-to-left support*/

    .RadMenu_Logitech_rtl,
    .RadMenu_Logitech_rtl *
    {
        text-align:right;
    }

    .RadMenu_Logitech_rtl .rmRootGroup .rmText
    {
     padding-left: 24px;
     padding-right: 8px;
     margin-right: 0;
     margin-left: 4px;
    }

    .RadMenu_Logitech_rtl .rmGroup .rmText
    {
     margin-left: 0 !important;
     padding-left: 40px;
     padding-right: 30px;
    }

    .RadMenu_Logitech .rmLeftImage
    {
     margin: 5px 2px 0;
    }

    .RadMenu_Logitech_rtl .rmHorizontal .rmExpandBottom, 
    .RadMenu_Logitech_rtl .rmHorizontal .rmExpandTop 

      background-position:left center; 
    }

    .RadMenu_Logitech_rtl .rmVertical .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmVertical .rmExpandRight 

      background: transparent url(Menu/invertedGroupImageRTL.gif) no-repeat left center;
    }

    .RadMenu_Logitech_rtl .rmGroup .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmGroup .rmExpandRight 

      background: transparent url(Menu/groupImageRTL.gif) no-repeat 5px center; 
    }

    .RadMenu_Logitech_rtl .rmVertical .rmLink:hover .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmVertical .rmLink:hover .rmExpandRight,
    .RadMenu_Logitech_rtl .rmVertical .rmFocused .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmVertical .rmFocused .rmExpandRight,
    .RadMenu_Logitech_rtl .rmVertical .rmExpanded .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmVertical .rmExpanded .rmExpandRight
    {
     background: transparent url(Menu/invertedGroupImageRTL.gif) left center no-repeat;
    }

    .RadMenu_Logitech_rtl .rmGroup .rmLink:hover .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmGroup .rmLink:hover .rmExpandRight,
    .RadMenu_Logitech_rtl .rmGroup .rmFocused .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmGroup .rmFocused .rmExpandRight,
    .RadMenu_Logitech_rtl .rmGroup .rmExpanded .rmExpandLeft,
    .RadMenu_Logitech_rtl .rmGroup .rmExpanded .rmExpandRight
    {
     background: transparent url(Menu/groupImageRTL.gif) 5px center no-repeat;
    }

  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 17 Sep 2008 Link to this post

    Hi Rob,

    We cannot test only by using the CSS. Could you please provide a live url? If this is not an option you could open a formal support ticket and send us a simple page which reproduces the problem. Thanks.

    Regards,
    Albert
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Rob
    Rob avatar
    44 posts
    Member since:
    Apr 2008

    Posted 17 Sep 2008 Link to this post

    Hi Albert,

    The url is www.logitech.com.au

    Currently the only thing not working is the right arrows when the sub menu is grey.

    Cheers

    Rob
  8. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 18 Sep 2008 Link to this post

    Hello Rob,

    Thank you for providing the url.

    Please remove "background:none" css property form the following style in your Menu.Logitech.css file:

    .RadMenu_Logitech .rmGroup .rmText  
    {  
        font-weightnormal !important;  
        backgroundnone;  
        margin-right: 0 !important;  
        padding-left10px;  
        padding-right20px;  
        font-size10px;  
        line-height16px;  


    Kind regards,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  9. -DJ-
    -DJ- avatar
    263 posts
    Member since:
    Oct 2004

    Posted 18 Sep 2008 Link to this post

    You could also remove the red comma as seen below:

    RadMenu_Logitech .rmGroup .rmExpandLeft,
    .RadMenu_Logitech .rmGroup .rmExpandRight,
    {
     background: transparent url(Menu/grey_arrow.gif) right center no-repeat;
    }

    And note it's not the only place in that css where you end with a comma before {

    Regards,
    -DJ-
  10. Rob
    Rob avatar
    44 posts
    Member since:
    Apr 2008

    Posted 18 Sep 2008 Link to this post

    Thanks guys, that did the trick.

    Rob
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017