Selectors only recognized in first stylesheet?

[David]

I'm creating a responsive layout using multiple stylesheets:

<link rel="stylesheet" href="/css/style.css" type="text/css"
media="screen" title="Main stylesheet" />
<link rel="stylesheet" href="/css/wide.css" media="screen and (min-
width: 501px)" />
<link rel="stylesheet" href="/css/narrow.css" media="screen and (min-
width: 501px) and (max-width: 700px)" />
<link rel="stylesheet" href="/css/mobile.css" media="screen and (max-
width: 500px)" />

I've noticed that when I use selectors in anything but the style.css
sheet, they are not recognized when the page loads in IE. I've ended
up moving most of the rules with selectors to the style.css sheet, but
there are some that I need specifically in the other stylesheets for
layout purposes.

Does selectivizr only work on the primary stylesheet? Or is there an
issue when it's applied to stylesheets that use media queries?

This is a company intranet site, so I can't provide a link right now,
though I might be able to get a dummy page posted on my personal web
server if necessary.

[David Baughman]

Update: I moved all the layout-specific styles into media queries in
the primary stylesheet (style.css), and those selectors still do not
work in IE8.

/* Notional Example */

.dummy-class:nth-child(2n) { /* This selector works perfectly in
IE8 using selectivzr */
background: #0f0;
}

@media screen and (max-width: 700px) {
.dummy-class:nth-child(2n) { /* This selector appears to not
work in IE8 */
background: #ff0;
}
}

/* End Example */

It looks like selectivizr is unable to use rules that are contained
within media queries at all, whether the media query loads an external
stylesheet like before, or the media query is contained within the
stylesheet itself.

Any ideas?

[Francesco Spreafico]

On Fri, Dec 2, 2011 at 20:46, David Baughman <dmbau...@gmail.com> wrote:

> Update:  I moved all the layout-specific styles into media queries in
> the primary stylesheet (style.css), and those selectors still do not
> work in IE8.

I noticed this too... today! I think it may have something to do with
the fact that we're using JavaScript to make those media queries work
in old IEs (I use respond through Modernizr).

Or maybe we're just doing something wrong!

--
Francesco

[Adamo]

I just came across the same problem. Thanks for the test case, as I
was about to waste time combining my separate flexible.css responsive
file and main css file to see if that helped.

I also thought there may have been a conflict with the css3-media-
queries.js plugin for ie8. I tried swapping the order in which both
this plugin and selectivzr are loaded, but it did not change the
problem described here.

I'm thinking now it may be a syntax issue with the @media statements
not jiving with the selectivzr plugin?