Click here to Skip to main content
15,889,808 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
im created this login page with lots of css and html
its working fine in chrome but not working in internet explorer 9


i want to run this web page only in I.E.9

so plz help me out from this.


my code is here-

What I have tried:

<%@ Page Language="C#" MasterPageFile="~/PageFrameworkBase.master" AutoEventWireup="true"
    CodeFile="VAuthLogin.aspx.cs" Inherits="VAuthLogin" Title="Login" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContents" runat="Server">
    <link href="./css/Login.css" rel="stylesheet" type="text/css" />
   
    <style type="text/css">
        h1
        {
            font-weight: bold;
            font-size: small;
            margin-bottom: 10px;
        }
     
        
        .UIContainer
        {
             background:rgba(255,255,255,.7);
             border-bottom-style:ridge;
             border-color:Blue;
           
        }
        
     .textc
     {
     	border:2px solid #456879;
	border-radius:10px;
	height: 22px;
	width: 230px;
     }
     
     .tb10 {
	background-image:url( "App_Themes/default/buttons/form_bg.jpg" );
	background-repeat:repeat-x;
	border:1px solid #d1c7ac;
	width: 160px;
	height:20px;
	color:#333333;
	padding:3px;
	margin-right:4px;
	margin-bottom:8px;
	font-family:tahoma, arial, sans-serif;
	
}

.colorgraph {
  height: 7px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);

}

.BG
{
	background-size:100% 100%;
	background-repeat:no-repeat;
	
}

    </style>

</asp:Content>
<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="ClientScriptContent">

    <script type="text/javascript">
    
        if (self.top != self) { self.top.location = self.location.toString().split("?")[0]; }
