IE6 expand arrow not appearing

2 posts, 0 answers
  1. donavon
    donavon  avatar
    5 posts
    Member since:
    Jul 2003

    Posted 07 Nov 2008 Link to this post

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

  2. Yana
    Admin
    Yana avatar
    5030 posts

    Posted 10 Nov 2008 Link to this post

    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.
Back to Top