ASP.NET Flicker in IE

ASP.NET Flicker in IE - c#

I'm new into developping an asp.net website and when I navigate from page to page or just click on my own section menu, it's flickering in IE9 (didn't tested other IE version yet), but not in Firefox. I searched over the Internet and found this solution:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" />
But this is not working for me actually...
Here's my site.Master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="HomeSite.SiteMaster" %>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" />
<link type="text/css" rel="stylesheet" href="~/Styles/Site.css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="False">
<AnonymousTemplate>
[ Partner Login ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server"
meta:resourcekey="HeadLoginNameResource1" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect"
LogoutText="Log Out" LogoutPageUrl="~/"
meta:resourcekey="HeadLoginStatusResource1"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
<div class="menuContainer">
<div class="menuRight">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal"
meta:resourcekey="NavigationMenuResource1">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"
meta:resourcekey="MenuItemResource1"/>
<asp:MenuItem NavigateUrl="~/Literature.aspx" Text="Documents"
meta:resourcekey="MenuItemResource2"/>
<asp:MenuItem NavigateUrl="~/Photos.aspx" Text="Photos & videos"
meta:resourcekey="MenuItemResource4"/>
<asp:MenuItem NavigateUrl="~/Download.aspx" Text="Download"
meta:resourcekey="MenuItemResource5"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"
meta:resourcekey="MenuItemResource6"/>
</Items>
</asp:Menu>
</div>
<div class="menuLeft">
</div>
</div>
<div class="subMenu">
<img src="Styles/images/Blue-Background.jpg" alt="" width="100%" height="150px" style="vertical-align: top;" />
<img src="Styles/images/Logo_Flofab.png" alt='' height='100px' style="position:absolute;z-index:2;top:5px;left:120px;" />
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</div>
<div class="footerContainer">
<div style='float:left;'>Copyright © 2012 Flofab All rights reserved.</div>
<div style='float:right;'>
<a href='http://www.linkedin.com'>
<img src="Styles/images/linkedin.png" alt='' style='border:0;' />
</a>
<a href='http://www.twitter.com'>
<img src="Styles/images/twitter.png" alt='' style='border:0;' />
</a>
<a href='http://www.facebook.com'>
<img src="Styles/images/facebook-icon.png" alt='' style='border:0;' />
</a>
</div>
</div>
</form>
</body>
</html>
Now here's my Default.aspx
<%# Page Title="Flofab" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="HomeSite._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id='mainTitle' class='mainTitle' runat='server'>
Home
</div>
<div id='mainBody' class='mainBody'>
<p>
Put text here...
<br />
This is some text to be sure it's placed over the FF logo. <br /> Is my text over it? I'm going to check now...
</p>
</div>
</asp:Content>
And my .css file
body
{
/*background-color: #fff;*/
width:100%;
height:100%;
margin: 0px;
padding: 0px;
color: #575757;
font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
background-image:url('images/Body-Background.jpg');
background-repeat:repeat-x;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin: 0 10px 10px 10px;
line-height: 1.6em;
}
table
{
margin: 5px;
border: 1px solid #4194E7;
border-collapse:collapse;
padding-left: 5px;
padding-right: 5px;
}
table th
{
border-bottom: 1px solid #4194E7;
background-image:url('images/Menu-Background.jpg');
background-repeat:repeat-x;
color:White;
padding-right: 10px;
}
table td
{
border-bottom: 1px solid #4194E7;
padding: 5px;
}
tr.row1
{
background-color: #B4D4FA;
}
tr.row2
{
background-color: #A0D4FA;
}
.page
{
width: 80%;
min-width:600px;
margin: 2px auto 0px auto;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
min-height:50px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #000;
border: none;
line-height: 2em;
font-size: 2em;
}
.subMenu
{
margin-top: 35px;
/*border: 1px solid gray;*/
position: relative;
}
.main
{
margin-top: 5px;
min-height: 420px;
border-left: 1px solid #4194E7;
border-right: 1px solid #4194E7;
border-bottom: 1px solid #4194E7;
background-color:#C8D4FA;
}
.mainTitle
{
padding: 5px 0px 2px 10px;
/*border-bottom: 1px solid white;*/
background-image:url('images/Menu-Background.jpg');
background-repeat:repeat-x;
font-size: 1.5em;
font-variant: small-caps;
font-weight: bold;
color: #fff;
min-height:25px;
}
.mainBody
{
background-image:url('images/LogoFF-Filigrane.png');
background-repeat:no-repeat;
min-height: 395px; /*.main height - .mainTitle height*/
padding-top:5px;
}
.mainItems
{
padding-left: 10px;
padding-right: 10px;
margin-top:5px;
border-bottom: 1px solid gray;
/*background-color:#B8B8B8;*/
font-size: 1em;
font-variant: small-caps;
text-transform: none;
width: 120px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footerContainer
{
color: #fff;
padding-left: 2px;
margin: 0px auto;
text-align: center;
line-height: normal;
width: 80%;
}
.footerContainer a:link
{
text-decoration:none;
}
div.menuContainer
{
float:right;
width:100%;
background-image:url('images/Menu-Background.jpg');
background-repeat:repeat-x;
border-top:1px solid gray;
}
div.menuLeft
{
width:100%;
color:#ff99dd;
display:inline;
}
div.menuRight
{
color:#ff99dd;
float:right;
display:inline;
}
.menu
{
padding: 0;
margin: 0;
min-height: 30px;
}
div.menu ul
{
margin: 0;
padding: 0;
float:right;
}
div.menu ul li
{
display: block;
float:left;
background-image:url('images/Menu-Background.jpg');
background-repeat:repeat-x;
border-left:1px solid white;
}
div.menu ul li a
{
color: #fff;
float: left;
padding: 0.3em 1em 0.7em;
text-decoration: none;
}
div.menu ul li a:hover
{
color: #000;
}
div.menu ul li a:active
{
color: #777;
text-decoration: none;
}
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%;
}
.clear
{
clear: both;
}
.titleLogo
{
display: block;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: #fff;
}
.loginDisplay a:link
{
color: #fff;
text-decoration:none;
}
.loginDisplay a:visited
{
color: #fff;
}
.loginDisplay a:hover
{
color: #fff;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
.floatLeft
{
float:left;
}
.floatRight
{
float:right;
}
.errorContent
{
color: Red;
text-align: center;
font-size: 1.2em;
}
Any idea of what makes IE flicker?

Instead of displaying an image as the background and menu, I changed for css linear-gradient and there's no flickering anymore. Looks like a IE cache problem.

Related

how to position menu list items on top of a bar?

I am trying to create a navigation bar where I want the list items to be displayed on top of a bar. but the items are moving below it. Also when selecting a particular list item I want it to be highlighted and the menu-items to be aligned beneath it.But here as soon as I move the mouse from the parent List item the drop-down disappears.Plus there is some huge gap between the list items of the drop-down.
I want something like this :
ul {
list-style: none;
}
ul#pri.nav {
margin-left: 0px;
z-index: -1;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
text-decoration: none;
width: 97%;
background-color: rgb(180, 221, 180);
}
ul.nav {
height: 10px;
}
ul.nav li {
float: left;
margin-top: 0px;
padding: 10px 13px;
font-family: Arial, sans-serif;
font-size: small;
line-height: 15px;
cursor: pointer;
font-weight: 700;
}
ul.nav#pri li {
margin-top: 0px;
float: left;
margin-right: 5px;
font-family: 'Arial Rounded MT';
color: #fff;
width: 100px;
height: 6px;
text-align: center;
padding: 20px;
display: block;
-moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 15px;
border-bottom-style: none;
border-bottom-color: inherit;
border-bottom-width: medium;
background-color: #0fc15e;
}
ul.nav#pri li a {
text-decoration: none;
color: #fff;
}
ul.nav#pri li.active,
ul.nav#pri li:hover ul.nav#sec {
display: block;
font-family: 'Arial Rounded MT';
color: #a67cd5;
}
.nav#pri li:hover ul {
color: #2b95b2;
}
ul.nav#sec {
display: none;
/*float:left;
text-align:center;
border-top-right-radius:15px;
border-top-left-radius:15px;
text-decoration:none;
color:#fff;
font-family:'Arial Rounded MT';
font-size:15px;
color:#fff;
margin-top:-1px;
width:97%;
*/
/*height:25px;
border-top-right-radius:15px;*/
}
/*ul.nav#pri li li.active
{
}*/
ul.nav#sec li a {
text-decoration: none;
color: #fff;
font-size: 14px;
}
ul.nav#sec li:hover {
font-family: 'Arial Rounded MT';
text-decoration: none;
color: #fff;
background-color: #747171;
}
<%# Master Language="C#" AutoEventWireup="true"
CodeBehind="Site2.master.cs" Inherits="abc.Site2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="stylesheets/StyleSheet1.css" type="text/css" rel="Stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.auto-style2 {
height: 550px;
}
.auto-style3 {
height: 454px;
margin-top: 40px;
}
.auto-style4 {
height: 133px;
margin-top: 81px;
}
.auto-style5 {
margin-left: 57px;
}
.auto-style6 {
width: 123px;
}
</style>
</head>
<body style="height: 600px">
<form id="form1" runat="server" class="auto-style2">
<div class="auto-style2">
<div class="auto-style3">
<div style="margin-top :80px">
<div style="width:100%; float:left; margin-top: -20px;">
<div style="float:left; width:44%; text-align:justify; margin-left:20px;
margin-top:-20px;">
<asp:Image ID="Image1" Height="40" Width="150" ImageAlign="Middle" runat="server" ImageUrl="~/images/ Logo.png" />
</div>
</div>
</div>
<br />
<br />
<div>
<ul id="pri" class="nav" style="height: 10px; margin-top: 30px">
<li class="active">Home</li>
<li>Rubrics</li>
<li>Create User</li>
<li>Reports
<ul id="sec" class="nav" style="margin-left: 3px">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
<li class="auto-style6">Messages</li>
<li class="auto-style5">
<asp:LinkButton runat="server" id="logout" onclick="logout_Click">Sign Out</asp:LinkButton>
</li>
</ul>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
<div id="p1" class="auto-style4">
<div style="height:10px;"></div>
<div style="color:#F5F5F5;text-align:center;">
Copyright © xyz
</div>
</div>
currently what i get is this:

