RadMenu and IE7

[Ahmed Ilyas]

Hi there.
After some good support here to customize the RadMenu bar in terms of appearance, I face a problem in IE7 where the menu items do not appear to slide out/show them but in IE8 and 9 they work perfectly. Any ideas? Here is the relevant code:

Hi there.
I am using RADMenus to dynamically populate menu items. This works fine and I can see it slide out in IE8 and IE9 no problem.
In IE7, this does not seem to show. I can kind of see it sliding out but seems like the menu items are hidden somewhere.

Any ideas how I can fix this? Here is the relevant code:

// this is in a user control:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<div style="float: right;margin-left:89%; margin-top: 22px; position: absolute; z-index: 10001; color:White; font-family: Segoe UI, Arial, Sans-Serif; font-size:12px;font-weight:bold">
<asp:Literal runat="server" ID="litUserLoggedInDetails" />
</div><br />
<telerik:RadMenu runat="server" ID="RadMenuItems" Height="40px" Width="100%" ForeColor="White">
<DefaultGroupSettings OffsetY="-1" />
</telerik:RadMenu>


// This user control is placed on site.master:
<form runat="server">
<uc:ScriptManagerControl runat="server" ID="ucScriptManagerControl" />
<div id="wrapper">
<uc:NavigationMenuItemsBinderControl runat="server" ID="ucNavMenuBinder" />

// etc....


// CSS:

.RadMenu_Default .rmRootGroup,
.RadMenu_Default a.rmLink,
.RadMenu_Default .rmGroup .rmText,
.RadMenu_Default .rmVertical .rmText,
.RadMenu_Default .rmLeftArrow,
.RadMenu_Default .rmRightArrow,
.RadMenu_Default .rmTopArrow,
.RadMenu_Default .rmBottomArrow
{
background-image: url('../Images/rmSprite.png');
background-color: transparent;
}


.RadMenu_Default .rmRootGroup

{

background: #0072C6 !important; /* Old browsers */

background: linear-gradient(to bottom, #0072C6 0%,#8eb92a 50%,#72aa00 51%,#003A66 100%) !important; /* W3C */

background-image: -ms-linear-gradient(bottom, #003A66 0%, #0072C6 100%) !important; /* IE 10 */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0072C6', endColorstr='#003A66',GradientType=0 ) !important; /* IE6-9 */

color: White !important;

}


.RadMenu_Default .rmGroup, .RadMenu_Default .rmMultiColumn, .RadMenu_Default .rmGroup .rmVertical

{

background: #0072C6 !important;

color: White !important;

}

.RadMenu_Default .rmHorizontal .rmRootLink span.rmText:hover

{

background: #0072C6 !important;

color: White !important;

}



.RadMenu_Default a.rmExpanded, .RadMenu_Default a.rmExpanded:hover

{

background: #0072C6 !important;

color: White !important;

}



.RadMenu_Default .rmItem .rmFirst .rmLink .rmText:hover, .RadMenu_Default .rmItem .rmLast .rmLink .rmText:hover

{

background: #0072C6 !important;

color: White !important;

background-image: none !important;

}

.rmText
{
color : White;
}

#navigation ul {
display: none;
}
#navigation li:hover > ul {
display: block;
}

#navigation {
width: 100%;
background-color: rgb(59, 128, 212);
font-family: arial,sans-serif;
font-size: small;
float: left;
}
#navigation li {
list-style: none;
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
}
#navigation li a {
color: white;
text-decoration: none;
display: block;
}

#menuItem .menuItem a, #menuItem .menuItem a:hover
{
background-color: #FFF;
color: #000;
cursor: default;
}
#navigation li ul {
position: absolute;
display: none;
}

#navigation li ul li {
float: none;
display: inline;
}
#navigation li ul li a {
width: 100%;
position: relative;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: rgb(59, 128, 212);
color: #fff;
}
#navigation li ul li a:hover {
background: #cccccc;
color: #000;
}



Many thanks for your assistance.

[Kate]

Hello Ahmed,

I notice that you also send us a support ticket. I will paste the answer that I just posted there so that anyone else that is interested in solution can refer to it:

I tested the code that you provided and it seems that one of the styles that you are using in order to customize the appearance of the RadMenu control is causing the problematic behavior. Below you can find the code that I put in comments to get the correct behavior of the RadMenu:

.RadMenu_Default .rmRootGroup {
       background: #0072C6 !important;
       background: linear-gradient(to bottom, #0072C6 0%,#8eb92a 50%,#72aa00 51%,#003A66 100%) !important;
       background-image: -ms-linear-gradient(bottom, #003A66 0%, #0072C6 100%) !important;
       /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0072C6', endColorstr='#003A66',GradientType=0 ) !important; */
        color: White !important;
    }

Regards,

Kate
Telerik