RadMenu and IE7

2 posts, 0 answers
  1. Ahmed Ilyas
    Ahmed Ilyas avatar
    51 posts
    Member since:
    Feb 2010

    Posted 24 May 2013 Link to this post

    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.

  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 27 May 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top