Alex Rivera | Logout

CSS not displaying properly after transferred to IIS 7 in IE 9

Asked 2011-06-02T14:43:07.120
10

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;
    t
Edit
Report

1 Answer

28

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>:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

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.

enter image description here

answered 2011-06-02T15:05:05.260

Your Answer