CODEWITHSUNDEEP
cssinternet-explorer-8
Colm Troy
Colm Troy

Reputation: 1947

IE8 CSS higher specificity selector being ignored

I've got an IE8 specifity 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?

UPDATE 1: 15/02/13 I now think this might be related to respond.js not loading correctly in IE8 - it looks like other media queries are not kicking in in IE8 - hmm...

Upvotes: 1

Views: 357

Answers (2)

dmi3y
dmi3y

Reputation: 3522

@media only screen and (min-width: 768px) {
  ...
  div.tfshop-3 ul.products li.product {
    width: 30.5% !important;
}
  ...
}

you have these styles defined into @media conditional queries which is not supported by IE8 and lower http://caniuse.com/css-mediaqueries

This is what http://wicky.nillia.ms/enquire.js/ probably could help to deal with it in easier way.

Upvotes: 0

idlehands23
idlehands23

Reputation: 326

try adding the tag in front of the class. like div.tfshop ul.products li.product

Upvotes: 1

Related Questions