IE 7 & 8 failing to load (or perhaps correctly cascade) part of a stylesheet - css

Question

I have a bizarre problem, IE 7 and 8 are not loading about 80% of one of my stylesheets, they get to a point, and then don't load any further. The IE dev tools recognise the unloaded properties, but they aren't applied in browser. The following stylesheets all load correctly, and no other browser has any problem with them. Additionally, the HTML prototype site which is about 90% the same as the near-production version has no problem.
The site is being built locally on Wordpress, but I've uploaded the source for the home page here, should that help (the stylesheet that doesn't load correctly is '760.css'). Additionally, the (correctly working) prototype can be viewed here, but some changes have been made between that version and the conversion to Wordpress.
The offending stylesheet (seems to stop loading after the ul#menu-site-nav properties have been applied):
/*
Created by Mikey Clarke | #mikey_clarke
*/
#nav-bar {
font-size: 0.95em;
padding: 0px 0px;
}
#nav-bar ul {
text-align: left;
}
ul#menu-site-nav {
width: 95%;
margin: 0 auto;
}
#nav-bar li.primary-nav {
width: 14.584%;
padding: 20px 1.042%;
float: left;
text-transform: uppercase;
}
#nav-bar li.primary-nav:first-child {
display: block;
padding-left: 1.042%;
}
#nav-bar li.primary-nav:nth-child(2) {
padding-left: 1.042%; /* restore outer padding */
}
#nav-bar li.primary-nav:last-child {
padding-right: 1.042%; /* restore outer padding */
}
#nav-bar li ul {
display: block;
width: 100%;
text-transform: capitalize;
}
#nav-bar li ul li {
float: none;
padding: 0px 0px;
display: list-item;
}
#nav-bar li.shield-logo {
background: url(/wp-content/themes/itsa/images/shield.png) no-repeat;
background-size: 25px;
background-position: 10px 23px;
}
#nav-bar .shield-logo span {
text-indent: 1000%;
white-space: nowrap;
overflow: hidden;
display: block;
padding-bottom: 12px;
}
#masthead {
font-size: 2.25em;
padding: 35px 0;
}
#masthead a {
display: block;
padding: 0 160px;
}
#content {
width: 82.279%;
padding-right: 1.042%;
float: left;
}
.sidebar {
width: 14.586%;
float: left;
text-align: right;
padding: 0px 1.042% 20px 1.042%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
}
#section-nav>ul>li>span {
padding: 4px 4%;
border: 1px solid transparent;
margin-bottom: 4px;
}
#section-nav li ul li {
padding: 4px 4%;
margin: 4px 0px;
border: 1px solid transparent;
}
#section-nav>ul>li.current-menu-item>span,
#section-nav>ul>li>ul>li.current-menu-item {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid #f6f6f6;
-webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
background-color: #ececec;
background: rgba(0,0,0,0.02);
}
#breadcrumbs {
font-size: 0.9em;
}
/* Restore content only useful for users browsing from desktops */
.mobile-superfluous {
display: block;
}
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
#nav-bar li.shield-logo {
background: url(/wp-content/themes/itsa/images/shield#2.png) no-repeat;
background-size: 25px;
}
}

Answer 1

After rewriting the entire stylesheet by hand and testing after every line, it seems that the problem is with the media query at the end. I've removed every part of the media query individually and am completely unable to identify what part of it IE is choking on. I also copied and pasted the media query to a different stylesheet and that stylesheet loads fine in IE 7 & 8. So very strange.
Since it does work without the media query, I've moved it to another stylesheet where it works fine.

Answer 2

Your problem seems to be in the fact that some CSS pseudo selectors you are using aren't supported by these browsers, namely :nth-child and :last-child.
And while it should work I they might be having trouble with the immediate child selector used without spaces (this is just a guess but not far fetched) i.e. section-nav>ul>li should probably be #section-nav > ul > li
Do mind that IE7 and I think 8 as well don't support rgba either.
Any succeeding parse errors or missing styles could be attributed to this, maybe...
For more information about the exact spec that IE7+ should support please read this excellent article about CSS2.1 selectors