I have an ASP .Net web page with a mega menu. When I hover over a menu item, and the content drops down, the contents of the page moves up, slightly, like maybe 2 or 3 pixels. when you move away from the menu, the page moves back down to its original position.
Here is the markup for the master page and the menu:
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div id="container">
<div id="header" class="header">
<div class="headerlogin">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
<div class="white">
[
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LoginText="Log In" />
]
</div>
</AnonymousTemplate>
<LoggedInTemplate>
<div class="white">
Welcome <span class="bold">
<asp:LoginName ID="HeadLoginName" runat="server" />
</span>!|
<asp:LinkButton ID="EditAccount" runat="server" OnClick="EditAccount_Click">My Account</asp:LinkButton>
| [
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" />
]
</div>
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="headercontent">
<asp:ImageButton AccessKey="H" ID="imageBranding" runat="server" AlternateText="Philadelphia City Branding Image"
ImageUrl="~/imgs/cityLogo.png" Style="margin-top: 8px;" OnClientClick="confirmation" />
<asp:ImageButton ID="imageLogo" runat="server" AlternateText="Logo" ImageUrl="~/imgs/LogoType.png" OnClientClick="confirmation" />
</div>
</div>
<div id="body" class="page">
<asp:Repeater ID="MainMenu" runat="server">
<HeaderTemplate>
<ul id="menu">
</HeaderTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
<ItemTemplate>
<%# Container.DataItem%>
</ItemTemplate>
</asp:Repeater>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" class="footer">
<div class="footerContent">
<div class="FooterMenu">
<asp:Label ID="AdditionalInfoLabel" runat="server" Text="Additional Information"></asp:Label><br />
<asp:LinkButton ID="LinkContacts" runat="server" Text="State and Local Agency Contacts" OnClientClick="aspnetForm.target ='_blank';"></asp:LinkButton><br />
<asp:LinkButton ID="LinkNotificationInstructions" runat="server" Text="Notification Instructions"></asp:LinkButton>
</div>
<div class="contact" >
<fieldset>
<legend>Contact</legend>
<p>
<asp:Label ID="Label2" runat="server" Text="Name:"></asp:Label><br />
<asp:TextBox ID="ContactName" runat="server" style="width:300px;"></asp:TextBox>
</p>
<p>
<asp:Label ID="Label4" runat="server" Text="E-mail:"></asp:Label><br />
<asp:TextBox ID="ContactEmail" runat="server" style="width:300px;"></asp:TextBox>
</p>
<p>
<asp:Label ID="Label3" runat="server" Text="Subject:"></asp:Label><br />
<asp:TextBox ID="ContactSubject" runat="server" style="width:300px;"></asp:TextBox>
</p>
<p>
<asp:Label ID="Label5" runat="server" Text="Message:"></asp:Label><br />
<asp:TextBox ID="ContactMessage" runat="server" TextMode="MultiLine" Rows="10" Columns="35" style="resize:none;"></asp:TextBox>
</p>
<p>
<asp:Button ID="SubmitEmail" runat="server" Text="Submit" CssClass="jQueryButtons" Style="background-color:#133766;"/>
</p>
</fieldset>
</div>
</div>
<div class="footerlogin">
<div class="white">
<asp:Label ID="Label1" runat="server" Text="">© 2013 Public Health Management Corporation</asp:Label>
</div>
</div>
</div>
</div>
</form>
And a typical content page:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="content">
<div class="loginDiv">
<PHMC:LogIn ID="LogIn1" runat="server" />
</div>
</div>
And some CSS
content:
.content
{
background: #edede4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .813em;
overflow: auto;
line-height: 1.125em;
margin: 0 auto;
min-height: 48em;
width: 100%;
}
The mega menu
#MainMenu
{
height: 100%;
}
#menu
{
background: #133766;
list-style: none;
height: 1.875em;
margin-top: .1em;
min-height: 1.875em;
width: 100%;
}
#menu li
{
border: 0;
float: left;
min-height: 1.4em;
padding: .25em .625em .25em .625em;
position: relative;
text-align: center;
}
#menu li:hover
{
background-color: #2872D2;
height: 1.35em;
}
#menu li a
{
color: #FFFFFF;
display: block;
font-size: .875em;
outline: .063em;
text-decoration: none;
}
.drop
{
background-image: url("../imgs/drop.png");
z-index: 999;
}
#menu li:hover a
{
color: #FFFFFF;
}
#menu li .drop
{
background: url("../imgs/drop.png") no-repeat right 0;
padding-right: 21px;
}
#menu li:hover .drop
{
background: url("../imgs/drop.png") no-repeat right 0;
}
/* Drop Down */
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, Fcon .dropdown_5columns
{
background-color: #FFFFFF;
float: left;
left: -999em;
margin: .15em auto;
padding: .625em .313em .625em .313em;
position: absolute;
text-align: left;
}
.dropdown_1column
{
width: 8.75em;
}
.dropdown_2columns
{
width: 17.5em;
}
.dropdown_3columns
{
width: 26.25em;
}
.dropdown_4columns
{
width: 35em;
}
.dropdown_5columns
{
width: 43.75em;
}
#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns
{
left: 0px;
top: auto;
}
/* Columns */
.col_1, .col_2, .col_3, .col_4, .col_5
{
display: inline;
float: left;
margin-left: .313em;
margin-right: .313em;
position: relative;
}
.col_1
{
width: 8.125em;
}
.col_2
{
width: 16.875em;
}
.col_3
{
width: 25.625em;
}
.col_4
{
width: 34.375em;
}
.col_5
{
width: 43.125em;
}
/* Right alignment */
#menu .menu_right
{
float: right;
margin-right: 0px;
}
#menu li .align_right
{
}
#menu li:hover .align_right
{
left: auto;
right: 0px;
top: auto;
}
/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu ul li
{
font-size: .75em;
line-height: 1.8em;
text-align: left;
}
#menu h2
{
border-bottom: .063em solid #666666;
font-size: 1.313em;
font-weight: 400;
letter-spacing: -.063em;
margin: .438em 0 .875em 0;
padding-bottom: .875em;
}
#menu h3
{
border-bottom: .063em solid #888888;
font-size: .875em;
margin: .438em 0 .875em 0;
padding-bottom: .438em;
}
#menu p
{
line-height: 1.8em;
margin: 0 0 .625em 0;
}
#menu li:hover div a
{
color: #015b86;
font-size: .75em;
}
#menu li:hover div a:hover
{
color: #029feb;
}
.strong
{
font-weight: bold;
}
.italic
{
font-style: italic;
}
.imgshadow
{
background: #FFFFFF;
border: .063em solid #777777;
padding: .25em;
margin-top: .313em;
}
.img_left
{
/* Image sticks to the left */
float: left;
margin: .313em .938em .313em .313em;
width: auto;
}
#menu li .black_box
{
background-color: #333333;
color: #eeeeee;
padding: .25em .375em .25em .375em;
}
#menu li ul
{
list-style: none;
margin: 0 0 .75em 0;
padding: 0;
}
#menu li ul li
{
float: none;
font-size: .75em;
line-height: 1.5em;
margin: 0;
padding: 0;
position: relative;
text-align: left;
width: 8.125em;
}
#menu li ul li:hover
{
background: none;
border: none;
margin: 0;
padding: 0;
}
#menu li .greybox li
{
background: #F4F4F4;
border: 1px solid #bbbbbb;
margin: 0px 0px .25em 0px;
padding: .25em .375em .25em .375em;
width: 116px;
}
#menu li .greybox li:hover
{
background: #ffffff;
border: 1px solid #aaaaaa;
margin: 0px 0px .25em 0px;
padding: .25em .375em .25em .375em;
}
Unbelieveably, the problem was with the li height. For the li, I was using a min-height setting, and for the li:hover I was using just plain height.
So, was:
#menu li
{
border: 0;
float: left;
min-height: 1.4em;
padding: .25em .625em .25em .625em;
position: relative;
text-align: center;
}
#menu li:hover
{
background-color: #2872D2;
height: 1.35em;
}
And should be:
#menu li
{
border: 0;
float: left;
min-height: 1.4em;
padding: .25em .625em .25em .625em;
position: relative;
text-align: center;
}
#menu li:hover
{
background-color: #2872D2;
min-height: 1.35em;
}
Related
My ASP page looks like this on large screens:
How do i make the page fit the whole screen?
the css file looks like this:
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 3px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
top: 0px;
left: 0px;
}
.header h1
{
border-style: none;
border-color: inherit;
border-width: medium;
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
line-height: 2em;
font-size: 2em;
height: 52px;
width: 338px;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
margin-top: 48px;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: 0px;
height: 13px;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
I tried to set the .page part as following
.page
{
height: 100%;
width: 100%;
background-color: #fff;
margin: 20px auto 0px auto;
border: 3px solid #496077;
}
But it partly worked for the width and it didn't changes the positions of the content:
Any ideas what the problem is?
the site master looks like this:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Styles/TUClogo2.png" style="margin-left: 0px" Height="82px" Width="408px" />
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<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="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
height will not work in this case . please add this to your css
html
{
height: 100%;
}
This will force the html tag to occupy 100% height. Hope this help.
In addition to adding height to html, you also need to add it for body as below
html, body
{
width: 100%;
height: 100%;
}
I have not had much experience working with the site.master or site.css before, so i do not know where am going wrong.
I have set a footer and a header in my applicaiton, in the design view everything shows up fine. But when i debug it in local, the header does not show; whereas the footer does.
Can anyone help me.
Thanks!
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<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="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer" style="clear: both; text-align:center ; padding: 30px; background-color:Olive; border: 0px solid #DBDDDE; color:White ">
Copyright 2013 IndieRevo
</div>
</form>
</body>
</html>
Output:
Line 1: error: expected identifier or '(' before '{' token
Line 1: error: stray '#' in program
Line 3: error: expected identifier or '(' before '<' token
Site.css:
http://codepad.org/vcCs4AN9
css:
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
background-image: url('/Images/utensilsheader.png');
}
test
{
background-image: url(../images/1.png);
position: relative;
margin: 0px;
padding: 0px;
width: auto;
height: 255px;
top: 0px;
left: 1px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
background-image: url('/Images/utensilsheader.png');
}
h2
{
font-size: 1.5em;
font-weight: 600;
background-image: url('/Images/utensilsheader.png');
}
h3
{
font-size: 1.2em;
background-image: url('/Images/utensilsheader.png');
}
h4
{
font-size: 1.1em;
background-image: url('/Images/utensilsheader.png');
}
h5, h6
{
font-size: 1em;
background-image: url('/Images/utensilsheader.png');
}
/* this rule styles and tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 1080px;
background-color: White;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background-image: url('/Images/utensilsheader.png');
width: auto;
height: 255px;
top: 0px;
left: 1px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
display:none;
}
div.menu
{
padding: 4px 0px 4px 8px;
display:none;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: White;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: none;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
Here is one of the bugs - h1 color is White. It's why you cannot see it in white background.
Here is how you debug in browser. FireFox has FireBug.
I hope this will help you keep going.
Debug in IE
Debug In Chrome
I'm using the default generated asp page in visual studio. (I have edit the CSS code a little but the error was there from the beginning) The problem is that the menu is always a little under the position it should be and I can't move it up by values like up and padding.
The CSS file.
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #999966;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 28px;
line-height: 1.6em;
height: auto;
width: 926px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 90%;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #009900;
width: 100%;
top: 0px;
left: 0px;
height: 101px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}
.header h1
{
border-style: none;
border-color: inherit;
border-width: medium;
font-weight: 700;
padding: 0px 0px 0px 20px;
color: #2c2cb0;
line-height: 2em;
font-size: 2em;
width: 938px;
height: 70px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.RightCol
{
padding: 6px 0px;
margin: 12px 8px 8px 810px;
width: 150px;
min-height: 200px;
position: relative;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
background: #ffffff;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#000000;
width:100%;
height: 32px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #000000;
color: #fafbba;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
color: #cfdbe6;
text-decoration: none;
}
div ul:last-child li:last-child a:last-child
{
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
Site.master
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<title>title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/NormalText.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1 style="text-align:left; font-size: 40px;"></h1>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal"
onmenuitemclick="NavigationMenu_MenuItemClick">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Selelox" Value="Selelox"/>
<asp:MenuItem NavigateUrl="~/Programs.aspx" Text="Programs" ToolTip="You will find all programs here"/>
<asp:MenuItem Text="Profile" Value="Profile">
<asp:MenuItem NavigateUrl="~/Account/Login.aspx" Text="Login" Value="Login">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Account/Register.aspx" Text="Register"
Value="Register"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Help" Value="Help">
<asp:MenuItem NavigateUrl="~/FAQ.aspx" Text="FAQ" Value="FAQ"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/ReportProblems.aspx" Text="Report problem"
Value="Report problem"></asp:MenuItem>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Community/Forum.aspx" Text="Forum" ToolTip="Forum"/>
</Items>
<StaticItemTemplate>
<%# Eval("Text") %>
</StaticItemTemplate>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="clear"><div class="">
</div>
</div>
</div>
</form>
</body>
</html>
If the asp-menu renders as a div (not sure), this could work:
div.menu
{
...
margin-top: -3px;
}
I can't see in your CSS how you're containing your menu but you can try a clearfix to see if it fixes your issue. Try this:
.menu:before, .menu:after {
display:table;
content:"";
zoom:1; /* IE fix */
}
.menu:after {
clear:both;
}
None of the fixes I found anywhere worked for me, so I used this Chrome hack:
#media screen and (-webkit-min-device-pixel-ratio:0) {
div.menu ul { top: -21px; }
div.menu { height: 20px; }
}
Borrowed the hack from reflexiv in his post here.
Individual mileage may vary.
i am trying to set up a right column that wont stay on the right hand side of the page. I would like it to sit up the right hand side of the main content
Here is my Asp.net Code
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<title>Youthpodcast</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
width: 873px;
height: 155px;
}
</style>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header"> <div class="title">
</div>
<div id="logo"><img alt="" class="style1" src="logo.jpg" /><br /></div>
<br />
<br />
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<%--<asp:UpdatePanel ID="UpdatePanel1" runat="server">--%>
<%--
start of the menu--%>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal"
BackColor="#FFFBD6" DynamicHorizontalOffset="2" Font-Names="Verdana"
Font-Size="0.8em" ForeColor="#990000" StaticSubMenuIndent="10px">
<DynamicHoverStyle BackColor="#990000" ForeColor="White" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicMenuStyle BackColor="#FFFBD6" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About">
<asp:MenuItem Text="Who are we" Value="Who are we"
NavigateUrl="~/whoarewe.aspx"></asp:MenuItem>
<asp:MenuItem Text="What is podcasting" Value="what is podcasting"
NavigateUrl="~/whatispodcasting.aspx">
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/listofclubs.aspx" Text="YouthClubs"
Value="YouthClubs"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/contactus.aspx" Text="Contact Us"
Value="Contact Us"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/joinus.aspx" Text="Join" Value="Join">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/admin/adminpage.aspx" Text="Admin" Value="admin">
</asp:MenuItem>
</Items>
<StaticHoverStyle BackColor="#990000" ForeColor="White" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticSelectedStyle BackColor="#FFCC66" />
</asp:Menu><%--</asp:UpdatePanel>--%>
<%-- End of the main navigation menu--%>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<p>
</p>
</asp:ContentPlaceHolder>
<div id="rightcolumn">
<asp:Login ID="Login1" runat="server" BackColor="#F7F6F3"
BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px"
DisplayRememberMe="False" Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#333333" RememberMeText="" Height="159px" Width="274px">
<InstructionTextStyle Font-Italic="True" ForeColor="Black" />
<LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid"
BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
<TextBoxStyle Font-Size="0.8em" />
<TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em"
ForeColor="White" />
</asp:Login>
<br />
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#57dce6',
color: '#050505'
},
tweets: {
background: '#4864f0',
color: '#0a080a',
links: '#4aed05'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('YouthPodcast').start();
</script>
<br />
< </div>
</div>
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
And now my CSS see if anyone can find what is causing the problems
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
min-width: 500px;
}
#rightcolumn
{
float:right;
width:300px;/*adjust width in px or %. Also adjust #content width.*/
right:-10px;
background:#44B185;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: mediumseagreen;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 800px;
width: 10px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: black;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: Teal;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: HighlightText;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #FF5E00;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
/*--- Twitter CSS */
#twitter
{
float: right;
width: 0%;
padding: 250px;
padding-right: 0px;
right: auto;
}
#login
{
float: right;
width: 30;
padding: 1px;
padding-top: 110px;
}
/*Contact Us CSS */
#contact-area {
width: 320px;
margin-top: 25px;
background-color: Aqua;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 300px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
width: 100px;
float: left;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
#address
{
float:right ;
}
#logo
{ position:relative;
right:-40px;
top:-17px;
width:300px;
}
#ticker {
width:180px; height:300px; overflow:auto; border:1px solid #aaaaaa;
}
#ticker dt {
font:normal 14px Georgia; padding:0 10px 5px 10px;
background-color:#e5e5e5; padding-top:10px; border:1px solid #ffffff;
border-bottom:none; border-right:none;
}
#ticker dd {
margin-left:0; font:normal 11px Verdana; padding:0 10px 10px 10px;
border-bottom:1px solid #aaaaaa; background-color:#e5e5e5;
border-left:1px solid #ffffff;
}
#ticker dd.last { border-bottom:1px solid #ffffff;
}
/*Round conners news*/
.news
{
position:absolute;
width:200;
padding:1px;
border:3px solid gray;
margin:0px;
background-color: #B0C4DE;
text-transform:inherit;
}
Set float:left for both left and right column.
</script>
<br />
< </div>
</div>
</div>
</div>
i think you may have added 1 extra bracket when not needed
At the top of this page is a jquery menu. When putting the cursor over 'stuff for him' the submenu item is lost behind the #headliner div. It also is lost behind the black footer. I have tried another menu (Telerik RadMenu) and the same problem occurs. I need another set of eyes to give me some insight on what's happening. Html / CSS Code below.
Menu CSS:
ul#menu {
background: #940;
color: #fff;
margin: 0;
padding: 0.3em 0em;
}
ul#menu li {
display: inline;
margin: 0.1em 1em;
position: relative;
}
ul#menu h2, ul#menu h3 {
font-size: 100%;
font-weight: normal;
display: inline;
}
ul#menu li a {
color: #fff;
text-decoration: none;
padding: 0 0.4em;
}
ul#menu li a:hover {
text-decoration: underline;
}
ul#menu li.mega a {
background: transparent url(../images/icons/arrow.gif) center right no-repeat;
padding: 0 1.2em;
}
ul#menu li.mega a:hover {
text-decoration: underline;
}
ul#menu div {
display: none;
}
ul#menu li.mega div {
border: 1px solid #dda;
width: 18em;
position: absolute;
top: 1.6em;
left: 0em;
padding: 1.3em;
background: #ffc;
color: #930;
}
ul#menu li.hovering div {
display: block;
}
ul#menu li.mega div a {
color: #300;
padding: 0;
background-image: none;
text-decoration: underline;
}
ul#menu li div a.more {
color: #390;
font-weight: bold;
}
ul#menu div h3 {
color: #f70;
font-weight: bold;
font-size: 1.1em;
}
ul#menu div p {
margin: 0 0 0.8em 0;
padding: 0;
}
demo.css
html, body, form
{
margin: 0px;
padding:0px;
height: 100%;
}
body {
background: url("../images/common/2010_logo_bg_02.gif") repeat;
font: 12px Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif;
}
#wrapper
{
height: auto !important;
height: 100%;
min-height: 100%;
position: relative;
width:1000px;
margin: 0 auto -435px;
background-color:#ebebeb;
}
.push {
height: 435px;
}
#topsection
{
width:1000px;
}
#commandbar div
{
color: #333333;
}
#main
{
background-color: #ebebeb;
}
#bottom
{
position:relative;
margin: 0 auto;
height: 435px;
width: 1000px;
}
#footer {
background: #000;
color: #fff;
font-size: 12px;
}
#footer ul.yellow li a {
color: #f5eb26;
font-size: 14px;
font-weight:bold;
}
#footer ul.yellow li a:hover {
text-decoration:underline;
}
#footer ul.blue li a {
color: #66ccff;
font-size: 14px;
font-weight:bold;
}
#footer ul.blue li a:hover {
text-decoration:underline;
}
#footer ul.white li a {
color: #ffffff;
font-size: 12px;
}
#footer ul.white li a:hover {
text-decoration:underline;
}
#footer .box-footer-1 div.more,
#footer .box-footer-2 div.more,
#footer .box-footer-3 div.more,
#footer .box-footer-4 div.more {
text-align: right;
}
#footer .box-footer-1 div.more a,
#footer .box-footer-2 div.more a,
#footer .box-footer-3 div.more a,
#footer .box-footer-4 div.more a {
color: #ffff00;
text-decoration: none;
}
#footer .box-footer-1 {
float:left;
width: 390px;
_width: 400px;
height: 389px;
padding: 20px 10px 0px 0px;
border-right: 1px solid #666;
margin-left:15px;
}
#footer .box-footer-1 img {
margin-bottom: 10px
}
#footer .box-footer-2 {
float:left;
width: 194px;
height: 389px;
padding: 20px 10px 0px 10px;
border-right: 1px solid #666;
}
#footer .box-footer-2 ul {
margin: 0px;
padding: 0px;
}
#footer .box-footer-2 ul li {
margin: 10px 0px 0px 10px;
list-style: none;
}
#footer .box-footer-3 {
float:left;
width: 140px;
height: 389px;
padding: 20px 10px 0px 10px;
border-right: 1px solid #666;
}
#footer .box-footer-3 ul {
margin: 10px;
padding: 10px;
}
#footer .box-footer-4 {
float:left;
width: 129px;
padding: 20px 10px 0px 10px;
height: 389px;
}
#footer .box-footer-4 ul {
margin: 0px;
padding: 0px;
}
#footer .box-footer-4 ul li {
margin: 10px 0px 0px 20px;
list-style: none;
}
#footer h1 {
margin: 0px 0px 10px 0px;
padding: 0px;
font-size: 20px;
}
#footer h2.blue {
color: #66ccff;
}
#footer h2 {
margin-top: 10px;
padding: 0px;
font-size: 14px;
color: #f5eb26;
}
#copyright
{
background: #ccc;
color: #000;
height:25px;
}
#copyright a
{
font-size: 10px;
text-decoration:none;
}
h1
{
font-size:16px;
}
.clear {
clear: both;
}
.left
{
float:left;
}
.right {
float: right;
}
.outer_canvas
{
background-color:#ffffff;
padding-left:10px;
padding-bottom:30px;
border: 1px solid silver;
}
.inner_canvas
{
background-color:#f4f3f3;
margin-left:0px;
margin-top:15px;
margin-right:20px;
padding:15px 15px 20px 20px;
border: 1px solid #e5e5e5;
}
.margin
{
margin:10px;
}
.margintop
{
margin-top:5px;
}
.marginbottom
{
margin-bottom:15px;
}
.marginleft
{
margin-left:10px;
}
.marginright
{
margin-right:10px;
}
.textbox
{
border: 1px solid silver;
height: 20px;
padding-top: 5px;
padding-left: 5px;
}
.padding
{
padding:15px;
}
.surround
{
padding: 10px 0px 10px 0px;
}
.small
{
font-size:10px;
}
.italic
{
font-style:italic;
}
.bold
{
font-weight:bold;
}
.big
{
font-size:20px;
}
.underline
{
text-decoration:underline;
}
.error
{
color: Red;
font-weight:bold;
}
.blue
{
color:Blue;
}
.light_blue
{
color: #005ABE;
}
.lightblue_shading, h2.lightblue_shading
{
color: #005ABE;
margin:3px;
}
.white
{
color:#ffffff;
}
.grey
{
color:#cccccc;
}
.hide
{
display:none;
}
.break-word {
word-wrap: break-word;
}
.success_border
{
border:2px dashed green;
}
.error_border
{
border:2px solid red;
}
.mappoints
{
padding:0;
margin:0;
}
.mappoints li
{
list-style-type:none;
}
/* --------- Headliner --------- */
#headliner
{
height: 38px;
position:relative;
width: 1000px;
margin: 0 auto;
background-image: url('../images/common/headliner_bg.jpg');
}
#headliner h1
{
margin:0px;padding:0px;
}
#left_container
{
float:left;
margin-top:5px;
background-color:#ffffff;
}
#right_container
{
float:left;
margin-top:5px;
}
The master page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Demo.master.cs" Inherits="MasterPages_Demo" %>
<%# MasterType TypeName="BaseMasterPage" %>
<%# Register Src="~/MasterPages/Controls/Headliner.ascx" TagName="Headliner" TagPrefix="uc1" %>
<%# Register Src="~/MasterPages/Controls/MegaTemplateMenu.ascx" TagName="MegaTemplateMenu"
TagPrefix="uc2" %>
<!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" xml:lang="en" id="html_tag" runat="server">
<head id="Head1" runat="server">
<title></title>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager2" runat="server" />
<link id="Link1" runat="server" href="~/css/demo.css" rel="stylesheet" type="text/css" />
<link id="Link2" runat="server" href="~/css/megamenu.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div id="wrapper">
<uc2:MegaTemplateMenu ID="MegaTemplateMenu1" runat="server" />
<uc1:Headliner ID="Headliner1" runat="server" />
<div id="main">
<div id="content" class="margin">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="push">
</div>
</div>
<div id="bottom">
<div id="footer">
<div class="box-footer-1">
</div>
<div class="box-footer-2">
<ul class="yellow">
<li>Rules</li>
</ul>
<br />
<br />
<ul class="blue">
<li>Volunteer Opportunities</li>
</ul>
</div>
<div class="box-footer-3">
<h2>
Personnel</h2>
<ul class="white">
<li>BC & Yukon</li>
<li>Ontario</li>
<li>Alberta</li>
<li>Saskatchewan</li>
<li>Manitoba / Nunavut</li>
<li>Quebec</li>
<li>Maritimes</li>
<li>NFLD & Labrador</li>
</ul>
<h2>
National Office</h2>
<h2 class="blue">
Map / Driving Directions</h2>
</div>
<div class="box-footer-4">
<h2 class="blue">
Feedback</h2>
<div style="padding-bottom: 10px;">
<asp:TextBox ID="txtEmailFeedback" runat="server" Width="180px" CssClass="small italic"
ForeColor="#333333">enter your email address</asp:TextBox>
</div>
<div>
<asp:TextBox ID="txtFeedback" runat="server" TextMode="MultiLine" Rows="5" Width="180px"></asp:TextBox>
</div>
<div style="text-align: right; width: 187px;">
<asp:Button ID="btnFeedback" runat="server" Text="Submit" Width="75px" />
</div>
<h2 class="blue">
Sign up for our newsletter:</h2>
<div>
<asp:TextBox ID="txtEmailNewsletter" runat="server" Width="180px" CssClass="small italic"
ForeColor="#333333">enter your email address</asp:TextBox>
</div>
<div style="text-align: right; width: 187px;">
<asp:Button ID="btnNewsletterSignUp" runat="server" Text="Sign Up" Width="75px" />
</div>
</div>
<div class="clear">
</div>
<div id="copyright">
<div class="left" style="margin-top: 7px; margin-left: 10px;">
<span class="small">
<asp:Label ID="lblCopyright" runat="server"></asp:Label></span>
</div>
<div class="right" style="margin-top: 5px; margin-right: 5px;">
<asp:HyperLink ID="linkPrivacy" runat="server" NavigateUrl="~/privacy-policy.aspx">Privacy Policy</asp:HyperLink>
|
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/terms-of-use.aspx">Terms of use</asp:HyperLink>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</form>
</body>
</html>
If I remove position:relative from #bottom and #headliner - the submenu opens over the #headliner and #bottom divs.