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