Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Menu problem with Firefox

8 Answers 117 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
Rob asked on 17 Sep 2008, 04:00 AM
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;
}

8 Answers, 1 is accepted

Sort by
0
Rob
Top achievements
Rank 1
answered on 17 Sep 2008, 04:17 AM
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.
0
Rob
Top achievements
Rank 1
answered on 17 Sep 2008, 05:10 AM
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;
}

0
Rob
Top achievements
Rank 1
answered on 17 Sep 2008, 07:30 AM
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;
}

0
Atanas Korchev
Telerik team
answered on 17 Sep 2008, 12:07 PM
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.
0
Rob
Top achievements
Rank 1
answered on 17 Sep 2008, 09:02 PM
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
0
Yana
Telerik team
answered on 18 Sep 2008, 09:51 AM
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-weight: normal !important;  
    background: none;  
    margin-right: 0 !important;  
    padding-left: 10px;  
    padding-right: 20px;  
    font-size: 10px;  
    line-height: 16px;  
} 


Kind regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
-DJ-
Top achievements
Rank 1
answered on 18 Sep 2008, 10:26 AM
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-
0
Rob
Top achievements
Rank 1
answered on 18 Sep 2008, 11:05 PM
Thanks guys, that did the trick.

Rob
Tags
Menu
Asked by
Rob
Top achievements
Rank 1
Answers by
Rob
Top achievements
Rank 1
Atanas Korchev
Telerik team
Yana
Telerik team
-DJ-
Top achievements
Rank 1
Share this question
or