This will help you with the alignment
ul.nav#pri li {
position: relative;
bottom: 45px;
}
ul {
list-style: none;
}
ul#pri.nav {
margin-left: 0px;
z-index: -1;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
text-decoration: none;
width: 97%;
background-color: rgb(180, 221, 180);
}
ul.nav {
height: 10px;
}
ul.nav li {
float: left;
margin-top: 0px;
padding: 10px 13px;
font-family: Arial, sans-serif;
font-size: small;
line-height: 15px;
cursor: pointer;
font-weight: 700;
}
ul.nav#pri li {
margin-top: 0px;
float: left;
margin-right: 5px;
font-family: 'Arial Rounded MT';
color: #fff;
width: 100px;
height: 6px;
text-align: center;
padding: 20px;
display: block;
-moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 15px;
border-bottom-style: none;
border-bottom-color: inherit;
border-bottom-width: medium;
background-color: #0fc15e;
position: relative;
bottom: 45px;
}
ul.nav#pri li a {
text-decoration: none;
color: #fff;
}
ul.nav#pri li.active,
ul.nav#pri li:hover ul.nav#sec {
display: block;
font-family: 'Arial Rounded MT';
color: #a67cd5;
}
.nav#pri li:hover ul {
color: #2b95b2;
}
ul.nav#sec {
display: none;
/*float:left;
text-align:center;
border-top-right-radius:15px;
border-top-left-radius:15px;
text-decoration:none;
color:#fff;
font-family:'Arial Rounded MT';
font-size:15px;
color:#fff;
margin-top:-1px;
width:97%;
*/
/*height:25px;
border-top-right-radius:15px;*/
}
/*ul.nav#pri li li.active
{
}*/
ul.nav#sec li a {
text-decoration: none;
color: #fff;
font-size: 14px;
}
ul.nav#sec li:hover {
font-family: 'Arial Rounded MT';
text-decoration: none;
color: #fff;
background-color: #747171;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="stylesheets/StyleSheet1.css" type="text/css" rel="Stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.auto-style2 {
height: 550px;
}
.auto-style3 {
height: 454px;
margin-top: 40px;
}
.auto-style4 {
height: 133px;
margin-top: 81px;
}
.auto-style5 {
margin-left: 57px;
}
.auto-style6 {
width: 123px;
}
</style>
</head>
<body style="height: 600px">
<form id="form1" runat="server" class="auto-style2">
<div class="auto-style2">
<div class="auto-style3">
<div style="margin-top :80px">
<div style="width:100%; float:left; margin-top: -20px;">
<div style="float:left; width:44%; text-align:justify; margin-left:20px;
margin-top:-20px;">
<asp:Image ID="Image1" Height="40" Width="150" ImageAlign="Middle" runat="server" ImageUrl="~/images/ Logo.png" />
</div>
</div>
</div>
<br />
<br />
<div>
<ul id="pri" class="nav" style="height: 10px; margin-top: 30px">
<li class="active">Home</li>
<li>Rubrics</li>
<li>Create User</li>
<li>Reports
<ul id="sec" class="nav" style="margin-left: 3px">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
<li class="auto-style6">Messages</li>
<li class="auto-style5">
<asp:LinkButton runat="server" id="logout" onclick="logout_Click">Sign Out</asp:LinkButton>
</li>
</ul>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
<div id="p1" class="auto-style4">
<div style="height:10px;"></div>
<div style="color:#F5F5F5;text-align:center;">
Copyright © xyz
</div>
</div>

