IE9 does not work with my Custom CSS in Simple Corps

Hello all,

Everything is working fine on the site in all browsers except IE9 (not sure about earlier versions of IE as I don’t have them any more).

http://www.wafsf.org

Basically the brown color of the site disappears in IE9 and reverts to the basic theme. When I delete all my custom css I created on the site, the brown comes back on IE9 but, of course, I lose all my custom css.

Having been new to WordPress when I built this site, I started making tweaks and changes in the php files via Appearance –> Editor in the Dashboard, until I read that it’s best to create custom css, which I then started doing. Does anyone know how I can have both my css and the brown color in IE9? Thanks!

Here is the custom css I have so far:

p { -webkit-hyphens: none; -moz-hyphens: none; -epub-hyphens: none; hyphens: none; }

.float {
float: left;
margin-bottom: 10px;
padding-right: 15px;
padding-bottom: 10px;
}

.floatbutton {
float: left;
margin-top: 11px;
padding-right: 20px;

}

.heading {
color:#F5B630;
}

.floatleft {
float: left;
margin-bottom: 0px;
padding-right: 15px;
padding-bottom: 0px;
}

.link {
color:#F5B630;
}

.company {
color:#ee6f37;
}

body {
background:#FFF;
color: #a7a6a6;
font-size: 12px;
font-family:’Arial’, ‘Verdana’, sans-serif;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}

p {
color: #a7a6a6;
text-decoration: none;
}

#footer {
background:#222222;
color: #a7a6a6;
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
.infopopup-popup {
width: 50% !important;
margin-left: 3% !important;
margin-right: 3% !important;
}
}

table {
font-family:’Arial’, ‘Verdana’, sans-serif;
color: #a7a6a6;
}
table th {
font-family:’Arial’, ‘Verdana’, sans-serif;
color: #a7a6a6;
}
table td {
font-family:’Arial’, ‘Verdana’, sans-serif;
color: #a7a6a6;
}