RAD Scheduler always appearing on top of my javascript hover menu

[Angelo]

Hi! 

I have an existing website with a typical javascript hover menu navigation at the upper portion of the screen in the form of a 
<div> with  some nested lists <ul>...

The css for this begins with 

#menu {
    float: left;
    margin-left:20px;
    z-index:8000;
   
}
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 11em; 
    float: left;
   z-index:8000;
   
}

However, then i placed the RAD Scheduler, it's always persisting on top of the hover navigation even though i enclosed it with

<div   style="z-index:0; ">
         <telerik:RadScheduler
            ID="RAD_Scheduler1"
            runat="server" ....

So far the attempted css z-index:8000 is not working to bring the hover menu to the top. 

May i request some code assistance for this? Appreciate any help :-) I'm just a newbie to the telerik components for asp.net :)

Attached is a screenshot.

Regards,
Angelo

[MasterChiefMasterChef]

Hi Angelo,

Try setting the RadScheduler's z-index to -1. Since most elements in the DOM are initialized with a z-index of 0, it will ensure that the RadScheduler shows up behind elements that you have not explicitly defined the z-index for.

Good luck,
Master Chief

[Boyan Dimitrov]

Hello,

In case of stacking issues we recommend providing a simplified page or live URL, so we can inspect and find out what is causing this unusual behavior.
I am afraid that it might exist lots of reasons for such behavior. HTML stacking order or the container z-index  value also might cause such issue as the one provided in the attached image.

Could you please provide simplified page or live URL that reproduces the issue?

Regards,
Boyan Dimitrov
the Telerik team

[Vince]

I am having the exact same issue, but only with IE.  It doesn't do this in Chrome or Firefox.  My menu is in a masterpage.

==================================================

    <telerik:RadScheduler ID="RadScheduler1" runat="server" Style="z-index: 1000" SelectedView="MonthView" TimeZoneID="Central Standard Time" TimeZoneOffset="-06:00:00" 
        DataDescriptionField="Description" DataEndField="EndTime" DataKeyField="INTID" DataSourceID="SqlDSAllApplicants" DataStartField="StartTime" 
        DataSubjectField="Subject" StartInsertingInAdvancedForm="True" Skin="Telerik" OverflowBehavior="Expand" >
        <AdvancedForm Modal="True" />
    </telerik:RadScheduler>

==================================================

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
    font-size: .80em;
}
div.menu
{
    padding: 4px 0px 4px 8px;
    z-index: 8000;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
    z-index: 8000;
}
==================================================

            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" >
                    <Items>                        
                        <asp:MenuItem NavigateUrl="~/default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/AppConsole.aspx" Text="Pre-Interview Console" Value="Applicant Console" />
                        <asp:MenuItem NavigateUrl="~/PostInterviewConsole.aspx" Text="Post Interview Console" Value="Post Interview Console" />
                        <asp:MenuItem Text="Charts/Graphs" Value="Charts" Selectable="False" >
                            <asp:MenuItem NavigateUrl="AppChart_RateByUser.aspx" Text="Rating by Users" Value="Rating by User"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="AppChart_UserRatings.aspx" Text="User Ratings" Value="User Ratings"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="AppChart_AvgRating.aspx" Text="Average Rating by User" Value="Average Rating by User"></asp:MenuItem>                            
                        </asp:MenuItem>
                        <asp:MenuItem NavigateUrl="InterviewsCalendar.aspx" Text="Calendar" Value="Calendar" />
                        <asp:MenuItem NavigateUrl="~/ArchiveConsole.aspx" Text="Archives" Value="Archive Console" />                        
                    </Items>
                </asp:Menu>
            </div>

[Vince]

Seems that my IE10 was running in Compatibility View while on the intranet site.  I unchecked the option as shown in the attachment.  All is good now.  Hope this can help someone else.

[Chema]

try this, 

  div.RadScheduler .rsHeader
        {
            z-index: 0;
        }