you can remove </br> and margin-top
use the below html and try to compare with your existing code.
<%# Master Language="C#" AutoEventWireup="true"
CodeBehind="Site2.master.cs" Inherits="abc.Site2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="stylesheets/StyleSheet1.css" type="text/css" rel="Stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
ul {
list-style: none;
}
ul#pri.nav {
margin-left: 0px;
z-index: -1;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
text-decoration: none;
width: 97%;
background-color: rgb(180, 221, 180);
}
ul.nav {
height: 10px;
}
ul.nav li {
float: left;
margin-top: 0px;
padding: 10px 13px;
font-family: Arial, sans-serif;
font-size: small;
line-height: 15px;
cursor: pointer;
font-weight: 700;
}
ul.nav#pri li {
margin-top: 0px;
float: left;
margin-right: 5px;
font-family: 'Arial Rounded MT';
color: #fff;
width: 100px;
height: 6px;
text-align: center;
padding: 20px;
display: block;
-moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 15px;
border-bottom-style: none;
border-bottom-color: inherit;
border-bottom-width: medium;
background-color: #0fc15e;
}
ul.nav#pri li a {
text-decoration: none;
color: #fff;
}
ul.nav#pri li.active,
ul.nav#pri li:hover ul.nav#sec {
display: block;
font-family: 'Arial Rounded MT';
color: #a67cd5;
}
.nav#pri li:hover ul {
color: #2b95b2;
}
ul.nav#sec {
display: none;
/*float:left;
text-align:center;
border-top-right-radius:15px;
border-top-left-radius:15px;
text-decoration:none;
color:#fff;
font-family:'Arial Rounded MT';
font-size:15px;
color:#fff;
margin-top:-1px;
width:97%;
*/
/*height:25px;
border-top-right-radius:15px;*/
}
/*ul.nav#pri li li.active
{
}*/
.auto-style2 {
height: 550px;
}
.auto-style3 {
height: 454px;
margin-top: 40px;
}
.auto-style4 {
height: 133px;
margin-top: 81px;
}
.auto-style5 {
margin-left: 57px;
}
.auto-style6 {
width: 123px;
}
</style>
</head>
<body style="height: 600px">
<form id="form1" runat="server" class="auto-style2">
<div class="auto-style2">
<div class="auto-style3">
<div style="margin-top :80px">
<div style="width:100%; float:left; margin-top: -20px;">
<div style="float:left; width:44%; text-align:justify; margin-left:20px;
margin-top:-20px;">
<asp:Image ID="Image1" Height="40" Width="150" ImageAlign="Middle" runat="server" ImageUrl="~/images/ Logo.png" />
</div>
</div>
</div>
<br />
<br />
<div>
<ul id="pri" class="nav" style="height: 10px; margin-top: 30px">
<li class="active">Home</li>
<li>Rubrics</li>
<li>Create User</li>
<li>Reports
<ul id="sec" class="nav" style="margin-left: 3px">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
<li class="auto-style6">Messages</li>
<li class="auto-style5">
<asp:LinkButton runat="server" id="logout" onclick="logout_Click">Sign Out</asp:LinkButton>
</li>
</ul>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
<div id="p1" class="auto-style4">
<div style="height:10px;"></div>
<div style="color:#F5F5F5;text-align:center;">
Copyright © xyz
</div>
</div>
i hope this will help you out.
Do let me know in case more help required.

