CSS Media Query not Supported in IE

[rasu]

Hi!
i put this css

** @import url(“large_screen.css”)all;
@import url(“small_screen.css”)(max-width : 1024px);**

this css files are working in chrome, mozila browsers, its working in small and large screen resolutions, but ie only rendering “large_screen.css” file only, not working in small resolution css **(1024X768)**, how it solve this, please help!

[proudfist]

For IE 6-8 you can use a jscript.
https://github.com/scottjehl/Respond

[rasu]

Hi prodfist! thanks ur help, but i already using this script , but still not working ,
am alredy using this script also “https://code.google.com/p/css3-mediaqueries-js/”

[proudfist]

Btw i don’t think IE6 supports max-width. What versions of IE are you experimenting with?

[rasu]

ie8

[iknowdavehouse]

I haven’t found a good way to support RWD on IE8 and below. I recently made a site that used a conditional for IE8 and below that removed max-widths and replaced them with percentage widths. Essentially making the site unresponsive (but still fluid) for IE8 and below. My thinking was that It doesn’t need to be responsive because no mobile or tablet browser will be running IE8 and the IE8 desktop users wouldn’t see the difference.

[rasu]

Hi!
i solved ie8 media query problem with “https://code.google.com/p/css3-mediaqueries-js/” help, **this script working only server** , but not working in local ,
:) (But ie7, ie6 not working in this script)
thanks all ….

[Boxon]

I have a stupid question:
What would be the purpose of media query in IE6 or 7 or any other? How many handheld devices use Explorer 7?
My standard practice is to make conditional stylesheet for IE, with content width fixed to 1280px, forget responsiveness for IE users, and go on. If anyone wants to use “advanced” web, he will certainly upgrade to any browser that can be used on all devices.
One can find loads of JavaScripts for “modernizing” IE, but some sites, in some conditions, will be painfully messed, usually when you need them to be flawless.

[iknowdavehouse]

As I said above, I agree Boxon – I use a conditional to make an un-responsive version for IE8 and below as the user wouldn’t know (providing you do your fixed version at a resolution that will work for low end / old screens). Maybe 1280 is too high for a legacy version?

[Boxon]

Basically, lte IE8 is are used in big companies, and why:
They replace hardware on regular basis, but it arrives with software already installed, and nobody is allowed to install anything on his personal PC.
If company replaces like 200-300 computers at the time, somebody should get payed to do whatever needs to be done. And service crew is to lazy to install some more user-friendly browser. But PC’s are already equipped with powerful graphic and fancy monitors, so IE7 is rendering on 1960 or something. So I go for 1280 with margins:auto. And that is how many – 10% or what?

[Paulie_D]

Heck, we have a couple of multi-national, nope, GLOBAL clients who are still using IE6 and XP!

It ain’t easy….

…and yes, we serve IE specific stylesheets.

[gamsim]

A project I worked on recently required partial responsive design to handle various screen sizes. Obviously IE7&8 doesn’t support media queries so I wrote a JQuery plugin that adds/removes viewport classes to the body tag. Combined with Compass you can import viewport specific css files.

.lt-ie9 { .ie768up { @import “768up”; } .ie1030up { @import “1030up”; } .ie1240up { @import “1240up”; } }

https://github.com/gamsim/ieresponsify

Cheers

Simon

[Author]

Posts