Home/ Questions/Q 8292175
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T13:23:01+00:00

I’m new into developping an asp.net website and when I navigate from page to

  • 0

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>
                    [ <a href="http://www.flofab.com/partners.asp" ID="HeadLoginStatus" runat="server">Partner Login</a> ]
                </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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0