This is a migrated thread and some comments may be shown as answers.

IE6 expand arrow not appearing

1 Answer 44 Views
Menu
This is a migrated thread and some comments may be shown as answers.
donavon
Top achievements
Rank 1
donavon asked on 07 Nov 2008, 08:10 PM
I setup my own skin based upon the RadMenu Default skin. I'm able to get the down arrow to appear on the root menu items in IE7 and Firefox just fine. but unable to get them to work in IE6.

Here is a copy of the stylesheet i'm using.

/* RadMenu Default skin */

.RadMenu_Custom
{
 /*border: 1px solid #010101;*/
 border-bottom-width: 0;
 /*border-top-color: #383838;
 background: #444 url(Menu/MenuBackground.gif) repeat-x top left;*/
 text-align: left;
}

.RadMenu_Custom_rtl
{
 text-align: right;
}

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

.RadMenu_Custom a
{
 text-decoration: none;
}

.RadMenu_Custom .rmLink
{
 line-height: 24px;
 text-decoration: none;
 color: #fff;
}

.RadMenu_Custom .rmLink:focus,
.RadMenu_Custom .rmFocused
{
 outline: 0;
}

.RadMenu_Custom .rmExpanded
{
 z-index: 10000;
}

.RadMenu_Custom .rmLink:hover,
.RadMenu_Custom .rmFocused,
.RadMenu_Custom .rmExpanded
{

 color: #333;
}

.RadMenu_Custom .rmLink .rmText
{
 
 font: normal 12px Arial, sans-serif;
}
.RadMenu_Custom .rmHorizontal .rmExpandDown

  background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center; 
}
.RadMenu_Custom .rmGroup
{
 background: #fff;
}

.RadMenu_Custom .rmGroup .rmLink
{
 text-decoration: none;
 color: #333;
}

.RadMenu_Custom_rtl .rmGroup .rmLink
{
 text-align: right;
}

.RadMenu_Custom .rmGroup .rmLink:hover,
.RadMenu_Custom .rmGroup .rmFocused,
.RadMenu_Custom .rmGroup .rmExpanded
{
 color: #fff;
 background: #444;
}

.RadMenu_Custom .rmText
{
 padding: 3px 20px 5px 20px;
}

.RadMenu_Custom .rmGroup .rmLink .rmText
{
 font-size: 11px;
}

/* <expand arrows styling> */

.RadMenu_Custom .rmGroup .rmLink .rmExpandRight
{
 background: transparent url(Menu/ArrowExpand.gif) no-repeat right -3px;
}

.RadMenu_Custom .rmGroup .rmLink .rmExpandLeft
{
 background: transparent url(Menu/ArrowExpandRTL.gif) no-repeat left -3px;
}

.RadMenu_Custom .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_Custom .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Custom .rmGroup .rmExpanded .rmExpandRight
{
 background-image: url(Menu/ArrowExpandHovered.gif);
}

.RadMenu_Custom .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_Custom .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Custom .rmGroup .rmExpanded .rmExpandLeft
{
 background-image: url(Menu/ArrowExpandHoveredRTL.gif);
}

/* </expand arrows styling> */

.RadMenu_Custom .rmHorizontal .rmItem 
{
    border-right: 1px solid #fff;
    padding-right: 10px;}
.RadMenu_Custom .rmHorizontal .rmLast { border-right: 0; }

.RadMenu_Custom .rmVertical .rmItem { border-bottom: 1px solid #353535; }
.RadMenu_Custom .rmVertical .rmLast { border-bottom: 0; }

.RadMenu_Custom_rtl .rmHorizontal .rmItem { border-left: 0; }

.RadMenu_Custom .rmRootGroup .rmGroup .rmItem,
.RadMenu_Custom_Context .rmGroup .rmItem
{ border-right: 0; border-bottom: 0; }

.RadMenu_Custom .rmGroup
{
 border: 1px solid #828282;
 background-color: #fff;
}

.RadMenu_Custom .rmGroup .rmExpanded
{
 z-index: 11;
}

.RadMenu_Custom .rmTopArrowDisabled,
.RadMenu_Custom .rmBottomArrowDisabled,
.RadMenu_Custom .rmLeftArrowDisabled,
.RadMenu_Custom .rmRightArrowDisabled
{
 display: none;
}

.RadMenu_Custom .rmTopArrow,
.RadMenu_Custom .rmBottomArrow,
.RadMenu_Custom .rmLeftArrow,
.RadMenu_Custom .rmRightArrow
{
 font-size: 0;
 line-height: 0;
 color: #fff;
}

.RadMenu_Custom .rmTopArrow,
.RadMenu_Custom .rmBottomArrow
{
 height: 10px;
 width: 100%;
 background: #fff url(Menu/ArrowScrollUpDown.gif) no-repeat top center;
}

.RadMenu_Custom .rmBottomArrow
{
 background-position: center -18px;
}

.RadMenu_Custom .rmLeftArrow,
.RadMenu_Custom .rmRightArrow
{
 width: 10px;
 height: 100%;
 background: #fff url(Menu/ArrowScrollLeftRight.gif) no-repeat left center;
}

.RadMenu_Custom .rmRightArrow
{
 background-position: -18px center;
}

.RadMenu_Custom .rmItem .rmDisabled .rmText
{
 color: #999;
}

.RadMenu_Custom .rmRootGroup .rmItem .rmDisabled
{
 background: none;
}

.RadMenu_Custom .rmGroup .rmItem .rmDisabled
{
 background-color: #fff;
}

.RadMenu_Custom .rmRootGroup .rmSeparator,
.RadMenu_Custom .rmGroup .rmSeparator
{
 background: #8f8f8f;
 border-top: 1px solid #676767;
 border-bottom: 0;
}

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

.RadMenu_Custom .rmHorizontal .rmSeparator
{
 height: 20px;
 width: 1px;
 line-height: 20px;
 border: 0;
}

.RadMenu_Custom .rmVertical .rmSeparator
{
 height: 1px;
 margin: 3px 0;
 border: 0;
 line-height: 1px;
}

.RadMenu_Custom .rmLeftImage
{
 margin: 2px;
}

.RadMenu_Custom .rmSlide
{
 margin: -1px 0 0 -1px !important;
}

* html .RadMenu_Custom .rmVertical .rmSlide
{
 margin-left: -2px !important;
}

* html .RadMenu_Custom .rmHorizontal .rmSlide
{
 margin-top: -2px !important;
}

.RadMenu_Custom_rtl .rmSlide
{
 margin: -1px 0 0 2px !important;
}

* html .RadMenu_Custom_rtl .rmVertical .rmSlide
{
 margin-left: 3px !important;
}

* html .RadMenu_Custom_rtl .rmHorizontal .rmSlide
{
 margin-top: -2px !important;
 margin-left: 0 !important;
}

.RadMenu_Custom .rmItem .rmDisabled:hover
{
 background: none;
}

1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 10 Nov 2008, 01:06 PM
Hello Donavon,

Please modify your css style for "rmExpandDown" class like this:

.RadMenu_Custom .rmHorizontal .rmExpandDown   
{    
  backgroundtransparent url(Menu/RootGroupArrowDown.gif) no-repeat right center;  
  displayinline-block !important;  
}  

I hope this helps.

Best wishes,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Menu
Asked by
donavon
Top achievements
Rank 1
Answers by
Yana
Telerik team
Share this question
or