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

Weird RadMenu behaviour in IE6

1 Answer 90 Views

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

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;
}

Weird RadMenu behaviour in IE6

1 Answer, 1 is accepted