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.
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 have create a website using asp.net and when I render the the website on firefox and IE the website look the same and when rendering it on Chrome it move the button lower and changes the location of it
this is my master page code
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="UMSite.master.cs" Inherits="WebApplication4.UMSiteMaster" %>
<!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/UM.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><img alt="" src="Styles/UMHeader.png" width= "950" height= "65" /></h1>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home"/>
</Items>
</asp:Menu>
</div>
</div>
</div></h1>
<div class="main" runat="server">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</form>
</body>
</html>
the below is the css
/* 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;
height: 192px;
}
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: 950px;
height:auto;
background-color: #fff;
margin: 10px auto 5px auto;
border: 1px solid #496077;
}
.header
{
position:relative;
margin: 0px;
padding: 0px;
background: #E30613;
width: 100%;
top: 0px;
left: 0px;
height: 90px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 0px;
color: #E30613;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 0px 0px 0px 0px;
min-height: 630px;
width:auto;
background-image:url('UMBackground.png');
}
.leftCol
{
padding: 6px 0px;
margin: 0px 0px 0px 0px;
width: 200px;
min-height: 200px;
width:auto;
}
.footer
{
color: #4e5766;
padding: 0px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#E30613;
width: 950px;
height: 35px;
margin-top: 0px;
}
div.menu
{
padding: 1px 0px 1px 2px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 5px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #E30613;
border: 1.25px #00BFFF solid;
color: #F5FFFA;
display:inline;
line-height: 1.35em;
padding: 10px 30px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #000000;
color: #F5FFFA;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #E30613;
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: 947px;
height: 132px;
}
.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;
}
This is just the way webkit browsers (safari and chrome, etc) render the html file input type.
See this jsbin for an example of the file input tag.
See HTML input type="file" in Chrome does not show textbox for a previous answer.
I'd tell you to look up "css/html browser fixes". Different browsers show webpages differently. Internet Explorer is often the browser with the biggest visual differences.
Of course the page will look different on different browsers.
You have body {font-size: .80em;} and the em is a relative size, which means that the font size on the web page is 80% of the browser's default font size.
Since the browser's default size can vary (it is always user selectable) this means that you can't use this method if you aim for browser interoperability. Ditto with the line height.
Either keep the user's preferences (and accept that different users will see different things), or choose a font size in pixels or points.
Note that if you have set a size this way in the body, you can use em elsewhere, which will then be relative to this body size. So things like h3 {font-size:1.2em} are perfectly OK.
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.