What could cause different CSS behaviour from a PC to another?

Question

I have an ASP.NET MVC 4 application which displays as expected in both Google Chrome and Internet Explorer locally.

However, once deployed through TFS to the remote server, the view only displays correctly using Google Chrome?

Deployed with Chrome:

Deployed with IE:

I would have doubted about IE compatibility button if I would have visited the page using a different workstation. But, I always and only use my own attributed workstation.

So, what could change so drastically so that the page displays conveniently using IE locally by pressing the [F5] key in Visual Studio and simply running the Web application, and make it screw the CSS up once it is deployed?

I use:

• Internet Explorer 9
• Visual Studio 2010
• Windows 7
• IIS 7.5
• Google Chrome 39.0.2171.71 m
• TFS 2010

Below is my CSS and CSHTML files (at least what I judged important to include, and removed what I think is not).

Site.css

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #000;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

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

.float-left { float: left; }
.float-right { float: right; }
.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 100%;
}

#body {
    background-color: #fff;
    clear: both;
    padding-bottom: 35px;
}

#body a { color: #000; }

#body a:hover {
    background-color: #a2998a;
    color: #005596;
}

#body a:link { color: #000; }
#body a:active { color: #000; }
#body a:visited { color: #000; }

.main-content {
    background: url("../Images/accent.png") no-repeat;
    padding-left: 10px;
    padding-top: 30px;
}

.email-counter {
    display: block;
    font-size: 13em;
    font-family: Consolas, Arial, monospace;    
    font-weight: bold;
    text-align: center !important;
    vertical-align: middle;
}

.mailbox-title {
    background-color: #fff;
    border: 1px solid #000 !important;
    color: #000;
    font-size: 2.5em;
    padding-bottom: 10px;
    text-align: center;
    vertical-align: middle;
}

.mailbox-title a {
    color: #000;
    text-decoration: none;
}

.mailbox {
    border: 3px solid #000;
    display: inline-block;    
    height: auto;
    margin-top: 5px;
    width: 32.66%;
}

.mailboxes-indicators { height: 400px; }
header .content-wrapper { padding-top: 20px; }
footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: .8em;
    height: 100px;
}


/* site title
----------------------------------------------------------*/
.site-title {
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    line-height: 600%;
    margin: 0;
    text-align: center;
}

.site-title a, .site-title a:hover, .site-title a:active {
    background: none;
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}

.site-title .column { display: inline-block; }
.site-title #logo {
    border: none;
    position: absolute;
    width: 25%;
}

.site-title #page-title-container {
    position: relative;
    width: 133%;
}

.site-title #page-title-container #page-title {
    color: #000;    
    font-size: 4em;
    font-weight: bold;
    top: -15px;
}

.site-title #page-title-container #latest-refresh-date-time {
    font-size: xx-large;
    text-align: center;
    top: -15px;
}

#sum-of-emails-from-all-mailboxes {
    border: 3px solid #000;
    left: -60px;    
    position: relative;
    width: 110%;
}

#sum-display-name {
    background-color: #cadaa9;
    border: 1px solid #000;
    color: #000;
    font-size: 2.5em;    
    position: relative;
}

#sum-of-emails { font-size: 8em; }

DisplayIndicators.cshtml

@model IndicateursCourriels.ViewModels.CustomerServiceIndicatorsViewModel

@{
    ViewBag.Title = "DisplayIndicators";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section header {
    <div class="content-wrapper">
        <div class="site-title">
            <div class="column">
                <div id="page-title-container">
                    <div id="page-title">
                        @Html.DisplayFor(m => m.ViewTitle)
                    </div>
                    <div id="latest-refresh-date-time">
                        @Html.DisplayFor(m => m.LatestRefreshDateTime)
                    </div>
                </div>
            </div>
            <div class="column float-right">
                <div id="sum-of-emails-from-all-mailboxes">
                    <div class="mailbox-title">
                        @Html.DisplayFor(m => m.SumOfEmailsFromAllMailboxesDisplayName)
                    </div>
                    <div id="sum-of-emails" class="email-counter">            
                        @Html.DisplayFor(m => m.SumOfEmailsFromAllMailboxes)
                    </div>
                </div>
            </div>
        </div>
    </div>
}

<div class="mailboxes-indicators">
    <div class="mailbox">
        <div class="mailbox-title">
            @Html.DisplayFor(m => m.FirstMailboxName)
        </div>
        <div class="display-label" style="text-align: center;">
            <span class="email-counter" 
                  style="background-color: @Html.DisplayFor(m => m.FirstAlertLevelColour)">
                @Html.DisplayFor(m => m.FirstEmailCount)
            </span>
        </div>
    </div>
    <div class="mailbox">
        <div class="mailbox-title">
            @Html.DisplayFor(m => m.SecondMailboxName)
        </div>
        <div class="display-label">
            <span class="email-counter" 
                  style="background-color: @Html.DisplayFor(m => m.SecondAlertLevelColour)">
                @Html.DisplayFor(m => m.SecondEmailCount)
            </span>
        </div>
    </div>
    <div class="mailbox">
        <div class="mailbox-title">
            <a href='@Url.Action("EmailIndicatorManualInput", "CustomerServiceIndicators")'>
                @Html.DisplayFor(m => m.ThirdMailboxName)
            </a>
        </div>
        <div class="display-label" style="text-align: center;">
            <span class="email-counter" 
                  style="background-color: @Html.DisplayFor(m => m.ThirdAlertLevelColour)">
                @Html.DisplayFor(m => m.ThirdEmailCount)
            </span>
        </div>
    </div>
</div>    

EDIT

As per comment by Jonathan Sampson, the local and remote document modes are actually different.

• Local Document Mode: IE9
• Remote Document Mode: IE7

So I did change the Document Mode to IE7 for my local WebApp instance, and have gotten the same display as the remote instance.

Now the questions are:

1. What might I do to force IE9 Document Mode? Or else,
2. how to ensure it displays correctly in either modes?

Answer 1

As we determined in the comments above, the cause was due to different document modes locally and remotely. The cause of this could be any number of things:

1. Developer tools were overriding the document mode.
2. An x-ua-compatible header is being sent locally, or remotely with the HTTP response.
3. Additional markup when being viewed remotely is invalidating an otherwise valid document.
4. Local or remote instances are being loaded with an explicit x-ua-compatible meta tag.

These are the primary reasons you will notice a difference in document modes. Start by checking your developer tools to ensure you weren't merely overriding the default document mode.

Check your markup (likely the <header> portion) for an x-ua-compatible meta tag. If one isn't found there, check the HTTP response headers for it there.