ZahidKakar
Reputation: 212
ASP.Net application renders differently in IIS Servers
I have deployed a ASP.Net web application in my server on IIS 7.5. It is rendering properly in Firefox and Chrome but not rendering properly in IE 10 or IE 11. When I deployed the same application on my Laptop (development system) IIS Server, it renders properly on IE, Firefox, Chrome and on WebkitBrowser control. So my requirement is to render in WebkitBrowser control I used in a desktop application Form. It is also not rendering properly in WebkitBrowser control. I tried with
<meta http-equiv="X-UA-Compatible" content="IE=8">
but failed. I add dword with
UA-Compatible IE=8, IE=9, IE=10
etc but still out of luck. It is working on my laptop but not working on deployment server. I need to render it on WebkitBrowser control. My grdarea.css class is:
.grdarea
{
float: none;
/*height: 30px;*/
font-size: 14px;
line-height: 0px;
margin: 0 0 0px;
padding: 2px 0;
text-transform: uppercase;
border-radius: 5px;
-webkit-border-radius: 5px;
border: #0e2a3f solid 1px;
color: #FFFFFF;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,0.3);
background: #4d73a0;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNzNhMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMlIiBzdG9wLWNvbG9yPSIjMzY2MzljIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNyUiIHN0b3AtY29sb3I9IiMzNDYxOWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMzMDYwYTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiMyYzVjOWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiMyZDU4OGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0NyUiIHN0b3AtY29sb3I9IiMyODRmODYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NyUiIHN0b3AtY29sb3I9IiMyMzQ1NzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiMxYjNhNjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MyUiIHN0b3AtY29sb3I9IiMxZDNjNmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5NyUiIHN0b3AtY29sb3I9IiMxYzM5NTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWQzYTVhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, #4d73a0 0%, #36639c 3%, #34619a 7%, #3060a0 10%, #2c5c9a 20%, #2d588b 30%, #284f86 47%, #234573 67%, #1b3a68 90%, #1d3c6a 93%, #1c3959 97%, #1d3a5a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d73a0), color-stop(3%, #36639c), color-stop(7%, #34619a), color-stop(10%, #3060a0), color-stop(20%, #2c5c9a), color-stop(30%, #2d588b), color-stop(47%, #284f86), color-stop(67%, #234573), color-stop(90%, #1b3a68), color-stop(93%, #1d3c6a), color-stop(97%, #1c3959), color-stop(100%, #1d3a5a));
background: -webkit-linear-gradient(top, #4d73a0 0%, #36639c 3%, #34619a 7%, #3060a0 10%, #2c5c9a 20%, #2d588b 30%, #284f86 47%, #234573 67%, #1b3a68 90%, #1d3c6a 93%, #1c3959 97%, #1d3a5a 100%);
background: -o-linear-gradient(top, #4d73a0 0%, #36639c 3%, #34619a 7%, #3060a0 10%, #2c5c9a 20%, #2d588b 30%, #284f86 47%, #234573 67%, #1b3a68 90%, #1d3c6a 93%, #1c3959 97%, #1d3a5a 100%);
background: -ms-linear-gradient(top, #4d73a0 0%, #36639c 3%, #34619a 7%, #3060a0 10%, #2c5c9a 20%, #2d588b 30%, #284f86 47%, #234573 67%, #1b3a68 90%, #1d3c6a 93%, #1c3959 97%, #1d3a5a 100%);
background: linear-gradient(to bottom, #4d73a0 0%, #36639c 3%, #34619a 7%, #3060a0 10%, #2c5c9a 20%, #2d588b 30%, #284f86 47%, #234573 67%, #1b3a68 90%, #1d3c6a 93%, #1c3959 97%, #1d3a5a 100%);
}
.grdarea:hover
{
background: #45484d;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA /Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDg0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #45484d 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #45484d), color-stop(100%, #000));
background: -webkit-linear-gradient(top, #45484d 0%, #000 100%);
background: -o-linear-gradient(top, #45484d 0%, #000 100%);
background: -ms-linear-gradient(top, #45484d 0%, #000 100%);
background: linear-gradient(to bottom, #45484d 0%, #000 100%);
}
One of my Page Source Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FrmUserLogin.aspx.cs" Inherits="VisionWebPortal.FrmUserLogin" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Src="MessageBoxUsc/uscMsgBox.ascx" TagName="uscMsgBox" TagPrefix="uc1" %>
<!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 id="Head1" runat="server">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Vision Web Tv</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.main.js"></script>
<script src="js/jquery.movingboxes.js"></script>
<!--[if lt IE 9]><link rel="stylesheet" media="all" href="css/ie.css" type="text/css"/><![endif]-->
<!--[if IE]><script type="text/javascript" src="js/ie.js"></script><![endif]-->
<style>
.CentereObj1 {float:left;width:50%; height :400px; margin-left:10px; margin-right:auto; margin-top :30px; }
.tbl
{
width:50%; border-collapse: collapse; margin-top:85px;margin-left:20px;
}
.tbl td{border: none
}
.tbl th{border: none}
.col
{
}
.topMargin{ margin-top:50px;}
.TextBoxes{margin:20px 0 20px 0; }
.LeftF{ float :left ;}
.CenterF { margin:0 auto;}
</style>
</head>
<body >
<div id="wrapper">
<header id="header">
<h1 class="logo"><a href="#"></a></h1>
<div class="header-holder"></div>
</header>
<form id="form1" runat="server">
<AjaxControls:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true"
EnableScriptLocalization="true">
</AjaxControls:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table class ="tbl" >
<tr>
<td colspan="3">
</td>
<td colspan="3">
</td>
</tr>
<tr>
<td colspan="6">
<div class ="LeftF">
<asp:Label ID="Label3" runat="server" Text="SIGN IN "
Font-Bold="True" Font-Size="Larger" Font-Underline="True"></asp:Label>
<asp:Label
ID="Label4" runat="server"
Text=" Welcome to Vision Web TV!" Font-Bold="True"
Font-Underline="False"></asp:Label>
</div>
</td>
</tr>
<tr>
<td class="style5">
<div class ="LeftF">
<asp:TextBox ID="username" runat="server" Height="25px" Width="250px"></asp:TextBox>
<ajaxToolkit:RoundedCornersExtender ID="rce" runat="server" Corners="All"
Radius="15" TargetControlID="username" />
</div>
</td>
<td class="style7">
<div class ="LeftF">
<asp:CheckBox ID="chkRememberMe" runat="server" Text="Remember Password?"
TabIndex="3" />
</div>
</td>
<td class="style2" colspan="2">
</td>
<td class="style2">
<asp:Label ID="Label1" runat="server" Visible="False"></asp:Label>
</td>
<td class="style1">
</td>
</tr>
<tr>
<td class="style5">
<div class ="LeftF">
<asp:TextBox ID="passwd" runat="server" Height="25px" TextMode="Password"
Width="250px" TabIndex="1"></asp:TextBox>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server"
TargetControlID="passwd"
Radius="15"
Corners="All" />
</div>
</td>
<td class="style7">
<div class="LeftF">
<a href="#">Forgot your password </a>
</div>
</td>
<td class="style2" colspan="2">
</td>
<td class="style2">
</td>
<td class="style1">
</td>
</tr>
<tr>
<td class="style5">
<div class ="LeftF">
<asp:Button ID="Button1" runat="server" BackColor="#999999" CssClass="grdarea"
Font-Size="Large" ForeColor="Black" Height="30px" onclick="Button1_Click"
Text="GO!" Width="250px" TabIndex="2" />
</div>
</td>
<td class="style7">
</td>
<td class="style2" colspan="2">
</td>
<td class="style2">
</td>
<td class="style1">
</td>
</tr>
<tr>
<td class="style5">
<div class="LeftF">
<a href="FrmUserRegis.aspx">New User Register Here</a>
</div>
</td>
<td class="style7">
</td>
<td class="style2" colspan="2">
</td>
<td class="style2">
</td>
<td class="style1">
</td>
</tr>
<tr>
<td class="style5" colspan="6">
<asp:Label ID="Label2" runat="server" BackColor="#990000" Font-Bold="False"
Font-Size="Small" ForeColor="White"
Text="System Message| Can be viewed best in 1024x768 resolution, for any query please call at 111-000-222. "
Width="100%"></asp:Label>
</br>
</td>
</tr>
</table>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
<uc1:uscMsgBox ID="uscMsgBox1" runat="server" />
</form>
</div>
</body>
</html>
The Button1 in this case is not rendered properly in IE while renders ok in Chrome and Firefox.
Upvotes: 3
Views: 7124
Answers (3)
Sameera Pathirannehelage
Reputation: 1
Try this. Add this line of code to _Layout.cshtml
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Upvotes: 0
Issac
Reputation: 963
Had some strage problems with IE 10,11 on pages containing ajaxControlToolkit controls. solved it by adding ie.browser file to the App_Browsers folder of my asp.net application with the following content:
<browsers>
<!-- Mozilla/5.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4325) -->
<browser id="IE6Plus" parentID="IE">
<identification>
<capability name="majorversion" match="^[6-9]|\d{2,}$" />
</identification>
<capabilities>
<capability name="ecmascriptversion" value="3.0" />
<capability name="jscriptversion" value="5.6" />
<capability name="javascript" value="true" />
<capability name="javascriptversion" value="1.5" />
<capability name="msdomversion" value="${majorversion}.${minorversion}" />
<capability name="w3cdomversion" value="1.0" />
<capability name="ExchangeOmaSupported" value="true" />
<capability name="activexcontrols" value="true" />
<capability name="backgroundsounds" value="true" />
<capability name="cookies" value="true" />
<capability name="frames" value="true" />
<capability name="javaapplets" value="true" />
<capability name="supportsCallback" value="true" />
<capability name="supportsFileUpload" value="true" />
<capability name="supportsMultilineTextBoxDisplay" value="true" />
<capability name="supportsMaintainScrollPositionOnPostback" value="true" />
<capability name="supportsVCard" value="true" />
<capability name="supportsXmlHttp" value="true" />
<capability name="tables" value="true" />
<capability name="supportsAccessKeyAttribute" value="true" />
<capability name="tagwriter" value="System.Web.UI.HtmlTextWriter" />
<capability name="vbscript" value="true" />
</capabilities>
</browser>
<!-- Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0;) -->
<browser id="IE6to9" parentID="IE6Plus">
<identification>
<capability name="majorversion" match="^[6-9]$" />
</identification>
</browser>
<!-- Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0;) -->
<browser id="IE7" parentID="IE6to9">
<identification>
<capability name="majorversion" match="^7$" />
</identification>
<capabilities>
<capability name="jscriptversion" value="5.7" />
</capabilities>
</browser>
<!-- Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729) -->
<browser id="IE8" parentID="IE6to9">
<identification>
<capability name="majorversion" match="^8$" />
</identification>
<capabilities>
<capability name="jscriptversion" value="6.0" />
</capabilities>
</browser>
<!-- Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729) -->
<browser id="IE9" parentID="IE6to9">
<identification>
<capability name="majorversion" match="^9$" />
</identification>
<capabilities>
<capability name="jscriptversion" value="6.0" />
</capabilities>
</browser>
<!-- Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0) -->
<browser id="IE10Plus" parentID="IE6Plus">
<identification>
<capability name="majorversion" match="\d{2,}" />
</identification>
<capabilities>
<capability name="jscriptversion" value="6.0" />
</capabilities>
</browser>
<browser id="IE11" parentID="Mozilla">
<identification>
<userAgent match="Trident/(?'layoutVersion'[7-9]|0*[1-9]\d+)(\.\d+)?;(.*;)?\s*rv:(?'version'(?'major'\d+)(\.(?'minor'\d+)))" />
<userAgent nonMatch="IEMobile" />
</identification>
<capture>
<userAgent match="Trident/(?'layoutVersion'\d+)" />
</capture>
<capabilities>
<capability name="browser" value="IE" />
<capability name="layoutEngine" value="Trident" />
<capability name="layoutEngineVersion" value="${layoutVersion}" />
<capability name="extra" value="${extra}" />
<capability name="isColor" value="true" />
<capability name="letters" value="${letters}" />
<capability name="majorversion" value="${major}" />
<capability name="minorversion" value="${minor}" />
<capability name="screenBitDepth" value="8" />
<capability name="type" value="IE${major}" />
<capability name="version" value="${version}" />
</capabilities>
</browser>
<!-- Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11,0) like Gecko -->
<browser id="IE110" parentID="IE11">
<identification>
<capability name="majorversion" match="11" />
</identification>
<capabilities>
<capability name="ecmascriptversion" value="3.0" />
<capability name="jscriptversion" value="5.6" />
<capability name="javascript" value="true" />
<capability name="javascriptversion" value="1.5" />
<capability name="msdomversion" value="${majorversion}.${minorversion}" />
<capability name="w3cdomversion" value="1.0" />
<capability name="ExchangeOmaSupported" value="true" />
<capability name="activexcontrols" value="true" />
<capability name="backgroundsounds" value="true" />
<capability name="cookies" value="true" />
<capability name="frames" value="true" />
<capability name="javaapplets" value="true" />
<capability name="supportsCallback" value="true" />
<capability name="supportsFileUpload" value="true" />
<capability name="supportsMultilineTextBoxDisplay" value="true" />
<capability name="supportsMaintainScrollPositionOnPostback" value="true" />
<capability name="supportsVCard" value="true" />
<capability name="supportsXmlHttp" value="true" />
<capability name="tables" value="true" />
<capability name="supportsAccessKeyAttribute" value="true" />
<capability name="tagwriter" value="System.Web.UI.HtmlTextWriter" />
<capability name="vbscript" value="true" />
</capabilities>
</browser>
<gateway id="IEbeta" parentID="IE">
<identification>
<capability name="letters" match="^([bB]|ab)" />
</identification>
<capture>
</capture>
<capabilities>
<capability name="beta" value="true" />
</capabilities>
</gateway>
</browsers>
Upvotes: 0
steve cook
Reputation: 3214
Assuming the same IE installation works for your local server, but not for the production one, I'm thinking that this is most likely a deployment issue.
Some typical problems with a production IIS configuration could be:
- It is missing some files
- It is missing some authorisation on those files (ie. you have a web.config that doesn't authorise anonymous users to download) - check prod vs. test web.configs authorisation/authentication sections
- Your Windows IIS app pool login doesn't have file-level read access to some of the files in your deployment (check file properties, security for all the files on your deployment)
- It is missing some file extensions
If its the format that is screwed, most likely the missing file is a .css or .js file.
One way to track this down is via the browser tools (F12). You can open the 'network tab' and start tracing, then open the page. If you start to see HTTP 4xx or 5xx errors for some of the linked files, most likely it's one of the issues above.
Upvotes: 1
Related Questions
- ASP.NET website looks different when deployed
- CSS Rendering differently on server than local
- Why does my web page render differently coming from my web server vs VS2010's web server?
- .net website in iis7 not rendering correctly on one server but is fine on another
- ASPX page renders differently when reached on intranet vs. internet?
- ASP.NET - HTML page looks different when started by Visual Studio then started outside of it
- ASP.NET Pages Not Rendering Correctly
- ASP.NET pages look different locally vs on server
- deployed application appears different in IE8
- ASP.NET website looks different when deployed