This is a migrated thread and some comments may be shown as answers.

Weird RadMenu behaviour in IE6

1 Answer 78 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Jeremy
Top achievements
Rank 1
Jeremy asked on 26 Aug 2008, 06:25 AM
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;
}   
   

1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 26 Aug 2008, 02:18 PM
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.
Tags
Menu
Asked by
Jeremy
Top achievements
Rank 1
Answers by
Yana
Telerik team
Share this question
or