When running on dev server through VS 2010 all CSS displays properly. I publish to win server 2008 r2 with IIS 7, and when I open in IE 9 the inline-block doesnt work, the gradients dont work, and the box-shadow doesnt work. It strips out most of the CSS formatting, I load the same page in firefox and it looks the same as it does in IE 9 under the dev server. Code below:
CSS file:
body {
}
#opsChartContainer
{
background: #FFFFFF;
margin: auto;
width: 600px;
padding-top: 15px;
font-family: helvetica, arial, sans-serif;
display: inline-table;
}
#oldestActiveCon
{
background: #FFFFFF;
margin: auto;
width: 300px;
padding-top: 15px;
font-family: helvetica, arial, sans-serif;
display: inline-table;
}
#incVolumeCon
{
background: #FFFFFF;
margin: auto;
width: 700px;
padding-top: 15px;
font-family: helvetica, arial, sans-serif;
display: inline-table;
}
#reqSLACon
{
background: #FFFFFF;
margin: auto;
width: 400px;
padding-top: 15px;
font-family: helvetica, arial, sans-serif;
display: inline-table;
}
h1
{
background: #e3e3e3;
background: -moz-linear-gradient(top, #fcfdfe, #8bb7e3);
background: -webkit-gradient(linear, left top, left bottom, from(#fcfdfe), to(#8bb7e3));
padding: 10px 20px;
margin-left: -20px;
margin-top: 0;
position: relative;
width: 70%;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
box-shadow: 3px 3px 3px #292929;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fcfdfe, endColorstr=#8bb7e3)";
color: #454545;
text-shadow: 0 1px 0 white;
font-size: small;
font-weight: bold;
}
h2
{
background: #dde3d5;
padding: 10px 20px;
margin-left: 5px;
margin-top: 10px;
position: relative;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
box-shadow: 3px 3px 3px #b5baae;
color: #454545;
text-shadow: 0 1px 0 white;
font-size: small;
font-style: normal;
}
.mGrid {
width: 100%;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse:collapse;
}
.mGrid td {
padding: 2px;
}
.header
{
padding: 4px 2px;
color: #ffffff;
background: #4289c6 url('../grd_head.png') repeat-x top;
}
.alt
{
background: #FFFFFF url('../grd_alt.png') repeat-x top;
font-size: smaller;
font-family: Arial;
font-style: normal;
}
.rst
{
background: #FFFFFF url('../grd_firstt.png') repeat-x top;
font-size: smaller;
font-family: Arial;
font-style: normal;
}
ul#testy li
{
list-style-type: none;
display: inline-block;
vertical-align: top;
padding-left: 50px;
}
ASPX front end:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="test.test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="opsChartContainer"><h1>TEXT</h1><h2>FLASHFILE</h2></div>
<div id="oldestActiveCon"><h1>TEXT</h1>
<h2>
<asp:GridView ID="GridView1" runat="server" CellPadding="4"
ForeColor="#333333"
GridLines="None" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Width="200px">
<AlternatingRowStyle CssClass="alt" />
<Columns>
<asp:BoundField DataField="Status" HeaderText="Status"
SortExpression="Status" />
<asp:BoundField DataField="Team" HeaderText="Team" SortExpression="Team" />
<asp:BoundField DataField="Time" HeaderText="Time" ReadOnly="True"
SortExpression="Time" />
<asp:TemplateField HeaderText="Request ID">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" Target="_blank" NavigateUrl='<% # "link"+ Eval("Request") + "&"%>'><%#Eval("Request")%></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle CssClass="header" />
<RowStyle CssClass="rst"></RowStyle>
</asp:GridView>
</h2>
</div>
<div id="incVolumeCon">
<h1>text</h1>
<h2>
flashfile
</h2>
</div>
<div id="reqSLACon">
<h1> text</h1>
<h2>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
DataSourceID="blahblah" CellPadding="4" ForeColor="#333333"
GridLines="None" CssClass="mGrid" AlternatingRowStyle-CssClass="alt" RowStyle-CssClass="rst" Width = "400">
<Columns>
<asp:BoundField DataField="text" HeaderText="text" ReadOnly="True"
SortExpression="text" />
<asp:BoundField DataField="Dueby Time" HeaderText="text" ReadOnly="True"
SortExpression="text" />
<asp:BoundField DataField="text" HeaderText="text"
ReadOnly="True" SortExpression="text" />
<asp:BoundField DataField="text" HeaderText="text"
ReadOnly="True" SortExpression="text" />
<asp:BoundField DataField="Expr1" HeaderText="text" ReadOnly="True"
SortExpression="Expr1" />
<asp:TemplateField HeaderText="Request ID" >
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" Target="_blank" NavigateUrl='<%# "link"+ Eval("Request ID") + "&"%>'><%#Eval("Request ID")%></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
test
</h2>
</div>
ANY ideas? What is causing the disparity between when I view it in IE 9 through dev server from vs 2010 and when I view it in IE 9 on production server?
Your page is running with a Document Mode other than “IE 9 Standards”.
Hit F12 to bring up the Developer Tools to see which it actually is.
See here for instructions to work out why this is happening: http://hsivonen.iki.fi/doctype/#ie8modes
Otherwise, you can fix it by adding this to the top of your
<head>:This will force IE to use its most up-to-date rendering engine.
This can be done in IIS server also by settings in HTTP Response Header.
IN the Name field put “X-UA-Compatible” and in the Value field put “IE=Edge”
in EDIT Custom HTTP Response Header as below image.