First remove the height of ul.nav element and set display property of ul#pri.nav to inline-block.
ul#pri.nav {
margin-left: 0px;
z-index: -1;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
text-decoration: none;
width: 97%;
display: inline-block;
border-bottom: 10px solid rgb(180,221,180);
}

responsive buttons in asp net css

as the title states. I have this popup that I need to be responsive. Right now, when I adjust the window size, the buttons get off the window for some reason. I have used % instead of pixels, still nothing. Anyone got advice?
CSS:
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
font-size: 13px;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
margin-top: 200px;
padding: 20px;
border: 2px solid cornflowerblue;
width: 21%;
height: 10.5%;
min-width: 400px;
min-height: 15%;
}
.modalHdr {
margin-left: -1px;
font-size: 20px;
}
.popupConfirm {
border: 1px #aaa;
padding: 10px 82px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin: 20% 2px;
cursor: pointer;
background: lightgrey;
color: black;
}
ASPX:
<div id="myModal" class="modal">
<div class="modal-content">
<h3 class="modalHdr">
<asp:Label runat="server" Text="TRNSLTDelete Contact" />
</h3>
<asp:LinkButton ToolTip="TRNSLTNo" ID="ButtonNo" runat="server" Text="TRNSLTNo" CssClass="popupConfirm" />
<asp:LinkButton OnClick="ButtonYes_OnClick" ToolTip="TRNSLTYes" ID="ButtonYes" runat="server" Text="TRNSLTYes" CssClass="popupConfirm" />
</div>
</div>

