[Solved] ExpandRight image not showing in IE6

[Brad H]

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
{
    height: 30px;
}

.RadMenu_NavBlue .rmRootGroup .rmItem
{
    height: 100%;
    text-align: center;
    width: 151px;
}

.RadMenu_NavBlue .rmRootGroup .rmFirst
{
    border-left: none;
}

.RadMenu_NavBlue .rmRootGroup .rmLast
{
    border-right: none;
}

.RadMenu_NavBlue .rmRootGroup .rmLink
{
    height: 30px;
    -moz-box-sizing: content-box;
    background: url(Menu/grad_darkblue.PNG) repeat-x;
    font: bold 12px Trade Gothic Condensed;
    text-decoration: none;
    color: White;
    text-align: center;
    text-transform: uppercase;
}

.RadMenu_NavBlue .rmRootGroup .rmLink:hover
{
    background: #00447D;
    cursor: pointer;
}

.RadMenu_NavBlue .rmExpanded
{
    background: #00447D;
}

.RadMenu_NavBlue .rmVertical
{
    background-position: 0 -408px;
}

/* <Root items> */

.RadMenu_NavBlue .rmItem
{
    padding: 0;
}

.RadMenu_NavBlue .rmLink:hover
{
    cursor: pointer;
}

.RadMenu_NavBlue .rmLink,
.RadMenu_NavBlue .rmText
{
    background-repeat: no-repeat;
    background-position: 0 500px;
    float: none;
    text-align: center;
}

.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-repeat: no-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
{
    border: 1px solid white;
    background: #E8E8E8;
    font: normal Arial 10px !important;
}

.RadMenu_NavBlue .rmVertical .rmItem
{
    border-left: none;
    border-bottom: solid 1px white;
    border-right: none;
    height: auto;
    width: 100%;
}

.RadMenu_NavBlue .rmGroup .rmFirst
{
    border-top: none;
}

.RadMenu_NavBlue .rmGroup .rmLast
{
    border-bottom: none;
}

.RadMenu_NavBlue .rmSlide .rmLink
{
    padding: 2px 7px 2px 2px !important;
    color: #013368;
    height: 100%;
    width: 142px;
    font-weight: normal;
    font-family: Arial;
    font-size: 10px;
    text-transform: none;
}

.RadMenu_NavBlue .rmGroup .rmVertical .rmLink .rmText
{

}

.RadMenu_NavBlue .rmGroup .rmLink:hover
{
    background: white;
}

.RadMenu_NavBlue .rmSlide .rmGroup .rmText
{
    text-align: left;
}

.RadMenu_NavBlue .rmSlide .rmScrollWrap
{
    background-image: none;
}

.RadMenu_NavBlue_rtl .rmGroup,
.RadMenu_NavBlue_rtl .rmGroup .rmVertical
{
    background-position: 100% 0;
}

.RadMenu_NavBlue .rmRootGroup .rmHorizontal
{
    background-image: none;
}

.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-repeat: no-repeat;
    background-color: transparent;
}

.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-image: url('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-repeat: no-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 -312px; border-right: 1px solid #828282; }
.RadMenu_NavBlue .rmRightArrow { background-position: -482px -216px; border-left: 1px 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% -367px; border-bottom: 1px solid #828282; }
.RadMenu_NavBlue .rmBottomArrow { background-position: 50% -391px; border-top: 1px solid #828282; }

/* </Scrolling arrows> */

/* <Separators> */

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

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

/* </Separators> */

/* </RadMenu / Black> */

[Kamen Bundev]

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.

[Brad H]

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.

[Kamen Bundev]

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.

[Brad H]

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