//        $(document.body).addClass("TM-WaterMark");

        $(window).load(function() {
            AlignUI();
            $(window).resize(AlignUI);
            $("#RootPanel").css({ "visibility": "visible", "display": "none" }).fadeIn("slow");
        });
        function AlignUI() {
            $("#RootPanel").height($(window).height());
            var left = ($("#RootPanel").innerWidth() - $("div#UIContainer").outerWidth()) / 2;
            var top = ($("#RootPanel").innerHeight() - $("div#UIContainer").outerHeight()) / 2;
            $("div#UIContainer").css({ 'top': (top + "px"), 'left': (left + "px") });
          
        }
        function PrepareModuleList() {
            $("#ModulesList li input:[id$='BTN_Select']").button();
            $("#ModulesList li").dblclick(function() {
                $("input:[id$='BTN_Select']", this).click();
            });
            $("#ModulesList li").hover(
                function() {
                    $("span.desc", this).fadeIn();
                },
                function() {
                    $("span.desc", this).fadeOut();
                }
            );
        }
        function ConfirmLogout(Mesg) {
            if (ConfirmRedirect(Mesg)) {
                Logout(function(result) {
                    alert(result);
                    window.location.reload();
                });
            }
        }
        function Logout(CallBack) {
            AjaxRequestManager.AsyncModeOn = false;
            AjaxRequestManager.ExecuteWebMethod("Logout", new Array(), CallBack);
        }
        
             var images = ["1.jpg", "2.jpg", "3.jpg"];
        $(function() {
            var i = 0;
            $("#RootPanel").css("background-image", "url(App_Themes/default/buttons/" + images[i] + ")");
            setInterval(function() {
                i++;
                if (i == images.length) {
                    i = 0;
                }
                $("#RootPanel").fadeTo("fast", function() {
                    $(this).css("background-image", "url(App_Themes/default/buttons/" + images[i] + ")");
                    $(this).fadeIn("fast");
                });
            }, 5000);
        });


    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageContents" runat="Server">

    <div id="RootPanel" class="BG">
   
        <h2 id="Welcome" class="Highlight">
            <asp:Literal ID="WelcomeHeader" runat="server"></asp:Literal></h2>
            
        <div id="UIContainer" >
      
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
             
                <ContentTemplate>
                
                    <asp:MultiView ID="MV_Root" runat="server" ActiveViewIndex="0">
                   
                        <asp:View ID="VW_LoginPrompt" runat="server">
                         
                        <label style="font-size: x-large; font-family: Georgia; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; color: #FF3300">Login</label>
                       
                        
                        <hr class="colorgraph"><br>
                            <table style="margin: 0px auto;">
                              <tr><td>
     
   </td></tr>
                                <tr>
                                    <td style="text-align: right; font-family:Century Gothic;font-size:medium" >
                                        User Name :
                                    </td>
                                    <td>
                                        <asp:TextBox ID="TXT_UserName" runat="server" CssClass="tb10" Font-Size="Small" ></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="RFV_UserName" runat="server" ControlToValidate="TXT_UserName"
                                            SetFocusOnError="true" Text="*" ErrorMessage="User Name cannot be Empty!" ValidationGroup="LOGIN"></asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right;font-family:Century Gothic;font-size:medium">
                                        Password :
                                    </td>
                                    <td style="text-align: left">
                                        <asp:TextBox ID="TXT_Password" runat="server" TextMode="Password" CssClass="tb10" Font-Size="Small"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="RFV_Password" runat="server" ControlToValidate="TXT_Password"
                                            SetFocusOnError="true" Text="*" ErrorMessage="Password cannot be Empty!" ValidationGroup="LOGIN"></asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right;font-family:Century Gothic;font-size:medium">
                                        Company :
                                    </td>
                                    <td style="text-align: left">
                                        <asp:DropDownList ID="ddlcompany" runat="server"  DataTextField="CompanyName" DataValueField="CompanyID" Font-Size="Small">
                                        </asp:DropDownList>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" style="height: 5px;">
                                        <asp:ValidationSummary ID="VS_Login" runat="server" ValidationGroup="LOGIN" ShowMessageBox="true"
                                            ShowSummary="false" />
                                    </td>
                                </tr>
                               
                                <tr>
                                    <td>
                                        <asp:CheckBox ID="CHK_Remember" runat="server" Text="Remember Me" />
                                    </td>
                                    <br >
                                    
                                    <td style="text-align: right">
                                        <asp:Button ID="BTN_Login" runat="server" OnClick="BTN_Login_Click" Text="Sign In"
                                            ValidationGroup="LOGIN" SkinID="BtnLogIn" BackColor="White" Font-Bold="True" Height="24" Width="68" />
                                    </td>
                                </tr>
                            </table>
                        </asp:View>
                        <asp:View ID="VW_CBYMapping" runat="server">
                            <center>
                                <h1>
                                    <asp:Literal ID="ltrlcomp" runat="server"></asp:Literal></h1>
                            </center>
                            <div style="height: 300px; overflow: scroll; width: 800px; margin: auto;">
                                <asp:GridView ID="GV_CBMappings" runat="server" AutoGenerateColumns="false" DataKeyNames="BranchId"
                                    OnRowCreated="GV_CBMappings_RowCreated" OnSelectedIndexChanged="GV_CBMappings_SelectedIndexChanged"
                                    OnRowDataBound="GV_CBMappings_RowDataBound" Style="margin: 0px auto;">
                                    <Columns>
                                        <asp:TemplateField HeaderText="Branch">
                                            <ItemTemplate>
                                                <%# Eval("BranchName")%>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Financial Year">
                                            <ItemTemplate>
                                                <asp:DropDownList ID="DDL_FYear" runat="server" Enabled='<%# Eval("IsSelecatble") %>'>
                                                </asp:DropDownList>
                                                <asp:RequiredFieldValidator ID="RFV_FYear" runat="server" ControlToValidate="DDL_FYear"
                                                    InitialValue="0" ErrorMessage="Please Select Finacial Year!" Text="*" SetFocusOnError="true"></asp:RequiredFieldValidator>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Select">
                                            <ItemTemplate>
                                                <asp:Button ID="BTN_Select" runat="server" Text="«" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>'
                                                    Enabled='<%# Eval("IsSelecatble") %>' CausesValidation="true" />
                                                <asp:ValidationSummary ID="VS_CBY" runat="server" ShowMessageBox="true" ShowSummary="false" />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                    <SelectedRowStyle CssClass="Selected" />
                                    
                                </asp:GridView>
                            </div>
                        </asp:View>
                    </asp:MultiView>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        <div id="LogoffDiv" class="Highlight">
            <asp:LinkButton ID="BTN_LogOut" runat="server" SkinID="BtnLogOff" OnClientClick="javascript:ConfirmLogout('Are You sure want to Logoff?'); return false;"
                ToolTip="Logout from System" Text="Logout" />
        </div>
    </div>
</asp:Content>


<%--   div#RootPanel
        {
        	background-image:url( "App_Themes/default/buttons/intro-bg4_bright.jpg" );
          
            
            
        }
       --%>
Posted
Updated 21-Nov-17 22:51pm
v2
Comments
Richard MacCutchan 28-Apr-17 6:34am    
So what is the problem?
Member 13158185 28-Apr-17 6:43am    
background of my login page contain 3 images that changes dynamically...but its not supported in I.E.9 .....ITS WORKING fine in chrome.
Richard MacCutchan 28-Apr-17 6:45am    
Id it's not supported in IE 9 (which is very old) then there is not much you can do.
Member 13158185 28-Apr-17 6:51am    
there is no other solution for backgroung images changed dynamically that support in I.E.9
Richard MacCutchan 28-Apr-17 6:52am    
IE9 is very old so it is unlikely that you can do anything to make it work with modern features.

1 solution

Hello

Add this code in header and try once and in your file i seen -web-kit using that is not works in IE sometimes you need to write separate CSS for IE 9 above versions ....

<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900