Rad Menu - Custom Skin Not working in IE 7

4 posts, 0 answers
  1. Venkat
    Venkat avatar
    5 posts
    Member since:
    Jul 2010

    Posted 08 Sep 2010 Link to this post

    Hi Friends,
               I have a Rad Menu, with Customized Skin. It works fine with all browsers, but it is not showing child items in IE 7 alone. Kindly help me. I have attached the view as image with attachments.
    And the Css:

    /* <RadMenu / Default> */

    .RadMenu_Green .rmRootGroup,
    .RadMenu_Green a.rmLink,
    .RadMenu_Green .rmGroup .rmText,
    .RadMenu_Green .rmLeftArrow,
    .RadMenu_Green .rmRightArrow,
    .RadMenu_Green .rmTopArrow,
    .RadMenu_Green .rmBottomArrow
    {
        /*background-image: url('Menu/rmSprite.png');*/
        /*background-color: transparent;*/
        background: none;
    }

    .RadMenu_Green .rmRootGroup
    {
        background: none;
        border: 1px solid #01649F;
        background-repeat: repeat-x;
        background-position: 0 -408px;
        overflow: visible;
        height:25px;
        /* background-color: #CFFCEA; */
        filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#489AD6',EndColorStr='#01649F'); /* For IE 5.5 to IE 7 */
        background: -moz-linear-gradient(top , #489AD6, #01649F); /* Mozilla */
        background: -webkit-gradient(linear, left top, left bottom, from(#489AD6), to(#01649F)); /* Safari and Chrome */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#489AD6, endColorstr=#01649F)"; /* For IE 8 */
    }

    /* <Root items> */

    .RadMenu_Green,
    .RadMenu_Green a.rmLink
    {
        font: normal 12px/25px "Segoe UI", Arial, sans-serif;
        color: #fff;
        text-decoration: none;
    }

    .RadMenu_Green a.rmLink,
    .RadMenu_Green a.rmDisabled,
    .RadMenu_Green a.rmDisabled:hover
    {
        background-position: 0 -72px;
    }

    .RadMenu_Green .rmFirst a.rmLink,
    .RadMenu_Green .rmFirst a.rmLink:hover,
    .RadMenu_Green .rmLast .rmText,
    .RadMenu_Green .rmLast a.rmLink:hover .rmText,
    .RadMenu_Green .rmVertical a.rmLink,
    .RadMenu_Green .rmVertical .rmText
    {
        background-repeat: no-repeat;
        background-position: 0 500px;
    }

    .RadMenu_Green .rmVertical .rmFirst,
    .RadMenu_Green .rmVertical .rmLast
    {
        background: none;
    }

    .RadMenu_Green a.rmLink:hover,
    .RadMenu_Green a.rmFocused,
    .RadMenu_Green a.rmSelected
    {
        background-color: #01649F;
    }

    .RadMenu_Green .rmHorizontal .rmRootLink span.rmText
    {
        display: inline;
        padding-left: 12px;
    }

    .RadMenu_Green .rmHorizontal a.rmRootLink
    {
        padding-left: 0;
    }

    .RadMenu_Green .rmHorizontal .rmItem > a.rmRootLink /* IE6 doesn't like width: 100% on its items. */
    {
        width: 100%;
    }

    .RadMenu_Green .rmHorizontal img.rmLeftImage
    {
        margin: 4px -4px 0 6px;
    }

    .RadMenu_Green_rtl .rmHorizontal img.rmLeftImage
    {
        margin: 4px 6px 0 -4px;
    }

    .RadMenu_Green .rmVertical a.rmLink
    {
        padding-top: 1px;
        padding-bottom: 1px;
    }

    .RadMenu_Green .rmVertical a.rmLink:hover,
    .RadMenu_Green .rmVertical a.rmFocused,
    .RadMenu_Green .rmVertical a.rmSelected,
    .RadMenu_Green .rmVertical a.rmExpanded,
    .RadMenu_Green .rmVertical a.rmExpanded:hover
    {
        padding-top: 0;
        padding-bottom: 0;
        border-style: solid;
        border-color: #01649F;
        border-width: 1px 0;
    }

    .RadMenu_Green .rmVertical .rmFirst a.rmLink:hover,
    .RadMenu_Green .rmVertical .rmFirst a.rmFocused,
    .RadMenu_Green .rmVertical .rmFirst a.rmSelected,
    .RadMenu_Green .rmVertical .rmFirst a.rmExpanded,
    .RadMenu_Green .rmVertical .rmFirst a.rmExpanded:hover
    {
        padding-top: 1px;
        padding-bottom: 0;
        border-top-width: 0;
    }

    .RadMenu_Green .rmVertical .rmLast a.rmLink:hover,
    .RadMenu_Green .rmVertical .rmLast a.rmFocused,
    .RadMenu_Green .rmVertical .rmLast a.rmSelected,
    .RadMenu_Green .rmVertical .rmLast a.rmExpanded,
    .RadMenu_Green .rmVertical .rmLast a.rmExpanded:hover
    {
        padding-bottom: 1px;
        padding-top: 0;
        border-bottom-width: 0;
    }

    .RadMenu_Green .rmVertical .rmItem a.rmDisabled:hover
    {
        padding-top: 1px;
        padding-bottom: 1px;
        border-width: 0;
    }

    .RadMenu_Green a.rmExpanded,
    .RadMenu_Green a.rmExpanded:hover
    {
        background-color: #01649F;
    }

    .RadMenu_Green a.rmDisabled,
    .RadMenu_Green a.rmDisabled:hover
    {
        color: #01649F;
        background-color: #01649F;
    }

    /* </Root items> */


    /* <Submenu items> */

    .RadMenu_Green .rmGroup,
    .RadMenu_Green .rmMultiColumn,
    .RadMenu_Green .rmGroup .rmVertical
    {
        border: 1px solid #01649F;
        background: none;
        /*background: #fff url('Menu/rmVSprite.png') repeat-y 0 0;*/
    }

    .RadMenu_Green .rmTopFix,
    .RadMenu_Green .rmBottomFix,
    .RadMenu_Green .rmRoundedCorners .rmGroup .rmItem,
    .RadMenu_Green .rmRoundedCorners li.rmFirstGroupColumn .rmItem,
    .RadMenu_Green .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem,
    .RadMenu_Green .rmRoundedCorners ul.rmHorizontal .rmFirst,
    .RadMenu_Green_Context.rmRoundedCorners .rmGroup .rmItem,
    .RadMenu_Green_Context.rmRoundedCorners ul.rmHorizontal .rmFirst
    {
        /* background-image: url('Menu/rmVSprite.png'); */
        background-color: #01649F;
        /* background-repeat: repeat-y; */
    }

    * html .rmRoundedCorners_Green .rmGroup .rmItem,
    * html .rmRoundedCorners_Green ul.rmHorizontal .rmFirst
    {
        /* background-image: url('Menu/rmVSprite.png'); */
        background-color: #01649F;
        /* background-repeat: repeat-y; */
    }

    .RadMenu_Green .rmRoundedCorners .rmScrollWrapContainer .rmGroup,
    .RadMenu_Green .rmRoundedCorners .rmScrollWrap .rmItem,
    .RadMenu_Green .rmRoundedCorners .rmGroupColumn .rmItem,
    .RadMenu_Green .rmRoundedCorners .rmGroupColumn .rmGroupColumn .rmItem,
    .RadMenu_Green .rmRoundedCorners .rmHorizontal .rmItem,
    .RadMenu_Green .rmRoundedCorners .rmScrollWrap .rmVertical,
    .RadMenu_Green_Context.rmRoundedCorners .rmScrollWrapContainer .rmGroup,
    .RadMenu_Green_Context.rmRoundedCorners .rmScrollWrap .rmItem,
    .RadMenu_Green_Context.rmRoundedCorners .rmHorizontal .rmItem,
    .RadMenu_Green_Context.rmRoundedCorners .rmScrollWrap .rmVertical
    {
        background-color: #01649F;
        /* background-image: none; */
    }

    * html .rmRoundedCorners_Green .rmScrollWrapContainer .rmGroup,
    * html .rmRoundedCorners_Green .rmScrollWrap .rmItem,
    * html .rmRoundedCorners_Green .rmHorizontal .rmItem,
    * html .rmRoundedCorners_Green .rmScrollWrap .rmVertical
    {
        background-image: none;
    }

    .RadMenu_Green .rmRoundedCorners .rmGroupColumn
    {
        background-color: #01649F;
    }

    .RadMenu_Green .rmBottomLeft,
    .RadMenu_Green .rmRoundedCorners .rmScrollWrapContainer,
    .RadMenu_Green_Context.rmRoundedCorners .rmScrollWrapContainer,
    .RadMenu_Green_Context.rmRoundedCorners ul.rmGroup,
    .RadMenu_Green .rmRoundedCorners ul.rmGroup,
    .RadMenu_Green .rmRoundedCorners .rmMultiColumn
    {
        background-image:  url('Menu/rmRoundedLeft.png');
        background-color: transparent;
        background-repeat: no-repeat;
    }

    * html .rmRoundedCorners_Green .rmScrollWrapContainer,
    * html .rmRoundedCorners_Green .rmGroup ul.rmGroup,
    * html .rmRoundedCorners_Green ul.rmGroup
    {
        background-color: #01649F;
        /* background-image:  url('Menu/rmRoundedLeft.png');
        background-color: transparent;
        background-repeat: no-repeat; */
    }

    .RadMenu_Green .rmTopRight,
    .RadMenu_Green .rmBottomRight
    {
        background-image:  url('Menu/rmRoundedRight.png');
        background-color: transparent;
        background-repeat: no-repeat;
    }

    .RadMenu_Green .rmTopFix,
    .RadMenu_Green .rmBottomFix,
    .RadMenu_Green .rmRoundedCorners .rmGroup .rmFirst,
    .RadMenu_Green_Context.rmRoundedCorners .rmGroup .rmFirst,
    .rmRoundedCorners_Green .rmGroup .rmFirst
    {
        border-color: #979797;
    }

    .RadMenu_Green .rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
    .RadMenu_Green .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix,
    .RadMenu_Green_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
    .RadMenu_Green_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix
    {
        background: #000000;
    }

    * html .rmRoundedCorners_Green .rmScrollWrapContainer .rmTopFix,
    * html .rmRoundedCorners_Green .rmScrollWrapContainer .rmBottomFix
    {
        background: #000000;
    }

    .RadMenu_Green .rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
    .RadMenu_Green .rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
    .RadMenu_Green .rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
    .RadMenu_Green .rmRoundedCorners .rmScrollWrapContainer .rmRightArrow,
    .RadMenu_Green_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
    .RadMenu_Green_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
    .RadMenu_Green_Context.rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
    .RadMenu_Green_Context.rmRoundedCorners .rmScrollWrapContainer .rmRightArrow
    {
        background-color: #01649F;
        border: 0;
    }

    * html .rmRoundedCorners_Green .rmScrollWrapContainer .rmTopArrow,
    * html .rmRoundedCorners_Green .rmScrollWrapContainer .rmBottomArrow,
    * html .rmRoundedCorners_Green .rmScrollWrapContainer .rmLeftArrow,
    * html .rmRoundedCorners_Green .rmScrollWrapContainer .rmRightArrow
    {
        background-color: #01649F;
        border: 0;
    }

    .RadMenu_Green_rtl .rmBottomLeft,
    .RadMenu_Green_rtl .rmRoundedCorners ul.rmGroup,
    .RadMenu_Green_rtl .rmRoundedCorners .rmMultiColumn,
    .RadMenu_Green .rmRoundedCorners .rmScrollWrapContainer,
    .RadMenu_Green .rmScrollWrapContainer .rmBottomLeft,
    .rmRoundedCorners.RadMenu_Green_Context_rtl ul.rmGroup,
    .RadMenu_Green_Context.rmRoundedCorners .rmScrollWrapContainer
    {
        background-image: url('Menu/rmRoundedLeft_rtl.png');
    }

    .RadMenu_Green_rtl .rmTopRight,
    .RadMenu_Green_rtl .rmBottomRight
    {
        background-image: url('Menu/rmRoundedRight_rtl.png');
    }

    .RadMenu_Green_rtl li.rmTopFix,
    .RadMenu_Green_rtl li.rmBottomFix,
    .RadMenu_Green_rtl .rmRoundedCorners .rmGroup .rmItem,
    .rmRoundedCorners.RadMenu_Green_Context_rtl .rmGroup .rmItem
    {
        background-color: #01649F;
        background-position: 101% 0;
    }

    .RadMenu_Green .rmSlide .rmScrollWrap
    {
        background-color: #01649F;
        background-image: none;
    }

    .RadMenu_Green_rtl .rmGroup,
    .RadMenu_Green_rtl .rmMultiColumn,
    .RadMenu_Green_rtl .rmGroup .rmVertical
    {
        background-color: #01649F;
        background-position: 100% 0;
    }

    .RadMenu_Green .rmRootGroup li.rmItem .rmGroup
    {
        padding-bottom: 0;
    }

    .RadMenu_Green .rmRootGroup .rmHorizontal
    {
        background-color: #01649F;
        background-image: none;
    }

    .RadMenu_Green .rmScrollWrap .rmVertical
    {
        background-color: #01649F;
        border: 0;
    }

    .RadMenu_Green .rmRoundedCorners .rmScrollWrapContainer li.rmItem,
    .RadMenu_Green_Context.rmRoundedCorners .rmScrollWrapContainer li.rmItem,
    .rmRoundedCorners_Green .rmScrollWrapContainer li.rmItem
    {
        background: none;
    }

    .RadMenu_Green .rmGroup .rmItem a.rmLink,
    .RadMenu_Green .rmGroup .rmItem a.rmLink:hover,
    .RadMenu_Green .rmGroup .rmItem a.rmFocused,
    .RadMenu_Green .rmGroup .rmItem a.rmSelected,
    .RadMenu_Green .rmGroup .rmItem a.rmExpanded
    {
        background-color: #01649F;
        padding-top: 0;
        padding-bottom: 0;
        border: 0;
    }

    .RadMenu_Green .rmGroup .rmLast a.rmLink,
    .RadMenu_Green .rmGroup .rmLast a.rmLink:hover,
    .RadMenu_Green .rmGroup .rmLast a.rmFocused,
    .RadMenu_Green .rmGroup .rmLast a.rmSelected,
    .RadMenu_Green .rmGroup .rmLast a.rmExpanded
    {
        background-color: #01649F;
        padding-bottom: 1px;
    }

    .RadMenu_Green .rmGroup a.rmLink,
    .RadMenu_Green .rmGroup .rmText,
    .RadMenu_Green .rmGroup .rmItem a.rmDisabled,
    .RadMenu_Green .rmGroup .rmItem a.rmDisabled:hover,
    .RadMenu_Green .rmGroup .rmItem a.rmDisabled .rmText,
    .RadMenu_Green .rmGroup .rmItem a.rmDisabled:hover .rmText
    {
        background-color: #01649F;
        /* background-position: 0 500px;
        background-repeat: no-repeat;
        background-color: transparent; */
    }

    .RadMenu_Green .rmGroup a.rmLink:hover,
    .RadMenu_Green .rmGroup a.rmFocused,
    .RadMenu_Green .rmGroup a.rmSelected,
    .RadMenu_Green .rmGroup a.rmExpanded
    {
        background-position: 0 -168px;
    }

    .RadMenu_Green .rmGroup a.rmLink:hover .rmText,
    .RadMenu_Green .rmGroup a.rmFocused .rmText,
    .RadMenu_Green .rmGroup a.rmSelected .rmText,
    .RadMenu_Green .rmGroup a.rmExpanded .rmText
    {
        background-position: 100% -192px;
    }

    /* <expand arrows> */

    .RadMenu_Green .rmGroup .rmExpandRight,
    .RadMenu_Green .rmGroup .rmExpandDown,
    .RadMenu_Green .rmGroup .rmItem a.rmDisabled .rmExpandRight,
    .RadMenu_Green .rmGroup .rmItem a.rmDisabled .rmExpandDown,
    .RadMenu_Green .rmGroup .rmItem a.rmDisabled:hover .rmExpandRight,
    .RadMenu_Green .rmGroup .rmItem a.rmDisabled:hover .rmExpandDown
    {
        background-position: 100% -216px;
    }

    .RadMenu_Green .rmGroup a.rmLink:hover .rmExpandRight,
    .RadMenu_Green .rmGroup a.rmFocused .rmExpandRight,
    .RadMenu_Green .rmGroup a.rmSelected .rmExpandRight,
    .RadMenu_Green .rmGroup a.rmExpanded .rmExpandRight,
    .RadMenu_Green .rmGroup a.rmLink:hover .rmExpandDown,
    .RadMenu_Green .rmGroup a.rmFocused .rmExpandDown,
    .RadMenu_Green .rmGroup a.rmSelected .rmExpandDown,
    .RadMenu_Green .rmGroup a.rmExpanded .rmExpandDown
    {
        background-position: 100% -240px;
    }

    .RadMenu_Green .rmGroup a.rmDisabled:hover .rmExpandRight,
    .RadMenu_Green .rmGroup a.rmDisabled:hover .rmExpandDown
    {
        /*background-image: url('Menu/rmSprite.png');*/
        background-position: 100% -216px;
    }

    /* </expand arrows> */

    /* <rtl> */

    .RadMenu_Green_rtl a.rmLink,
    .RadMenu_Green_rtl .rmRootGroup a.rmDisabled
    {
        background-position: 100% -96px;
    }

    .RadMenu_Green_rtl .rmGroup a.rmDisabled
    {
        background: none;
    }

    .RadMenu_Green_rtl .rmText
    {
        background-position: 0 -96px;
    }

    .RadMenu_Green_rtl .rmVertical a.rmExpanded .rmText,
    .RadMenu_Green_rtl .rmVertical a.rmExpanded:hover .rmText
    {
        background-position: 0 500px;
        background-repeat: no-repeat;
    }

    .RadMenu_Green_rtl .rmGroup a.rmLink:hover,
    .RadMenu_Green_rtl .rmGroup a.rmFocused,
    .RadMenu_Green_rtl .rmGroup a.rmSelected,
    .RadMenu_Green_rtl .rmGroup a.rmExpanded
    {
        background-position: 100% -264px;
    }

    .RadMenu_Green_rtl .rmGroup a.rmLink:hover .rmText,
    .RadMenu_Green_rtl .rmGroup a.rmFocused .rmText,
    .RadMenu_Green_rtl .rmGroup a.rmSelected .rmText,
    .RadMenu_Green_rtl .rmGroup a.rmExpanded .rmText
    {
        background-position: 0 -288px;
    }

    .RadMenu_Green_rtl .rmGroup .rmExpandLeft
    {
        background-position: 0 -312px;
    }

    .RadMenu_Green_rtl .rmGroup a.rmLink:hover .rmExpandLeft,
    .RadMenu_Green_rtl .rmGroup a.rmFocused .rmExpandLeft,
    .RadMenu_Green_rtl .rmGroup a.rmSelected .rmExpandLeft,
    .RadMenu_Green_rtl .rmGroup a.rmExpanded .rmExpandLeft
    {
        background-position: 0 -336px;
    }

    /* </rtl> */

    /* </Submenu items> */

    /* <Submenu offsets (Default - specific, overlapping submenus)> */

    .RadMenu_Green .rmSlide
    {
        margin: 0 0 0 -1px;
    }

    .RadMenu_Green .rmVertical .rmSlide,
    .RadMenu_Green .rmSlide .rmSlide,
    .RadMenu_Green_Context .rmGroup .rmSlide
    {
        margin: 0 0 0 -5px;
    }

    .RadMenu_Green_rtl .rmSlide
    {
        margin: 0 0 0 0;
    }

    .RadMenu_Green_rtl .rmFirst .rmSlide
    {
        margin-left: 1px;
    }

    .RadMenu_Green_rtl .rmVertical .rmSlide,
    .RadMenu_Green_rtl .rmSlide .rmSlide,
    .RadMenu_Green_Context_rtl .rmGroup .rmSlide
    {
        margin: 0 0 0 5px;
    }

    /* </Submenu offsets> */

    /* <Scrolling arrows> */

    .RadMenu_Green .rmLeftArrow,
    .RadMenu_Green .rmRightArrow
    {
        background-color: #E6E6E6;
    }

    .RadMenu_Green .rmLeftArrow { background-position: -8px -312px; border-right: 1px solid #828282; }
    .RadMenu_Green .rmRightArrow { background-position: -482px -216px; border-left: 1px solid #828282; }

    .RadMenu_Green .rmTopArrow,
    .RadMenu_Green .rmBottomArrow,
    .RadMenu_Green .rmGroup .rmLeftArrow,
    .RadMenu_Green .rmGroup .rmRightArrow
    {
        background-color: #E6E6E6;
    }

    .RadMenu_Green .rmTopArrow { background-position: 50% -367px; border-bottom: 1px solid #828282; }
    .RadMenu_Green .rmBottomArrow { background-position: 50% -391px; border-top: 1px solid #828282; }

    /* </Scrolling arrows> */

    /* <Separators> */

    .RadMenu_Green .rmHorizontal .rmSeparator .rmText,
    .RadMenu_Green .rmVertical .rmHorizontal .rmSeparator .rmText
    {
        height: 22px;
        margin: 1px 0 0;
        width: 1px;
        background-color: #A8A8A8;
    }

    .RadMenu_Green_Context .rmSeparator .rmText,
    .RadMenu_Green .rmHorizontal .rmGroup .rmSeparator .rmText,
    .RadMenu_Green .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText
    {
        background-color: transparent;
        background-position: 0 -406px;
    }

    /* </Separators> */

    /* </RadMenu / Default> */
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 11 Sep 2010 Link to this post

    Hi Venkat,

    The problem seems to be caused by the filter css attribute in the following css selector:
    .RadMenu_Green .rmRootGroup
          {
              background: none;
              border: 1px solid #01649F;
              background-repeat: repeat-x;
              background-position: 0 -408px;
              overflow: visible;
              height: 25px; /* background-color: #CFFCEA; */
              filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#489AD6',EndColorStr='#01649F'); /* For IE 5.5 to IE 7 */
              background: -moz-linear-gradient(top , #489AD6, #01649F); /* Mozilla */
              background: -webkit-gradient(linear, left top, left bottom, from(#489AD6), to(#01649F)); /* Safari and Chrome */
              -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#489AD6, endColorstr=#01649F)"; /* For IE 8 */
          }

    Please, refer to this article on what problems can the filter attribute cause and how to overcome them.


    Greetings,
    Peter
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mathieu cupryk
    mathieu cupryk avatar
    35 posts
    Member since:
    Jul 2012

    Posted 01 Mar 2013 Link to this post

    Hi do you have a solution to this issue?
  5. mathieu cupryk
    mathieu cupryk avatar
    35 posts
    Member since:
    Jul 2012

    Posted 01 Mar 2013 Link to this post

    Hi do you have a solution to this issue?
Back to Top