Try use VH and VW, https://css-tricks.com/viewport-sized-typography/ and #media screen

ASP CSS Footer issue

Here is how my master page is designed:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<form id="form1" runat="server">
<div id="header">
<h1 class="Title">Title</h1>
<span class="TagLine">tagline</span> </div>
<div id="navigation">
<table>
<tr>
<td><asp:Menu ID="m" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="Home" NavigateUrl="~/Default.aspx"></asp:MenuItem>
</Items>
</asp:Menu></td>
</tr>
</table>
</div>
<div id="body">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="Footer">
<p>footer</p>
</div>
</form>
</div>
</body>
</html>
This is my css:
body {
margin: 20px 20px 20px 20px;
padding: 0;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: darkslategrey;
width: 960px;
background-color: #F8F8FF;
margin: 0;
height: 100%;
position: relative;
}
#container {
min-height: 100%;
position: relative;
height: 100%;
}
#header {
height: 120px;
overflow: hidden;
}
#Content {
margin: 5px;
background-color: #F8F8FF;
overflow: hidden;
}
#Footer {
position: absolute;
background: #F8F8FF;
text-align: center;
}
#header .Title {
color: #2E2E2E;
}
#header h1 {
padding-top: 1em;
background-color: #F8F8FF;
overflow: hidden;
font-size: 170%;
}
h1 {
padding-top: 1em;
background-color: #F8F8FF;
overflow: hidden;
font-size: 100%;
}
#header .TagLine {
color: #2E2E2E;
}
.Menu li {
display: inline;
margin: 0px;
}
.Menu a {
text-decoration: none;
background-color: #BDBDBD;
padding: 5px;
color: White;
border-right: .5px solid White;
margin: 0px;
}
.Menu a:hover {
background-color: #BDBDBD;
padding: 5px;
margin: 0px;
}
.Menu {
text-align: justify;
font-size: 25px;
}
.menuhover {
color: #fff;
}
Here are issues I am not able to figure:
I am trying to stick footer at bottom, but such a
way that if page has lot of content that should still work.
Center align whole page and master page

