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;
}