Grow your CSS skills. Land your dream job.

CSS Media Query not Supported in IE

  • # March 26, 2013 at 1:57 am

    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!

    # March 26, 2013 at 3:47 am

    For IE 6-8 you can use a jscript.

    https://github.com/scottjehl/Respond

    # March 26, 2013 at 5:01 am

    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/”

    # March 26, 2013 at 6:10 am

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

    # March 26, 2013 at 6:19 am

    ie8

    # March 26, 2013 at 7:50 am

    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.

    # March 27, 2013 at 8:27 am

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

    # March 27, 2013 at 9:44 am

    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.

    # March 27, 2013 at 12:25 pm

    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?

    # March 28, 2013 at 7:24 am

    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?

    # March 28, 2013 at 7:27 am

    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.

    # September 26, 2013 at 10:59 pm

    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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".