Updated : Try this
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<form id="form1" runat="server">
<div id="header">
<h1 class="Title">Title</h1>
<span class="TagLine">tagline</span>
</div>
<div id="navigation">
<table cellpadding="0" cellspacing="0" width="1000" align="center">
<tr>
<td>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="Menu" Font-Names="Verdana" ForeColor="Black" Width="800px">
<staticmenuitemstyle height="40px" />
<dynamicmenuitemstyle cssclass="Menu" height="40px" horizontalpadding="25px" />
<dynamichoverstyle cssclass="menuhover" />
<statichoverstyle cssclass="menuhover" />
<items>
<asp:menuitem text="Home" navigateurl="~/Default.aspx"></asp:menuitem>
</items>
</asp:Menu>
</td>
</tr>
</table>
</div>
<div id="body">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<!-- Page-specific content will go here... -->
</asp:ContentPlaceHolder>
</div>
<div id="Footer">
<p>footer</p>
</div>
</form>
</div>
</body>
</html>
CSS:
<style type="text/css">
body {
margin: 20px 20px 20px 20px;
padding: 0;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: darkslategrey;
width: 960px;
background-color: #F8F8FF;
margin: auto;
padding:auto;
height: 100%;
position: relative;
}
#container {
min-height: 100%;
position: relative;
height: 100%;
}
#body {
padding: 10px;
}
#header {
margin: 10px 10px 0px 10px;
height: 120px;
overflow: hidden;
}
#Content {
padding-top: 1em;
margin: 5px;
background-color: #F8F8FF;
overflow: hidden;
}
#Footer {
position: fixed;
background: #F8F8FF;
text-align: center;
bottom:0px;
}
#header .Title {
color: #2E2E2E;
}
#header h1 {
margin:0px;
padding:0px;
background-color: #F8F8FF;
overflow: hidden;
font-size: 170%;
}
h1 {
padding:0px;
margin:0px;
background-color: #F8F8FF;
overflow: hidden;
font-size: 100%;
}
#header .TagLine {
color: #2E2E2E;
}
.Menu li {
display: inline;
margin: 0px;
}
.Menu a {
text-decoration: none;
background-color: #BDBDBD;
padding: 5px;
color: White;
border-right: .5px solid White;
margin: 0px;
}
.Menu a:hover {
background-color: #BDBDBD;
padding: 5px;
margin: 0px;
}
.Menu {
text-align: justify;
font-size: 25px;
}
.menuhover {
color: #fff;
}
</style>

I have figure out your spacing issue.
spacing issue is related to line-height. You will set line height for h1
header h1 {
padding-top: 1em;
background-color: #F8F8FF;
overflow: hidden;
font-size: 170%;
line-height: 21px;
}
Same issue with content and navigation menu.
Sticky footer : You will add position: fixed; and bottom:0;
Center align whole page and master page. You will add two more property in body css
body {
margin: 0 auto;
width: 80%;
}

ASP.NET Menu Spacing Issue with Drop Down Arrow

