IE7 and IE8 support for CSS3 Media Query

55 Flares Twitter 21 Facebook 0 Google+ 15 StumbleUpon 1 LinkedIn 18 Pin It Share 0 Email -- 55 Flares ×

Normally IE5 to IE8 do not support CSS3 Media Query. But at least IE8 should support for CSS3 Media Query and that is very important for cross-browser responsive web design. Here I will tell you how you can solve the CSS3 Media Query issues for IE. This tutorial will helps you to create a dynamic resolution dependent layout with web standards in mind.

Today I got a great jQuery plugin [Link] name css3-mediaqueries. It is very easy to use.

How to use?

Download jQuery plugin form Here and include downloaded script just before </body> like

Or you can use following way to include the script.

Then write the media query in style sheet and check it in IE. It will work nicely with IE8, IE7 Even more older version IE6 or IE5

Notes:

It doesn’t work on @import’ed stylesheets

Write media query with following way

Use keyword ‘and’ in query (‘or’ is not supported)

55 Flares Twitter 21 Facebook 0 Google+ 15 StumbleUpon 1 LinkedIn 18 Pin It Share 0 Email -- 55 Flares ×

Leave a Comment



  • Stivan

    It’s very helpfull for me, thank you http://www.cssmatter.com

  • http://cssmatter.com Manish Salunke

    Stivan, You will find more helpfull tutorials and articles on our site

  • Jacob Ponting

    Wow!! you made my day. Thank you soo much.

  • Mike Hussle

    Thanks for sharing manish!! keep it up!

  • Giorgio

    Zero comments??? No way, fellow! Although IE8 is finally dying, I still have a considerable percentage of visitors using it (don’t know why…). Anyway: extremely useful tool, thank you very much!!!

  • TheSeeker2013 .

    I have inserted the “” tag inside the tag linked to the script file accordingly, I have also tried the other way “” and neither worked. I moved the script tag before or after the other CSS referenced link tags and still won’t work for IE7 or 8.

    IE9 works fine because it accepts @media queries, but this script won’t work for IE7 or 8.

    Any ideas or suggestions?

    • MoneyGrabSequel

      Read all of the instructions! It clearly states “It doesn’t work on @import’ed stylesheets” and you clearly are using external/imported CSS because you posted…”I moved the script tag before or after the other CSS referenced link tags…”

      The CSS has to be embedded for this to work, but it does work.

      • TheSeeker2013 .

        If you read clearly, it said “@imported”, which refers to media
        queries. Since I am not a mind reader, I take that literally because of
        the syntax and that means it refers to only @media query sheets. I
        believe it was a bad (& lazy) use of syntax on his part if he wanted
        to refer to all external style sheets. Simply say, “all external style
        sheets”.

        Now since the CSS has to be inline (embedded), then this method is
        essentially useless when dealing with a large number of webpages. The
        amount of time to change a large number of webpages just because the CSS
        has to be inline for this jquery method to work. This method maybe
        useable only on small sites with limited pages, but still, inline CSS is
        suppose to be limited to only a need basis, this is the way
        professional web designers are taught. Thus the jquery method defeats
        this standard and forces the web designer to place the majority or all
        CSS inline.

        Overall, it is therefore useless.

        • patrickakpala

          you can get this to work with your external style sheet by using @media screen and (min-width: 41em )
          or @media screen and (min-width: 656px ). i was using only @media (min-width: 656px) so it wasn’t working for me.

  • rowilsonh

    si funciono, gracias, genial.
    awesome… thanks..

  • sushil

    Wrong information…. its not working in ie8 and ie7

    • http://bora.me/ Bora

      works like a charm, i guess you did something wrong

    • Oupier

      it works very well.
      One thing must be noted is that the “screen” is necessary:

      @media (min-width: 481px) { /* … */ } will not work, it must be
      @media screen and (min-width: 481px) { /* … */ }

      • Dragan Filipović

        Thanx.
        With ”screen” it works also in external css.
        Tested in IE8.

    • MoneyGrabSequel

      tested works fine in IE7 (I’m assuming it’ll work in IE8 too)

      The important detail people miss is that it “It doesn’t work on @import’ed stylesheets” — with embedded CSS works fine. But I’m looking for another solution as I need media quires to work with external CSS…any ideas?

  • gangesh00

    Thanks! works well.

  • sudhakar

    Thank you very much.

  • Alex

    I dont know how should i make it work!
    One of my css line: @media only screen and (min-width:820px){#maintitle .page{width:auto;}}

    What should i rewrite here?
    I dont get it

  • mr. right

    this’s super awful web…if you know why..you’d run this web on ie8…

  • susheel

    nothing change

  • Jackson

    pa marcher ta figir

  • asdf

    asdf

  • asdf

    Not Working.. Can u help me?

  • Marcel Behan

    Super works :)

    I have put this to index
    ¨

    and to style.css

    @media screen and (min-width: 980px)
    {
    body{
    height:100%;
    }
    }

  • Mateusz Moroz

    Since I embedded the styles in the html section, I have nothing on the screen. Just blank page. I use IE7.

    What I have, is:

    .printable {
    display: none;
    }

    @media screen print and (min-width: 980px) {
    @page {
    size: landscape;
    }
    .printable {
    display: block;
    }

    }

    I also tried to add “and” word between screen and print, with the same effect. It doesn’t work at all. Can someone say, what else to do, to make it work?

  • Ramesh

    Hi sir this is ramesh i have a problem with internet Explorer, for responsive design is not working in ie8 and++, the css queries are not working can u please give the answer, i am used above method also……. please help me

  • Bhushan Wagh

    @mixin breakpoint($point) {
    @if $point == papa-bear {
    @media (max-width: 1600px) { @content; }
    }
    @else if $point == mama-bear {
    @media (max-width: 1250px) { @content; }
    }
    @else if $point == baby-bear {
    @media (max-width: 650px) { @content; }
    }
    }

  • Adam Menczykowski

    Thanks, worked a charm!

  • EmmyBN

    Hi guys! Thanks for posting this! Unfortunately the downloadable files are not in the link provided any more. Could someone please send it somehow?

    Ta!

  • MortisDux

    Really very very nice!! Thanks a lot you resolved a ie issue that I’ve been working on for 2 days!! Trying to reproduce the collapsed navbar menu from bootstrap but it was not working and now it is! Thanks !!

Author:

I'm a hardworking web person from Mumbai, India. My main skills in the front-end development of websites. I'm very friendly so please don't hesitate to get in touch regarding any quotes or general inquiries you may have. I founded CSS Matter in 2013 with the sole ambition of design, development, creativity and innovation on the Internet, which recognize and promote the best web designers, developers and web users in the world. I'm skilled, talented, creative and very passionate about my work. - I can make websites that look and function great. - I can design branding that portrays your organization or business perfectly. - I can make eCommerce stores so that you can sell goods or services online. - I can make content manageable websites that are flexible and simple to operate. - I can make any website look great on every mobile device that exists, - I can do loads of stuff. I like to work closely with people to ensure that each stage of a project goes great every step of the way. I like to ensure that all of my finished projects/work reflect how highly I would like to be perceived. I'm confident that with your ideas and my expertise we can create something that makes us both smile. If you like what I do, and think we could work together then don't hesitate to get in touch with me. Skype IM : cssmatter And Email


Want to write for CSS Matter?

If you’re interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It’s best if you already have article ideas in mind – but if you don’t, he’ll help you find a good topic to cover.

Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.

Subscribe to the RSS feed

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.