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.