Reply To: IE9 does not work with my Custom CSS in Simple Corps

I did some more digging and this is a better explanation of the situation above:

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

http://www.wafsf.org

Basically certain elements on the site disappear in IE9. They are:

The brown color background of the site including the brown color on the nav bar;
The yellow roll overs on the nav drop downs (although the brown drop downs themselves are the correct color brown #333);
Yellow buttons on the news page;
Yellow roll overs on links.

They all revert to the basic blue Simple Corps theme.

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 under Theme Options –> Custom CSS in the dashboard.

I have listed below all the custom css I have created. When I delete all my custom css everything reverts to the way it should be with the brown color, but, of course, I lose my custom css. I have tried deleting all the css then putting back just one at a time. As soon as I put one back in, eg the float button everything goes blue.

Does anyone know how I can have both my css and the brown color in IE9? Thanks!

Here is the custom css I have created to date:

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

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

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

.heading {
color:#F5B630;
}

.link {
color: #F5B630;
}

.company {
color: #ee6f37;
}

body {
font-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;
}