CSS style working in Chrome/FF but not applying in IE8

Question

I inherited a site that I'm working on finishing and there is this style applied to tags inside my footer (forgive me if I don't give enough info, just let me know and I'll put it up). The style puts a subtle background color around the header text and rounds the corners a bit:

    h4 {
    background: none repeat scroll 0 0 rgba(32, 37, 41, 0.3);
    border-radius: 8px 8px 8px 8px;
    color: #5CB414;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 12px 0 8px 10px;
    position: relative;
    }

This works great in Chrome and FF but in IE8 it doesn't work. And in IE8 it doesn't float the columns next to each other. Here is the site. Scroll down to the bottom to see the issues (should be 3 columns but in IE it is only 2 and there is no background style applied to the H4.

I know IE is finicky, but I don't know what to do about it. Any help will be greatly appreciated. Thanks!

Answer 1

as far as losing the 3 columns at the bottom simple replace the ".col" width:300px to width:292px; It's just barely too big.

Also with the rounded corners being crossbrowser compatible I like to get my styles from here: http://css3please.com/

I do not know that rounded corners will work in ie8 or less so you might try doing it with jquery instead of css3 http://jquery.malsup.com/corner/

Answer 2

Versions of IE prior to 9 don't support RGBA or border radius, so these are simply being ignored. You can try the cross-browser syntax at http://css3please.com, but this won't give you rounded corners in versions of IE prior to 9.

Your column float issue stems from the use of an nth-child selector on line 1454 of your style.css:

.col:nth-child(3) { margin-right: 0; }

Again, IE8 and lower don't support this so you'll have to find a work around. You can add a class of "last" to the third column, and place this in your stylesheet:

col.last { margin-right: 0 !important; }