I have an ASP.NET menu and for the items that contain a drop down menu, it displays an arrow in a new <td>, the problem is the spacing is horrible. How do i tap into that <TD> or lessen the spacing between the menu text and Arrow?
Screenshot of menu issue:
HTML Output:
<td style="white-space:nowrap;">
<a class="ctl00_itemMenu_1 StaticMenuItemStyle ctl00_itemMenu_3" style="border-style:none;font-size:1em;" href="Default.aspx"> Home </a>
</td>
<td style="width:0;">
<img style="border-style:none;vertical-align:middle;" alt="Expand Home" src="Images/menu_arrow.gif">
</td>
Menu Control:
<asp:Menu ID="itemMenu" SkinID="MenuSkin" runat="server" Orientation="Horizontal"
CssClass="menu" DynamicItemFormatString=" {0} " StaticItemFormatString=" {0} "
StaticEnableDefaultPopOutImage="true" StaticPopOutImageUrl="~/Images/menu_arrow.gif"
DynamicPopOutImageUrl="~/Images/menu_arrow_dynamic.gif" DynamicEnableDefaultPopOutImage="true"
MaximumDynamicDisplayLevels="5">
<StaticMenuStyle CssClass="StaticMenuStyle" />
<StaticMenuItemStyle Width="100%" CssClass="StaticMenuItemStyle" />
<StaticHoverStyle CssClass="StaticHoverStyle" />
<DynamicMenuStyle CssClass="DynamicMenuStyle" />
<DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" Width="100%" />
<DynamicHoverStyle CssClass="DynamicHoverStyle" />
</asp:Menu>
CSS:
.menu
{
padding: 0px 0px 0px 7px;
margin:0px;
}
.StaticMenuStyle a, .StaticMenuStyle a:visited, .StaticMenuStyle a:active, .StaticMenuStyle a:hover
{
color: #ffffff;
text-decoration: none;
padding: 3px 9px 3px 9px;
height: 100%;
display: table;
font-weight: bold;
font-family: Tahoma, Arial;
}
.DynamicMenuStyle a, .DynamicMenuStyle a:visited, .DynamicMenuStyle a:active, .DynamicMenuStyle a:hover
{
color: #ffffff;
text-decoration: none;
padding: 7px 9px 7px 9px;
width: 100%;
height: 100%;
display: table;
font-weight: bold;
font-family: Tahoma, Arial;
}
.StaticMenuStyle td
{
font-weight: normal;
height: 100%;
font-size: 11px;
border-collapse: collapse;
/*cursor: pointer;*/
}
.DynamicMenuStyle table
{
border-collapse: collapse;
border-spacing: 0px;
}
.DynamicMenuStyle td
{
border: solid 1px #ffffff;
font-weight: normal;
width: 100%;
height: 100%;
/*cursor: pointer;*/
background-color: #333333;
border-collapse: collapse;
border-spacing: 0px;
font-size: 11px;
}
.DynamicMenuStyle td table tr td
{
border: solid 0px #ffffff;
padding: 7px 4px;
}
.StaticMenuItemStyle td
{
padding: 7px 0px 7px 0px;
border: 0px solid #ffffff;
font-weight: normal;
text-align: left;
}
.StaticHoverStyle td, .DynamicHoverStyle td
{
background-color: #5c5c5c;
font-weight: bold;
}
.StaticSelectedStyle, .DynamicSelectedStyle
{
font-weight: normal;
cursor: pointer;
}

Menu item fail to show what is in CSS

<td class="style22" align="center">
<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>
</td>
<td align="center">
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;
}

It is because your .Net Framework renders asp:MenuItem as Table.
You can change the renderingmode to list and the problem will be solved.
To change your renderingMode you must add:
RenderingMode="List"
to <Asp:Menu>Tag Like This:
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" RenderingMode="List">

change div.menu to .menu
.menu
{
padding: 4px 0px 4px 8px;
}
.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
.menu ul li a, .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;
}
.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

ASP.NET Flicker in IE - c#

Instead of displaying an image as the background and menu, I changed for css linear-gradient and there's no flickering anymore. Looks like a IE cache problem.

Related

how to position menu list items on top of a bar?

responsive buttons in asp net css

ASP CSS Footer issue

ASP.NET Menu Spacing Issue with Drop Down Arrow

Menu item fail to show what is in CSS

Categories

Resources