Selectivizr + Respond.js in IE7 and 8 – nth-child, etc not working

[glencampbell]

I was having problems with IE7, in particular, not loading media queries. Figured this was something to do with targeting elements from my CSS using banner[role="banner"], for example.

I changed my respond JS code to this version: https://github.com/scottjehl/Respond/issues/36

This solved my problem, but now things like nth-child are not rendering with selectivizr.

Not up with JS at all, so wasn't sure whether to post this to this github, or Respond.

[keithclark]

First off, make sure your using the latest release of selectivizr (1.0.3b) and ensure it's loaded before respond.js. If you've already done that, could you upload a demo for me to look at?

[glencampbell]

Thanks for speedy reply Keith. Where do I find 1.0.3b? It doesn't seem to be on here or website for download?

[keithclark]

1.0.3b is the version hosted here.

[glencampbell]

I must be missing something Keith (not very familiar with github). When I click to download, the latest I can select is 1.0.2.

I probably missing something very obvious!

[keithclark]

You can only download final versions. The latest version is here: https://github.com/keithclark/selectivizr/blob/master/selectivizr.js

[glencampbell]

Hi Keith, tried this, and even put nwmatcher in along with it. Still not rendering nth-child.

Here is link to page: [link removed]

[keithclark]

You're not using the latest version of respond. If you compare the version you're using with the latest one on github, you'll see lines 43-47 are different.

[glencampbell]

Unfortunately this has broken the media queries now (after loading in the latest respond.js, as above), it is loading in various different styles. This is probably a respond issue now.

The selectors/selectivizr is working now, but respond isn't.

Update: have noticed that it seems to be the things that are targeted/styled using roles (navigation, main, complimentary) seem to be broken/unresponsive. Would this now be an issue with respond.js Keith?

[glencampbell]

Hi Keith, would I be right to post this as an issue with Respond.js? Rather than here?

[keithclark]

Glen, it would be helpful if you could create a barebones example of the problem as I'm finding it tricky to reverse engineer your CSS to see how things should be working.

[alexlande]

Hi Keith, I ran into the same problem over the weekend. It looks like Glen posted this issue with Respond as well, so I'll cross-post this over there. Check out this demo on IE7: http://alexlande.com/respond-test/.

The first div, styled by [role="main"] doesn't change colors. It works fine on IE8 and even IE6, strangely enough.

Working on my personal site over the weekend, I ended up dropping respond.js for the time being and directing the large screen styles to IE the way that Andy Clarke is doing on his redesign. I imagine that if he had kept using respond he would have run into the same problem.

Let me know if there's anything else I can do to help.

[keithclark]

Thanks for the demo. I'll look into the problem and get back to you.

[keithclark]

I've done some research into this and it seems the issue is not with respond or selectivizr, but with IE7 itself.

IE7 supports the attribute selectors being used in your example so selectivizr isn't actually doing any work in this instance. To test respond, I dumped the css in it's style blocks to a <pre> element that I added to the test page. As expected, respond outputs the correct CSS.

The issue appears to be IE7 not honouring the new style rules that respond applies when elements are targeted using attribute selectors.

To confirm the problem I modified selecitvizr's patchAttribute() method, forcing selectivizr to replace CSS attribute selectors with CSS classes in IE7 (return (ieVersion==7 || !BROKEN_ATTR_IMPLEMENTATIONS...) and that "fixes" the issue.

So, although the problem isn't respond or selectivizr, it looks like selectivizr could be used to patch the problem.

[alexlande]

Interesting, thanks a lot for looking into it. Personally, I think it's just something that I'll be aware of and avoid in the future.

[scottjehl]

@keithclark, I haven't looked closely at your implementation in a while, but do you happen to append styles to your style elements before injecting into the DOM? I'm about to push a change to Respond that fixes seemingly a lot of issues, by removing an optimization I had before to append styles to a style element before injecting into head. For example, by injecting the style element first, it prevents a browser crash when the HTML element has a background image applied. Random, but I wonder if it'd go even further to issues like this?

