in my webpage , I do not set z-index to all elements.
but in IE6, RadMenu's Drop List is shown behind DIV.
In IE8, I use RadWindow as Modal Dialog, but the Window can't override this Menu.
my page ：（sorry，it's so long）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
html, body
{
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
font: 13px Georgia, Arial, Simsun;
}
html
{
_padding: 92px 0;
}
#divPageHead
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background: #EFF3FB;
}
#divPageMenu
{
position: absolute;
top: 70px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
#divPageFoot
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background: #EFF3FB;
}
#divPageBody2
{
position: absolute;
top: 140px;
right: 0;
bottom: 40px;
left: 0;
overflow: hidden;
width: 100%;
_height: 100%;
}
#divPageLeft2
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
overflow: auto;
width: 240px;
_height: 100%;
background: #EFF3FB;
}
#divPageRight2
{
position: absolute;
_position: static;
top: 0;
right: 0;
bottom: 0;
left: 250px;
overflow: auto;
_overflow: hidden;
_height: 100%;
_margin-left: 250px;
background: #EFF3FB;
}
#divRightContent2
{
_overflow: auto;
_width: 100%;
_height: 100%;
}
#divPageBar2
{
position: absolute;
top: 110px;
left: 0;
right: 0;
height: 30px;
width: 100%;
overflow: hidden;
z-index: 10;
}
#divPageLeftHd2
{
position: absolute;
top: 0;
left: 0;
width: 240px;
height: 30px;
background: #F00;
}
#divPageRightHd2
{
position: absolute;
_position: static;
top: 0;
left: 250px;
right: 0;
height: 30px;
_margin-left: 250px;
background: #FF0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="divPageHead">
<div style="height: 70px">
some text
</div>
<div id="divPageMenu">
<telerik:RadMenu ID="mainMenu" runat="server" CausesValidation="False" EnableViewState="False"
PersistLoadOnDemandItems="False">
</telerik:RadMenu>
</div>
</div>
<div id="divPageBar2">
<div id="divPageLeftHd2">
</div>
<div id="divPageRightHd2">
</div>
</div>
<div id="divPageBody2">
<div id="divPageLeft2">
</div>
<div id="divPageRight2">
<div id="divRightContent2">
</div>
</div>
</div>
<div id="divPageFoot">
Copyright ©（2010)
</div>
</form>
</body>
</html>
but in IE6, RadMenu's Drop List is shown behind DIV.
In IE8, I use RadWindow as Modal Dialog, but the Window can't override this Menu.
my page ：（sorry，it's so long）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
html, body
{
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
font: 13px Georgia, Arial, Simsun;
}
html
{
_padding: 92px 0;
}
#divPageHead
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background: #EFF3FB;
}
#divPageMenu
{
position: absolute;
top: 70px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
#divPageFoot
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background: #EFF3FB;
}
#divPageBody2
{
position: absolute;
top: 140px;
right: 0;
bottom: 40px;
left: 0;
overflow: hidden;
width: 100%;
_height: 100%;
}
#divPageLeft2
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
overflow: auto;
width: 240px;
_height: 100%;
background: #EFF3FB;
}
#divPageRight2
{
position: absolute;
_position: static;
top: 0;
right: 0;
bottom: 0;
left: 250px;
overflow: auto;
_overflow: hidden;
_height: 100%;
_margin-left: 250px;
background: #EFF3FB;
}
#divRightContent2
{
_overflow: auto;
_width: 100%;
_height: 100%;
}
#divPageBar2
{
position: absolute;
top: 110px;
left: 0;
right: 0;
height: 30px;
width: 100%;
overflow: hidden;
z-index: 10;
}
#divPageLeftHd2
{
position: absolute;
top: 0;
left: 0;
width: 240px;
height: 30px;
background: #F00;
}
#divPageRightHd2
{
position: absolute;
_position: static;
top: 0;
left: 250px;
right: 0;
height: 30px;
_margin-left: 250px;
background: #FF0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="divPageHead">
<div style="height: 70px">
some text
</div>
<div id="divPageMenu">
<telerik:RadMenu ID="mainMenu" runat="server" CausesValidation="False" EnableViewState="False"
PersistLoadOnDemandItems="False">
</telerik:RadMenu>
</div>
</div>
<div id="divPageBar2">
<div id="divPageLeftHd2">
</div>
<div id="divPageRightHd2">
</div>
</div>
<div id="divPageBody2">
<div id="divPageLeft2">
</div>
<div id="divPageRight2">
<div id="divRightContent2">
</div>
</div>
</div>
<div id="divPageFoot">
Copyright ©（2010)
</div>
</form>
</body>
</html>
1 Answer, 1 is accepted
0
Accepted
Hello Nick Wu,
You need to set the z-index of RadMenu or its container to some large enough value. In addition to this, set position:relative for the element which wraps the menu. I suggest you review the following articles to get a better understanding of how the z-index property works:
http://blogs.telerik.com/atanaskorchev/posts/09-07-02/z-index_demystified.aspx
http://www.telerik.com/help/aspnet-ajax/controlling-absolute-positioning-with-zindex.html
Best wishes,
Peter
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
You need to set the z-index of RadMenu or its container to some large enough value. In addition to this, set position:relative for the element which wraps the menu. I suggest you review the following articles to get a better understanding of how the z-index property works:
http://blogs.telerik.com/atanaskorchev/posts/09-07-02/z-index_demystified.aspx
http://www.telerik.com/help/aspnet-ajax/controlling-absolute-positioning-with-zindex.html
Best wishes,
Peter
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.