IE8 CSS higher specificity selector being ignored

[ct_roy]

I've got an IE8 specificity problem which is driving me nuts: http://proffetdemo.themesforge.com/shop/

The following selector is applied correctly in Chrome/Firefox et. al.

.tfshop-3 ul.products li.product {
    width: 30.5% !important;
}

But in IE8 it is completely ignored. The selector above is an override of another selector:

ul.products li.product {
    float: left;
    margin: 0 0 20px;
    position: relative;
    width: 48%;
}

Anyone know why IE8 is ignoring the more specific selector?

[Paul O'B]

Hi,

The rule is inside a media query and IE8 doesn't support media queries. You can try respond.js as a polyfill to add media query support to IE8.

[ct_roy]

Hi,

The rule is inside a media query and IE8 doesn't support media queries. You can try respond.js as a polyfill to add media query support to IE8.

Hey Paul, I haven't been in here in a while - great to see you're still helping folks out - you helped me out an awful lot about 7 or 8 years ago now! I was using respond.js as a polyfill but it turns out it wasn't kicking in at all for some reason - I eventually moved from @import to <link> statements and respond.js finally kicked in and all was well.

Thanks,

Ed

[Paul O'B]

Glad you got it sorted. I thought the name was familiar