I have created a simple application using MVC3 and the site is based on the default template.
When I build the site and run it locally if is displayed correctly (using IE9 and Chrome) but when I deploy it to our server (windows server 2003) the page renders incorrectly when accessed from my machine.
Here’s the weird bit… when I view the site from a browser on the server (IE8) it again renders correctly.
The section of the CSS file that appears to be causing the problem is this…
header, #header
{
position: relative;
margin-bottom: 0px;
color: #000;
padding: 0;
height: 135px;
}
header h1, #header h1
{
font-weight: bold;
padding: 5px 0;
margin: 0;
color: #fff;
border: none;
line-height: 2em;
font-size: 32px !important;
text-shadow: 1px 1px 2px #111;
}
#main
{
padding: 30px 30px 15px 30px;
background-color: #fff;
border-radius: 4px 0 0 0;
background-image: url(themes/base/images/ss_bg.gif);
background-repeat: repeat;
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
}
footer,
#footer
{
background-image: url(themes/base/images/2bg.gif);
background-repeat: repeat;
font-family: Courier;
font-size: .9em;
font-weight: normal;
font-style: normal;
font-variant: normal;
color: Gray;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0 0 30px 0;
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
}
Here are some screen shots:
The incorrect rendering in IE 9
The correct rendering locally on IE 8
Press F12 to open the Developer Tools, which should show that IE is not using the same “Browser Mode”/”Document Mode” between the two instances of the site.
IE defaults to different modes depending on where the page is being served from, just to wind you up.
Adding this to your
<head>should sort out the problem: