ExpandRight image not showing in IE6

5 posts, 0 answers
  1. Brad H
    Brad H avatar
    31 posts
    Member since:
    Aug 2009

    Posted 03 Mar 2010 Link to this post

    I have a menu which has parent, children and grandchildren levels.  If a child has children, then when that child is hovered, a right arrow image should appear on the right side of the child.  This works great in all browsers except IE6.  In IE6, the image doesn't appear at all.  I've enclosed my code below.  Any help would be greatly appreciated.  Thank you.

    Here's the code in question:
    .RadMenu_NavBlue .rmGroup .rmItem:hover .rmExpandRight 
        background:url(menu/bluearrow.gif) no-repeat rightright

    And here's the entire stylesheet:
    /* <RadMenu / Black> */ 
     
    .RadMenu_NavBlue .rmRootGroup 
        height30px
     
    .RadMenu_NavBlue .rmRootGroup .rmItem 
        height: 100%; 
        text-aligncenter
        width151px
     
    .RadMenu_NavBlue .rmRootGroup .rmFirst 
        border-leftnone
     
    .RadMenu_NavBlue .rmRootGroup .rmLast 
        border-rightnone
     
    .RadMenu_NavBlue .rmRootGroup .rmLink 
        height30px
        -moz-box-sizing: content-box; 
        backgroundurl(Menu/grad_darkblue.PNG) repeat-x; 
        fontbold 12px Trade Gothic Condensed; 
        text-decorationnone
        color: White; 
        text-aligncenter
        text-transformuppercase
     
    .RadMenu_NavBlue .rmRootGroup .rmLink:hover 
        background#00447D
        cursorpointer
     
    .RadMenu_NavBlue .rmExpanded 
        background#00447D
     
    .RadMenu_NavBlue .rmVertical 
        background-position: 0 -408px
     
    /* <Root items> */ 
     
    .RadMenu_NavBlue .rmItem 
        padding: 0; 
     
    .RadMenu_NavBlue .rmLink:hover 
        cursorpointer
     
    .RadMenu_NavBlue .rmLink, 
    .RadMenu_NavBlue .rmText 
        background-repeatno-repeat
        background-position: 0 500px
        floatnone
        text-aligncenter
     
    .RadMenu_NavBlue .rmLink:hover, 
    .RadMenu_NavBlue .rmFocused, 
    .RadMenu_NavBlue .rmSelected 
        background-position: 0 -72px
     
    .RadMenu_NavBlue .rmExpanded, 
    .RadMenu_NavBlue .rmExpanded:hover 
        background-position: 0 -72px
     
    .RadMenu_NavBlue .rmExpanded .rmText, 
    .RadMenu_NavBlue .rmExpanded:hover .rmText 
        background-position: 100% -96px
     
    .RadMenu_NavBlue .rmLast .rmExpanded .rmText 
        background-position: 0 500px
        background-repeatno-repeat
     
    .RadMenu_NavBlue .rmDisabled, 
    .RadMenu_NavBlue .rmDisabled:hover 
        color#7d7d7d
        background-position: 0 500px
     
    /* </Root items> */ 
     
     
    /* <Submenu items> */ 
    .RadMenu_NavBlue .rmGroup, 
    .RadMenu_NavBlue .rmGroup .rmVertical 
        border1px solid white
        background#E8E8E8
        fontnormal Arial 10px !important; 
     
    .RadMenu_NavBlue .rmVertical .rmItem 
        border-leftnone
        border-bottomsolid 1px white
        border-rightnone
        heightauto
        width: 100%; 
     
    .RadMenu_NavBlue .rmGroup .rmFirst 
        border-topnone
     
    .RadMenu_NavBlue .rmGroup .rmLast 
        border-bottomnone
     
    .RadMenu_NavBlue .rmSlide .rmLink 
        padding2px 7px 2px 2px !important; 
        color#013368
        height: 100%; 
        width142px
        font-weightnormal
        font-familyArial
        font-size10px
        text-transformnone
     
    .RadMenu_NavBlue .rmGroup .rmVertical .rmLink .rmText 
         
     
    .RadMenu_NavBlue .rmGroup .rmLink:hover 
        backgroundwhite
     
    .RadMenu_NavBlue .rmSlide .rmGroup .rmText 
        text-alignleft
     
    .RadMenu_NavBlue .rmSlide .rmScrollWrap 
        background-imagenone
     
    .RadMenu_NavBlue_rtl .rmGroup, 
    .RadMenu_NavBlue_rtl .rmGroup .rmVertical 
        background-position: 100% 0; 
     
    .RadMenu_NavBlue .rmRootGroup .rmHorizontal 
        background-imagenone
     
    .RadMenu_NavBlue .rmScrollWrap .rmVertical 
        border: 0; 
     
    .RadMenu_NavBlue .rmGroup .rmLink, 
    .RadMenu_NavBlue .rmGroup .rmText, 
    .RadMenu_NavBlue .rmGroup .rmItem .rmDisabled, 
    .RadMenu_NavBlue .rmGroup .rmItem .rmDisabled:hover, 
    .RadMenu_NavBlue .rmGroup .rmItem .rmDisabled .rmText, 
    .RadMenu_NavBlue .rmGroup .rmItem .rmDisabled:hover .rmText 
        background-position: 0 500px
        background-repeatno-repeat
        background-colortransparent
     
    .RadMenu_NavBlue .rmGroup .rmLink:hover, 
    .RadMenu_NavBlue .rmGroup .rmFocused, 
    .RadMenu_NavBlue .rmGroup .rmSelected, 
    .RadMenu_NavBlue .rmGroup .rmExpanded 
        background-position: 0 -168px
     
     
     
    .RadMenu_NavBlue .rmGroup .rmLink:hover .rmText, 
    .RadMenu_NavBlue .rmGroup .rmFocused .rmText, 
    .RadMenu_NavBlue .rmGroup .rmSelected .rmText, 
    .RadMenu_NavBlue .rmGroup .rmExpanded .rmText 
        background-position: 100% -192px
     
    /* <expand arrows> */ 
     
    .RadMenu_NavBlue .rmGroup .rmExpandRight, 
    .RadMenu_NavBlue .rmGroup .rmExpandDown, 
    .RadMenu_NavBlue .rmGroup .rmItem .rmDisabled .rmExpandRight, 
    .RadMenu_NavBlue .rmGroup .rmItem .rmDisabled .rmExpandDown, 
    .RadMenu_NavBlue .rmGroup .rmItem .rmDisabled:hover .rmExpandRight, 
    .RadMenu_NavBlue .rmGroup .rmItem .rmDisabled:hover .rmExpandDown 
        background-position: 100% -216px
     
    .RadMenu_NavBlue .rmGroup .rmItem:hover .rmExpandRight 
        background:url(menu/bluearrow.gif) no-repeat rightright
     
    .RadMenu_NavBlue .rmGroup .rmFocused .rmExpandRight, 
    .RadMenu_NavBlue .rmGroup .rmSelected .rmExpandRight, 
    .RadMenu_NavBlue .rmGroup .rmExpanded .rmExpandRight, 
    .RadMenu_NavBlue .rmGroup .rmLink:hover .rmExpandDown, 
    .RadMenu_NavBlue .rmGroup .rmFocused .rmExpandDown, 
    .RadMenu_NavBlue .rmGroup .rmSelected .rmExpandDown, 
    .RadMenu_NavBlue .rmGroup .rmExpanded .rmExpandDown 
        background-position: 100% -240px
     
    .RadMenu_NavBlue .rmGroup .rmDisabled:hover .rmExpandRight, 
    .RadMenu_NavBlue .rmGroup .rmDisabled:hover .rmExpandDown 
        background-imageurl('Menu/rmSprite.png'); 
        background-position: 100% -216px
     
    /* </expand arrows> */ 
     
    /* <rtl> */ 
     
    .RadMenu_NavBlue_rtl .rmVertical .rmExpanded .rmText, 
    .RadMenu_NavBlue_rtl .rmVertical .rmExpanded:hover .rmText 
        background-position: 0 500px
        background-repeatno-repeat
     
    .RadMenu_NavBlue_rtl .rmGroup .rmLink:hover, 
    .RadMenu_NavBlue_rtl .rmGroup .rmFocused, 
    .RadMenu_NavBlue_rtl .rmGroup .rmSelected, 
    .RadMenu_NavBlue_rtl .rmGroup .rmExpanded 
        background-position: 100% -264px
     
    .RadMenu_NavBlue_rtl .rmGroup .rmLink:hover .rmText, 
    .RadMenu_NavBlue_rtl .rmGroup .rmFocused .rmText, 
    .RadMenu_NavBlue_rtl .rmGroup .rmSelected .rmText, 
    .RadMenu_NavBlue_rtl .rmGroup .rmExpanded .rmText 
        background-position: 0 -288px
     
    .RadMenu_NavBlue_rtl .rmGroup .rmExpandLeft 
        background-position: 0 -312px
     
    .RadMenu_NavBlue_rtl .rmGroup .rmLink:hover .rmExpandLeft, 
    .RadMenu_NavBlue_rtl .rmGroup .rmFocused .rmExpandLeft, 
    .RadMenu_NavBlue_rtl .rmGroup .rmSelected .rmExpandLeft, 
    .RadMenu_NavBlue_rtl .rmGroup .rmExpanded .rmExpandLeft 
        background-position: 0 -336px
     
    /* </rtl> */ 
     
    /* </Submenu items> */ 
     
    /* <Submenu offsets (Black - specific, overlapping submenus)> */ 
     
    .RadMenu_NavBlue .rmSlide 
        margin: 0 0 0 -1px
     
    .RadMenu_NavBlue .rmVertical .rmSlide, 
    .RadMenu_NavBlue .rmSlide .rmSlide, 
    .RadMenu_NavBlue_Context .rmGroup .rmSlide 
        margin: 0 0 0 -5px
     
    .RadMenu_NavBlue_rtl .rmSlide 
        margin: 0 0 0 0; 
     
    .RadMenu_NavBlue_rtl .rmVertical .rmSlide, 
    .RadMenu_NavBlue_rtl .rmSlide .rmSlide, 
    .RadMenu_NavBlue_Context_rtl .rmGroup .rmSlide 
        margin: 0 0 0 5px
     
    /* </Submenu offsets> */ 
     
    /* <Scrolling arrows> */ 
     
    .RadMenu_NavBlue .rmLeftArrow, 
    .RadMenu_NavBlue .rmRightArrow 
        background-color#4f4f4f
     
    .RadMenu_NavBlue .rmLeftArrow { background-position: -8px -312pxborder-right1px solid #828282; } 
    .RadMenu_NavBlue .rmRightArrow { background-position: -482px -216pxborder-left1px solid #828282; } 
     
    .RadMenu_NavBlue .rmTopArrow, 
    .RadMenu_NavBlue .rmBottomArrow, 
    .RadMenu_NavBlue .rmGroup .rmLeftArrow, 
    .RadMenu_NavBlue .rmGroup .rmRightArrow 
        background-color#4f4f4f
     
    .RadMenu_NavBlue .rmTopArrow { background-position: 50% -367pxborder-bottom1px solid #828282; } 
    .RadMenu_NavBlue .rmBottomArrow { background-position: 50% -391pxborder-top1px solid #828282; } 
     
    /* </Scrolling arrows> */ 
     
    /* <Separators> */ 
     
    .RadMenu_NavBlue .rmHorizontal .rmSeparator .rmText, 
    .RadMenu_NavBlue .rmVertical .rmHorizontal .rmSeparator .rmText 
        height22px
        margin1px 0 0; 
        width1px
        background-color#000
     
    .RadMenu_NavBlue_Context .rmSeparator .rmText, 
    .RadMenu_NavBlue .rmHorizontal .rmGroup .rmSeparator .rmText, 
    .RadMenu_NavBlue .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText 
        background-colortransparent
        background-position: 0 -406px
     
    /* </Separators> */ 
     
    /* </RadMenu / Black> */ 

  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 09 Mar 2010 Link to this post

    Hello Brad Hickey,

    Can you also attach or send the images for your skin, I need to test how your sprite background positions are placed before I can answer your question. Thank you in advance.

    Sincerely yours,
    Kamen Bundev
    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. Brad H
    Brad H avatar
    31 posts
    Member since:
    Aug 2009

    Posted 09 Mar 2010 Link to this post

    The rmSprite.png isn't even in the folder.  That line can be commented out.  Also, the grad_darkblue.png is being covered up in code-behind with static menu items. So it can also be commented out.  The only image that is being used is the bluearrow.gif which I've enclosed.

    I know IE6 has problems with pngs so I commented both of the previously mentioned lines out and I'm still not seeing the arrow gif like I do in other browsers.  Thanks for your help in this matter.
  4. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 09 Mar 2010 Link to this post

    Hello Brad,

    You've set the background image on .rmItem:hover. Unfortunately .rmItem is a LI element and not an anchor and IE6 is only supporting hovers on anchor elements. Change this row:
    .RadMenu_NavBlue .rmGroup .rmItem:hover .rmExpandRight
    like this:
    .RadMenu_NavBlue .rmGroup .rmLink:hover .rmExpandRight
    and the issue will go away.

    Regards,
    Kamen Bundev
    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.
  5. Brad H
    Brad H avatar
    31 posts
    Member since:
    Aug 2009

    Posted 09 Mar 2010 Link to this post

    Thank you for that quick and elegant fix!  Exactly what I needed.  =)
Back to Top