Style Problem in IE - html

Question

I have a web page that is using a CSS style sheet. When I run the page on localhost, it works fine on IE, Firefox and Google Chrome.
But when I upload the page and the CSS sheet, doesn`t work in IE but work in Firefox and Google Chrome.
This is my page code:
<div id="container">
<div id="header">
<h1><img src="../img/logo.png" alt="rattle me" class="png" /></h1>
<div>
</div>
<br class="clear" />
<?php
if(isset($_POST['err']))
echo "<script>alert('Invalid Captcha ...')</script>";
?></div>
<div id="content">
<div class="text">
<h2>Support</h2>
<form action="verify.php" id="contact" onsubmit="return validateForm();" method="post">
<div id="form">
<table>
<tr style="height:75px">
<td><div style="width:75px">Name:</div></td>
<td><div class="input"><input type="text" value="<?php echo (isset($_POST['usrName']))?$_POST['usrName']:"Your Name"; ?>" name="contact[name]" id="contactName" onfocus="clearInputValue(this,'Your Name')" onblur="setInputValue(this,'Your Name')"/></div></td>
</tr>
<tr style="height:75px">
<td><div>Email:</div></td>
<td><div class="input"><input type="text" value="<? echo (isset($_POST['usrEmail']))?$_POST['usrEmail']:"Your E-Mail"; ?>" name="contact[email]" id="contactEmail" onfocus="clearInputValue(this,'Your E-Mail')" onblur="setInputValue(this,'Your E-Mail')"/></div></td>
</tr>
<tr style="height:75px">
<td><div>Phone:</div></td>
<td><div class="input"><input type="text" value="<? echo (isset($_POST['usrPhone']))?$_POST['usrPhone']:"Your Phone Number"; ?>" name="contact[phone]" id="contactPhone" onfocus="clearInputValue(this,'Your Phone Number')" onblur="setInputValue(this,'Your Phone Number')"/></div></td>
</tr>
<tr style="height:150px">
<td><div>Message:</div></td>
<td height="50px"><textarea type="text" style="width:263px; height:25px; font:bold 14px Arial, Helvetica, sans-serif; color:#9F9F9F; outline:0 none; background:none; padding:9px 10px 75px 10px;" name="contact[message]" id="contactMessage" onfocus="clearInputValue(this,'Your Message')" onblur="setInputValue(this,'Your Message')"><? echo (isset($_POST['usrMsg']))?nl2br($_POST['usrMsg']):"Your Message"; ?></textarea></td>
</tr>
<tr style="height:75px">
<td><div>Human Verification:</div></td>
<td>
<?php
require_once('recaptchalib.php');
$publickey = "6Le4hb8SAAAAAKyDYU31NJ1KsROl4sxUW90coeea";
echo recaptcha_get_html($publickey);
?>
</td>
</tr>
<tr style="height:75px">
<td colspan="2"><div class="input" style="background:none"><button type="submit"><span class="button large">Submit</span></button></div></td>
</tr>
</table>
</div>
</form>
</div>
</div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
</div>
<div id="footer">
<div class="wrap">
<ul>
<li>Home .</li>
<li>Terms of Service .</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
and this is my CSS file:
html, body {
height: 100%;
}
body {
background: url(../../img/bg.jpg) repeat-x top #f0f0f0;
color:#000;
font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
a {
color:#5f2f80;
}
.left {
float:left
}
.right {
float:right
}
.clear {
display:block;
clear:both;
visibility:hidden;
height:0px;
border-width:0;
margin:0;
padding:0;
font-size: 0px;
}
.button, .button:visited {
background: #d46f1d url(../../img/overlay.png) repeat-x;
display: inline-block;
padding: 5px 15px 5px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
text-transform:uppercase;
}
.button:hover {
background-color:#ff6600;
}
.small.button, .small.button:visited {
font-size: 11px
}
.button, .button:visited,
.medium.button, .medium.button:visited {
font-size: 15px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.button, .large.button:visited {
font-size: 20px;
padding: 6px 18px 5px;
}
.super.button, .super.button:visited {
font-size: 36px;
padding: 8px 24px 9px;
}
#container {
width:660px;
margin:0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
#header {
padding:20px 0;
}
#header h1 img {
display:block;
float: left;
}
#header div {
float: right;
width: 424px;
padding-top: 84px;
}
#header p {
font-weight: bold;
font-size: 18px;
}
#header p span {
color: #5f2f80;
}
#content {
padding-bottom:20px;
}
#content .box {
padding-top:20px;
}
#content .box p {
text-align:justify;
}
#content p {
line-height:140%;
padding-bottom:12px;
}
#content h2 {
font-size:18px;
padding-bottom:18px;
}
#content #swf {
width:640px;
margin:0 auto 20px auto;
border:solid 10px #85796F;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#content #swf object {
display:block;
}
#content .text {
float:left;
width:424px;
line-height:140%;
}
#content .text h6 {
font-size:14px;
padding-bottom:14px;
}
#content .text .input {
background:url(../../img/bg-input.gif) no-repeat;
width:263px;
height:27px;
display:block;
float: left;
padding:9px 10px 0 10px;
}
#content .text .input input {
border:0;
background:none;
width:100%;
text-align:center;
font:bold 14px Arial, Helvetica, sans-serif;
outline:0 none;
color: #9F9F9F;
}
#content .text button {
float: right;
background:none;
border:0;
cursor:pointer;
}
#content .app {
float:right;
}
#content .app img {
display:block;
}
#footer, .push {
height: 50px;
}
#footer {
border-top:solid 1px #85796F;
}
#footer .wrap {
width: 660px;
margin: 0 auto;
}
#footer .img {
float: right;
padding-top:15px;
}
#footer ul {
text-align:left;
padding-top:15px;
}
#footer ul li {
display:inline;
color:#57247b;
}
#footer ul li a {
letter-spacing:normal;
text-decoration:none;
color:#57247b;
}
#footer ul li a:hover {
color:#000;
}

Answer 1

I'm not sure about how they've set up IE9 but I know that IE8 automatically turned on compatibility mode for any site in the 'intranet' zone. Could it be that when you are viewing the site on your local machine you are in this zone and therefore compatibility mode is enabled?