I wrote the following code to create a button on page dynamically and once the user click on it it set the text value of a Label. By putting a breakpoint inside the Dynamiclbutton_Click I can see that click function is being called and label text is being set, but on page no value is set for the Label.
I tried this by dragging and dropping a button from toolbox and double clicking on it for the onlick function to be created by VS 2010, and when the user click on that declarative Button the page is getting refreshed and the new value of Label is being shown.
What additional thing I need to do for dynamic Button for it to behave like a declarative one? I need the user can click on dynamic button and label gets new value. what is missing?
public partial class CPIAbstracting : System.Web.UI.Page
{
protected override void OnInit(EventArgs e)
{
placeHolder2.Controls.Add(new LiteralControl("</br>"));
Button DynamicButton = new Button();
DynamicButton.Text = "test";
DynamicButton.Click += new EventHandler(Dynamiclbutton_Click);
placeHolder2.Controls.Add(DynamicButton);
}
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Dynamiclbutton_Click(object sender, EventArgs e)
{
Label1.Text = "Dynamic button is clicked";
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Static button is clicked";
}
}
ASPX :
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="CPIAbstracting.aspx.cs" Inherits="MED2020.WinRecs.Web.Sandbox.CPIAbstracting" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
.accordion1 {
}
.accordionHeader1 {
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 14px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionHeaderSelected1 {
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent1 {
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
font-family: Arial, Sans-Serif;
font-size: 10px;
font-weight: bold;
}
.ApplicationDefault {font-family: Verdana; font-size: 10px;}
.Title {text-align: center; font-size: 12px; font-family:
Verdana; font-weight: bold;}
.AuthorInformation {text-align: center; color:green; margin-top: 5px}
.MainContent {
text-align: center;font-family: Verdana; font-size: small;
}
.Copyright {margin-top: 10px; color: Gray; font-weight:bold; width: 100%;
float: left; text-align: center;}
.ErrorText {font-family: Verdana; font-weight: bold; color:Maroon;}
.BoldText {font-family: Verdana; font-weight: bold;}
.style1
{
width: 100%;
}
.style3
{
width: 240px;
}
.style4
{
width: 882px;
}
.style10
{
height: 168px;
}
.style11
{
width: 882px;
height: 168px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ApplicationContent" runat="server">
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Accordion ID="Accordion1" CssClass="accordion1"
HeaderCssClass="accordionHeader1"
HeaderSelectedCssClass="accordionHeaderSelected1" ContentCssClass="accordionContent1"
runat="server" Height="232px" Width="402px"> </asp:Accordion>
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="False"
UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder id="placeHolder2" runat="server"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder id="ph3" runat="server"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</asp:Content>
The problem is that your dynamically added button is inside an UpdatePanel, while the Label is outside of it. I don't know what your scenario is, but you need to have both controls inside UpdatePanel(s) and set the triggers correctly.
See this related question:
Change text in TextBox outside of UpdatePanel
Related
I have two update panel which I triggered in javascript. After I run the code, only the second Panel's content is updated. Here is MyCode.
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="display: normal">
<asp:Button ID="PaperContent_Button1" runat="server" Text="Update box Panel" OnClick="LoadPaperData" />
</div>
<div class="ibox-content_v2" style="height: 150px;">
<div style="display: inline; height: 100px; float: right; max-width: 70%; min-width: 165px; width: 70%">
<asp:Label ID="uiBox1Value" runat="server" Style="font-size: 30px; font-weight: 600; color: #002467" />
<asp:Label ID="uiBox1Unit" runat="server" Style="font-size: 13px; font-weight: 600; color: #002467" />
</div>
<div id="uiBox1TargetPanel" runat="server" onmouseover="document.getElementById('ContentPlaceHolder1_uiBox1Popup').style.visibility = 'visible';" onmouseout="document.getElementById('ContentPlaceHolder1_uiBox1Popup').style.visibility = 'hidden';">
<div id="uiBox1Popup" runat="server" style="float: left; position: relative; top: -50px; visibility: hidden; width: 100%; height: 40px; text-align: center; border-width: 1px; border-style: solid; border-color: #D2D9E3; background-color: #F2F3F6; font-size: 13px; font-weight: 600; padding-top: 10px;">
<asp:Label ID="uiBox1TargetLabel" runat="server" />:
<asp:Image ID="uiBox1TargetUpOrDownImage" runat="server" Width="6" Height="9" Style="margin-right: 5px; margin-bottom: 4px;" ImageUrl="images/ico_arrow_xs_r_up.png" />
<asp:Label ID="uiBox1TargetValue" runat="server" />%
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="display: normal">
<asp:Button ID="WaterContent_Button1" runat="server" Text="Update box Panel" OnClick="LoadWaterData" />
</div>
<div class="ibox-content_v2" style="height: 150px;">
<div style="display: inline; height: 100px; float: right; max-width: 70%; min-width: 165px; width: 70%">
<asp:Label ID="uiBox2Value" runat="server" Style="font-size: 30px; font-weight: 600; color: #002467" />
<asp:Label ID="uiBox2Unit" runat="server" Style="font-size: 13px; font-weight: 600; color: #002467" />
</div>
<div id="uiBox2TargetPanel" runat="server" onmouseover="document.getElementById('ContentPlaceHolder1_uiBox2Popup').style.visibility = 'visible';" onmouseout="document.getElementById('ContentPlaceHolder1_uiBox2Popup').style.visibility = 'hidden';">
<div id="uiBox2Popup" runat="server" style="float: left; position: relative; top: -50px; visibility: hidden; width: 100%; height: 40px; text-align: center; border-width: 1px; border-style: solid; border-color: #D2D9E3; background-color: #F2F3F6; font-size: 13px; font-weight: 600; padding-top: 10px;">
<asp:Label ID="uiBox2TargetLabel" runat="server" />:
<asp:Image ID="uiBox2TargetUpOrDownImage" runat="server" Width="6" Height="9" Style="margin-right: 5px; margin-bottom: 4px;" ImageUrl="images/ico_arrow_xs_r_up.png" />
<asp:Label ID="uiBox2TargetValue" runat="server" />%
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I triggered code behind using javascript, however, after run the code, only the second is updated.
<script>
$(document).ready(function () {
$("#ContentPlaceHolder1_PaperContent_Button1").click();
$("#ContentPlaceHolder1_WaterContent_Button1").click();
});
</script>
But I want both UpdatePanel be updated. What can I do to enable both updatepanel be updated?
If you can, change the UpdateMode of the 2nd panel:
UpdateMode="Always"
then remove the 2nd .click() in the javascript. The 2nd panel should update when the first panel updates (when a postback happens).
If you can't use Always, you can add an OnLoad event to the 2nd panel and move any code you have to that event. When a postback happens the 2nd panel will always reload and the code will fire.
Hth.
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%;
}
I have a GridView with selection enabled. I'd like to programmatically change the style of these links, but I'm not sure how to access them. I've applied CSS to them using the a selector, but I can't do this through the code.
How can I modify the appearance of these buttons using C#?
Try Below Code:
<asp:GridView ID="gvUserInfo" runat="server"
onrowdatabound="gvUserInfo_RowDataBound1">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkButton" runat="server" Text="Link"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
protected void gvUserInfo_RowDataBound1(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton lnk = e.Row.FindControl("lnkButton") as LinkButton;
lnk.ForeColor = System.Drawing.Color.Red;
}
}
Because I grid view is a Table you can use CSS
<html>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="RegNo" DataSourceID="SqlDataSource1" Width="931px" CellPadding="4" ForeColor="#333333" GridLines="None" Height="170px" AutoGenerateDeleteButton="True">
</asp:GridView>
<style>
td > a {
/*button*/
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 4px 8px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/*button color*/
color: #ffffff;
background-color: #c71c22;
border-color: #c71c22;
}
td > a:hover {
color: #555555;
text-decoration: none;
background-color: #9a161a;
border-color: #911419;
}
I'm creating tab using multiview and what I want to do is to close one of the menu tabs when I right click on it.
These are part of the aspx and code behind:
ASPX Page:
<asp:Menu
id="Menu1"
Orientation="Horizontal"
StaticMenuItemStyle-CssClass="tab"
StaticSelectedStyle-CssClass="selectedTab"
CssClass="tabs" width = "100%"
OnMenuItemClick="Menu1_MenuItemClick"
Runat="server" style=" text-align:center;">
</asp:Menu>
<div id="divcont" runat="server" class="tabContents" style="height:100%; width:100%;" visible="false">
<asp:MultiView
id="MultiView1"
ActiveViewIndex="0"
Runat="server">
<asp:View ID="v1" runat="server" >
<iframe id="f1" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v2" runat="server" >
<iframe id="f2" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v3" runat="server" >
<iframe id="f3" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v4" runat="server" >
<iframe id="f4" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v5" runat="server" >
<iframe id="f5" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v6" runat="server" >
<iframe id="f6" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v7" runat="server" >
<iframe id="f7" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v8" runat="server" >
<iframe id="f8" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v9" runat="server" >
<iframe id="f9" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v10" runat="server" >
<iframe id="f10" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
</asp:MultiView>
</div>
Code Behind:
(This is part of the NodeChanged event)
...
...
...
int TabCount = Convert.ToInt32(lblTabCounter.Text.ToString());
int TabIndex = Convert.ToInt32(lblTabCounterIndex.Text.ToString());
if(TabCount <= 10)
{
divcont.Visible = true;
string tabName = getURLName(uRL);
MenuItem myItem = new MenuItem(tabName, TabIndex.ToString());
Menu1.Items.AddAt(TabIndex, myItem);
f1.Attributes.Add("src", lblURL.Text.ToString());
MultiView1.ActiveViewIndex = TabIndex;
TabCount++;
TabIndex++;
lblTabCounter.Text = TabCount.ToString();
lblTabCounterIndex.Text = TabIndex.ToString();
tvPermissions.ExpandAll();
int i = ctr;
}
(This is for the MenuItemClick Event)
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
int index = Int32.Parse(e.Item.Value);
MultiView1.ActiveViewIndex = index;
}
This is the sample output:
The treeview is located in the orange part(left). While the blue one that is the target url that is located in the project. Based from the codes that I provided it will only point out to one frame named "f1" as an example though there are 10 of them. How can I remove a particular tab (say tab "Expenses") when I right click on it?
I want this to be done in the code behind. For javascript/jquery solutions please provide its code behind implementation or how to call/use it from code behind.
Please help me with this. For clarifications please leave a comment.
Thank you!
I tried a different approach. Instead of right click I use double click with confirmation to remove the tab.
I also adapted the user defined JS libraries to catch the double click and add more effects.
I mentioned as well that I already have my JavaScript function to work on this I'm just looking for alternatives other than JavaScript or JQuery. However I'm surprised that I didn't get any response or comments.
Thank you for reading this post.
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.