.net: Application loses style in IE8 on server

Question

I'm getting some weird behavior with my .net application. When I run it from within Visual Studio on IE8, it looks fine:

But when I deploy the application to my server and access via the URL, it seems to lose the margin:

It's the same application, running in the same version of the same browser, why is this difference occurring?

Here is my CSS (the logo is in the class "logo"):

body {
    font-family: Helvetica, sans-serif;
    background-color: #aaa;
    margin: 0px;
    line-height: 1.5rem;
}

header, footer, nav, section {
    display: block;
}


/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}


img,
embed,
object,
video {
    max-width: 100%;
}

.header {
    background-color: #ffffff;
    color: #98BF79;
    overflow:auto;
}

.logo {
    float: left;
    height: 60px;
    width: 60px;
    margin: 1.625em;
}

    .logo img {
        max-width: 100%;
    }

.nav {
    padding-left: 1.625em;
    padding-right: 1.625em;
    float: right;
    margin-top: 3.5625em;
}

    .nav ul {
        list-style: none;
        margin-bottom: 1.625em;
    }

    .nav li {
        margin-right: 1.6em;
        float: left;
    }

    .nav a {
        text-decoration: none;
        color: #98BF79;
    }

        .nav a:link {
            color: #98BF79;
        }

        .nav a:hover {
            color: #f90;
        }

        .nav a:focus {
            color: #f90;
        }

.container {
    max-width: 50em;
    padding-left: 1.625em;
    padding-right: 1.625em;
    color: #fff;
}

    .container a {
        color: #fff;
        text-decoration: none;
    }

        .container a:hover {
            color: #f90;
        }

        .container a:focus {
            color: #f90;
        }

    .container h1 {
        font-size: 3rem;
        line-height: 2.6rem;
        margin-bottom: 1.625rem;
    }
    .container .footnote {
        font-size: .7rem;
        font-style:normal;
    }


.input {
    max-width: 100%;
    height:20em;
    padding-top: 0.8125em;
    padding-right: 0px;
    padding-bottom: 0.8125em;
    padding-left: 0.325em;
}
.table {
    margin:0px;padding:0px;
    width:25em;
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #ffffff;

}.table table{
    width:100%;
    height:100%;
    margin:0px;padding:0px;
}



.table td{
    vertical-align:middle;

    background-color:#aaa;

    border:1px solid #ffffff;
    border-width:0px 0px 0px 0px;
    text-align:center;
    padding:9px;
    font-size:14px;
    font-family:Helvetica;
    font-weight:normal;
    color:#ffffff;
}


@media only screen and (max-width: 40em) {

    .nav {
        clear: left;
        float: left;
        margin-top: 0;
    }

        .nav ul {
            padding-left: 0px;
        }

        .nav li {
            float: none;
        }
}

Answer 1

The most likely reason i can think for this is that your site is run under Intranet mode when you open it using localhost and and when you deploy it to the web server intranet mode is turned off so your style is broken.

One way to test this is by putting your site on Intranet sites, for this go to Tools->Internet Options and select Security->Intranet, then click Sites and Advanced Options and there add the url of the site to the list. This should render the deployed site properly.

The reason for this is that Intranet Mode enables Compatibility Mode by default and this mode renders pages as of Internet Explorer 7, also it could simply be that Compatibility Mode is enabled for localhost but not for the deployed web site.

If the site renders properly after this, then you may want to review your style sheets so it renders properly without Intranet mode or Compatibility Mode.

Edit:

Curious that your problem is the other way around, but to avoid Compatibilty Mode, check this answer: Force IE compatibility mode off using tags