I am working on webapplication where I need to fixed header and footer and make inner content scrollable on IE6,IE7 and firefox.
My inner content is scrollable in IE7 and firefox..but Navigation child menu item disappreas on the surface of scrollable content.
Please help me to understand the problem.
For better understanding ,Below is my code of Master page and different CSS file for menuitem, header and foooter
Master Page:
<body onunload="closeit()" class="FormBackgroundColor">
<form id="form1" runat="server">
<link href="CSS/Crosswalk.css" rel="stylesheet" type="text/css" />
<div id="header-wrap">
<div id="header-container">
<div id="header">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="height: 12%">
<td width="100%" style="background-image: url(Images/header_1.jpg); height: 142px;
background-repeat: no-repeat; background-color:#1A1A1A;" align="center" valign="top">
<table cellpadding="0" cellspacing="0" style="height: 9%; width: 100%;" border="0">
<tr style="background-color: #DA490A;height:10px">
<td align="left" width="50%">
<table width="100%" border="0" >
<tr >
<td align="right" valign="middle">
<asp:Label ID="Lable1" runat="server" ForeColor="white"></asp:Label>
</td>
<td valign="middle">
<asp:Label ID="Label2" runat="server" ForeColor="white" Text="|" ></asp:Label>
</td>
<td align="center" valign="middle">
<asp:Label ID="Label3" runat="server" ForeColor="white" Text="|"></asp:Label>
</td>
<td valign="middle">
<asp:Label ID="Label4" runat="server" ForeColor="white" Text="|"></asp:Label>
</td>
<td align="left" valign="middle">
<asp:Label ID="Label5" runat="server" ForeColor="white"></asp:Label>
</td>
</tr>
</table>
</td>
<td align="right" width="50%">
<table style="background-color: #DA490A;" width="100%" border="0" class="LabelStyleHome">
<tr style="background-color: #DA490A;">
<td align="right" width="40%" valign="middle" style="padding-right:3px">
<asp:LinkButton ID="lblChangePassword" runat="server" Text="Change Password" ForeColor="white"
CssClass="LinkButton2" OnClick="lblChangePassword_Click"></asp:LinkButton>
</td>
<td width="5%" valign="middle">
<asp:Label ID="Label4" runat="server" ForeColor="White" Text="|" CssClass="LabelStyle"></asp:Label>
</td>
<td width="30%" align="center" valign="middle">
<a href="UserGuide/UserGuide.doc" class="LinkButton2" style="color: White;
text-decoration: underline;">Download User guide</a>
</td>
<td width="5%" valign="middle">
<asp:Label ID="Label2" runat="server" ForeColor="White" Text="|" CssClass="LabelStyle"></asp:Label>
</td>
<td align="left" width="20%" valign="middle" >
<asp:LinkButton ID="signoutLink" runat="server" PostBackUrl="~/frmLogout.aspx" Text="Sign Out"
ForeColor="white" CssClass="LinkButton2" OnClick="signoutLink_Click"></asp:LinkButton>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr style="height: 20px; background-color: #201F1F">
<td align="left" valign="middle" style="width: 100%">
<div id="mainmenu">
<asp:Menu ID="menu1" runat="server" Orientation="Horizontal" Font-Names="Verdana"
Font-Size="12px" ForeColor="White" Style="background-color: #3c3c3c;
margin-right: 0px;margin-top: 1.5px;" Width="100%" OnMenuItemDataBound="menu1_MenuItemDataBound"
DynamicEnableDefaultPopOutImage="False">
<StaticHoverStyle CssClass="staticHoverStyle" />
<StaticMenuItemStyle CssClass="staticMenuItemStyle" />
<StaticSelectedStyle CssClass="staticMenuItemSelectedStyle" />
<DynamicHoverStyle CssClass="menuItemMouseOver" />
<DynamicMenuItemStyle CssClass="dynamicMenuItemStyle" />
<DynamicMenuStyle CssClass="menuItem" />
<DynamicSelectedStyle CssClass="menuItemSelected" />
<DataBindings>
<asp:MenuItemBinding DataMember="siteMapNode" NavigateUrlField="url" TextField="title" />
</DataBindings>
</asp:Menu>
</div>
</td>
<td>
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="ie6-container-wrap">
<div id="container">
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
<div id="footer-wrap">
<div id="footer-container">
<div id="footer">
<asp:Label ID="lbl1" runat="server" Text=" @ Copyright ABC,Inc."></asp:Label>
</table>
</div>
</div>
</div>
</form>
</body>
MenuItem.CSS
body
{
}
.staticMenuItemStyle
{
background-image: url(..//Images/Black.png); /* background-repeat: repeat;*/
font-family: Tahoma;
font-size: 11px;
color: #201F1F ;
cursor: pointer; /*width: 140px;*/
height: 20px;
text-align: left;
font-weight: bold;
vertical-align: top;
z-index: 1000;
padding-left: 6px;
padding-right: 6px;
}
.staticMenuItemSelectedStyle
{
border: solid 1px #000;
}
.staticHoverStyle
{
background-image: url(..//Images/Orange.png);
}
.menuItem
{
z-index: 999;
}
.dynamicMenuItemStyle
{
background-image: url(..//Images/Black.png); /* background-repeat: repeat;*/
font-family: Tahoma;
font-size: 11px;
color: #FFFFFF;
cursor: pointer; /*width: 140px;*/
height: 25px;
text-align: left;
font-weight: bold;
vertical-align: middle;
z-index: 1000;
padding-left: 6px;
padding-right: 6px;
}
.background
{
border: solid 1px #000;
background-image: url(..//Images/Black.png);
}
.NavigationMenu
{
font-family: Verdana;
font-size: 10pt;
color: #FFF;
font-weight: 600;
z-index: 101;
background-image: url(..//Images/red.png);
vertical-align: middle;
}
#h
{
background: #CCCFFF;
padding: 5px 0 6px 10px;
}
#e
{
border: solid 1px #919191;
background-image: url(../Images/sub.gif);
padding: 0 0 1px;
}
.menuItemMouseOver, .menuItemSelected
{
border: solid 1px Navy;
background-image: url(..//resource/Orange.png);
}
.NavigationMenu A:link, .NavigationMenu A:visited, .NavigationMenu A:active
{
text-decoration: none;
color: #FFF;
display: block;
z-index:99999;
}
.currentNodeStyle, .nodeStyle, .rootNodeStyle, a.siteMapPath
{
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
}
HeaderFooter.CSS
body {
margin: 0;
padding: 0;
}
h1, h2 {
color: #87ac6d;
font-family: Tahoma, Arial, Geneva, sans-serif;
margin: 20px 0 10px;
}
h1 {
font-size: 2.5em;
}
p {
margin: 10px 0;
padding: 0;
}
blockquote {
font-style: italic;
}
#header-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#header-container {
height: 90px;
background: url(../Images/header-bg.png) repeat-x left bottom;
}
#header {
width: 100%;
margin: 0 auto;
position: relative;
}
#header h1 {
color: #beffbf;
text-align: right;
width: 290px;
margin: 0;
position: absolute;
left: 0;
top: 20px;
}
#header h1 em{
color: #90b874;
font-size: small;
display: block;
}
#header ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 35px;
right: 0;
}
#header ul li {
float: left;
margin-right: 5px;
}
#header ul li a{
color: #90b874;
font-weight: bold;
font-size: 1.4em;
margin-right: 5px;
text-decoration: none;
}
#header ul li a:hover {
color: #beffbf;
}
#container {
width: 100%;
margin: 0 auto;
font-size: 1.4em;
overflow: auto;
padding: 0px 0 0px;
z-index: 500;
}
#content {
/*float: left;*/
width: 100%;
}
#sidebar {
float: right;
width: 275px;
margin-top: 10px;
}
#footer-wrap {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
#footer-container {
height: 20px;
background: url(../Images/footer-bg.png) repeat-x left bottom;
}
#footer {
width:100%;
margin: 0 auto;
position: relative;
}