IE8 CSS higher specificity selector being ignored

Question

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...

• Billy Moat: You've got extra closing anchor tags with "tf_prodthumb_inner" which may be causing an issue.
• Colm Troy: @BillyMoat just spotted that issue - thanks for pointing it out - don't think it solves the IE8 issue though
• Colm Troy: @Mr.Alien not sure what you mean?
• Billy Moat: He means does the rule telling it to be 30.5% come after the ruling telling it to be 48%?
• Billy Moat: In your stylesheets you seem to have the 48% width declared first but you have the 30.5% width declared within a media query of (min-width: 768px). If that's the case then IE is behaving correctly and Firefox is wrong but I'm not sure why.

Answer 1

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

• Colm Troy: thanks for the suggestion - I just tried that and it didn't make a difference to the IE8 problem

Answer 2

@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.

• Colm Troy: thanks for your answer dmi3y but I'm using Respond.js which does enable media queries in IE8
• dmi3y: yep, probably it acted up, because if you remove media query everything started to work magically ;)
• Colm Troy: but I need the selector to render a different width within that media query :)
• dmi3y: that's another question, I am trying to help you to find out why it is not working, as it was asked 'IE8 CSS higher specificity selector being ignored'
• Colm Troy: yip fair point - I now think the issue might not be one of specificity but one related to media queries - thanks for your input!