I have noticed some strange behavior with my .net application. Everything appears fine when running it from Visual Studio on IE8:
However, once I deploy the application to my server and access it via URL, it seems to lose its margin:
It's puzzling that the same application, in the same browser version, would show such a difference. What could be causing this?
Below is my CSS (the logo is contained within the "logo" class):
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;
}
}