[lolmaus]

Over a year now, i still can't make nth-child inside a media query work in IE8.

I'm using latest selectivizr and Respond from GitHub, and selectivizr is called before Respond.

Please explain how to make that work.

[michelkaeser]

There really is some strange behavior when using selectivizr in IE7.

I'm using NWMatcher for IE7+8 (jQuery for other browsers) + selectivizr and respond.js

Everything works as expected in IE8, but IE7 removes images, font-face etc.

They are loaded like:

• NWMatcher
• selectivizr
• respond.js

1. Disabling selectivizr
   • No errrors, but respond.js doesn't do it's job
2. Disabling NWMatcher
   • respond.js does it's job
   • images & font-faces are applied, but short time after removed completely
3. Disabling respond.js
   • images & font-faces are applied, but short time after removed completely

I'm using CSS3PIE.js as well (before all three scripts) - disabling doesn't do anything. Same for HTML5Shiv.

[michelkaeser]

After some googeling I found an interesting blog post suggesting to check the <base> URL - it has to end with a / - changed mine and working fine now!

[brgrz]

I have to say this version (1.0.3b) works as expected in IE7-8 with Respond.js included after it (just like Keith described it) while 1.0.2 most certainly doesn't (just tried it in two projects).

I do not know about interactions with other scripts, you might be running into issues there.

I do try to make sites work with IE7 if possible, however I do not care if certain features don't work and I have stopped supporting IE7 in all projects. What I mean is, I test it, maybe do a tweak or two but don't go overboard to support it in IE7.

Honestly, you should move away from IE7 too, there's really no reasonable reason anymore to keep supporting it, it just costs time&money. If it's an enterprise environment that request IE7 support there should be immediate need to discuss this requirement and present what costs this requirement implies.

[brgrz]

After weeks of having this working, now in another site 1.0.3b does not apply selectivzr classes in IE8. I'm literally facing two sites referencing the same libraries, where in one the slvzr classes have been applied and in another they are not. The selectors seem to be fine because it works in modern browsers without Selectivzr..??

[lolmaus]

Hey mhrovatic, please check that on the broken site:

• CSS is not fetched with @import;
• there are no media queries other than min-width, max-width and all types (like ones produced by SASS debug info);
• Selectivizr is fetched before Respond.

[lolmaus]

BTW, don't use IE9.js with Selectivizr+Respond. IE8 becomes very buggy.

[brgrz]

I do not use IE9.js and this is a site that I don't use media queries (yet). Selectivzr is fetched before Respond. The only issue remaining is that CSS (LESS)is fetched through @import but it is done so in both projects.

In the project where 1.0.3b is not working, the 1.0.2 works fine. I mean, ordinary file replace (with 1.0.2 version) works fine.

[lolmaus]

mhrovatic, Respond's readme clearly says that Respond does not parse CSS fetched via @import.

I can confirm that when i switch the fetching method to @import, responsiveness immediately breaks.

[brgrz]

@lolmaus I don't think it is Respond issue. I just commented out Respond.js completely and the selectors still don't work. I switch to 1.0.2 and the selectors work, no matter the state of Respond. I include Respond.js because we will be implementing responsive layouts soon but they are not in use at this time.

[IanLunn]

If it helps, using 1.0.3b resolved this for me.

[rglover]

In agreement with @IanLunn. Just tried 1.0.3b (taken from here: https://github.com/keithclark/selectivizr/blob/master/selectivizr.js) and everything kicked on just fine.

[brgrz]

yeah, it does work, I had includes mixed up.;)

[zendy]

Yes, loading 1.0.3b before latest version of respond.js works for me in IE8. If it's still not working try to activate/deactivate compatibility view in IE8.

[dilrajahdan]

@MaddinXx - That worked! Add a trailing / to to src attribute when loading selectivizr