Weird RadMenu behaviour in IE6

2 posts, 0 answers
  1. Jeremy
    Jeremy avatar
    5 posts
    Member since:
    Jul 2008

    Posted 26 Aug 2008 Link to this post

    Hi,

    I have a RadMenu control which I have customised the styling of, by extending the "Outlook" skin

    It works fine in IE7, Firefox, Opera and Safari, but is showing some very weird behaviour in IE6.  When you hover over any top level (horizontal) menu item, that item expands to fill the full width of the page, pushing all items to the right of it down to the next line.
    The bottom border on the horizontal separators is also not lining up with the bottom borders on the main horizontal items.

    When I remove my customisations it works fine in IE6. 

    I have included my customised styles below, any help you could offer would be appreciated.

    The menu is declared on the page as follows
    <telerik:RadMenu ID="mainMenu"
                runat="server"
                Skin="Outlook"
                OnItemClick="menuItem_ItemClick">
                <ExpandAnimation Type="Linear" Duration="100" />
                <CollapseAnimation Type="Linear" Duration="100" />
             </telerik:RadMenu>


    .RadMenu a.rmLink
    {
        cursor:pointer;
    }

    .RadMenu_Outlook .rmHorizontal .rmItem
    {
        border-right: 1px solid #7AA5D6;
        border-left: 1px solid #7AA5D6;
        border-top: 1px solid #7AA5D6;
        border-bottom: 1px solid #7AA5D6;
        height: 24px;
    }

    .RadMenu_Outlook .rmVertical .rmItem
    {
        border-right: none;
        border-left: none;
        border-top: none;
        border-bottom: none;
    }   
       
    .RadMenu_Outlook
    {
        background: #E5ECF9 none repeat scroll 0 0;
        height: 24px;
    }

    .RadMenu .rmLink:hover
    {
        text-decoration: none;
    }

    .RadMenu_Outlook .rmHorizontal .rmExpanded,
    .RadMenu_Outlook .rmHorizontal .rmExpanded:hover
    {
        background:#FFFFFF;
        border: 1px solid white;
        height:24px;
    }

    .RadMenu_Outlook .rmRootGroup .rmFocused,
    .RadMenu_Outlook .rmRootGroup .rmLink:hover
    {
        background:#FFFFFF none left top repeat-x;
        height: 24px;
        border: 1px solid white;
    }

    .RadMenu_Outlook .rmRootGroup .rmVertical .rmFocused,
    .RadMenu_Outlook .rmRootGroup .rmVertical .rmLink:hover
    {
        background:#FFFFFF none left top repeat-x;
        border: 1px solid #7AA5D6;
    }

    .RadMenu_Outlook .rmGroup
    {
        border: 1px solid #7AA5D6;
        border-top: none;
        padding-top: 0;
        margin-top:0;
    }


    .RadMenu_Outlook .rmHorizontal .rmSeparator .rmText
    {
        background:#FFFFFF none left top repeat-x; 
        width: 5px;
        height: 24px;
        padding: 0px;
        border: none;
    }

    .RadMenu_Outlook .rmHorizontal .rmSeparator
    {
        height: 25px;
        border: none;
        border-bottom: 1px solid #7AA5D6;
    }

    .RadMenu_Outlook .rmText
    {
        padding: 0 0 0 0;
        /*line-height: 18px;*/
        font-size: 85%;
    }
       

    .RadMenu_Outlook .rmHorizontal .rmItem .MenuHeaderSelected
    {
        background-color: #FFFFFF;
        border-bottom: 1px solid white;
    }   
       

  2. Yana
    Admin
    Yana avatar
    4985 posts

    Posted 26 Aug 2008 Link to this post

    Hi Jeremy,

    Please remove "height: 24px" property from the following css classes:

     .RadMenu_Outlook .rmHorizontal .rmExpanded  
     .RadMenu_Outlook .rmHorizontal .rmExpanded:hover  
     
    .RadMenu_Outlook .rmRootGroup .rmFocused  
    .RadMenu_Outlook .rmRootGroup .rmLink:hover 

    and RadMenu will work as expected.

    Greetings,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top