CODEWITHSUNDEEP
cssinternet-explorermedia-queries
Nick Passaro
Nick Passaro

Reputation: 59

Media Queries in IE

I'm having problems with my responsive site and Internet Explorer (go figure), and I was wondering if anyone could take a look at the source code in the header of nickpassaro.com and help me figure out why IE9 and IE8 aren't working right. I'm not sure if it's an issue with my css, because some properties that are universal to all three of my stylesheets aren't working (like the background of the header).

I'm using html5shiv as my polyfill, and it's not coming from a local copy on my server. I'm also using normalize.css, which says it works for IE8+

Thank you

Upvotes: 0

Views: 350

Answers (2)

Bharat Soni
Bharat Soni

Reputation: 2902

there are two different ways for this, either you can use some jquery or JS for IE versions like this 

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css"); 
    }
}

or you can write different css for different IE versions like this for All Versions of IE

 <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

for specific versions 

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Upvotes: 0

zloctb
zloctb

Reputation: 11177

https://github.com/scottjehl/Respond

If you're looking for more robust CSS3 Media Query support, you might check out http://code.google.com/p/css3-mediaqueries-js/. In testing, I've found that script to be noticeably slow when rendering complex responsive designs (both in filesize and performance), but it really does support a lot more media query features than this script. Big hat tip to the authors! :)

Upvotes: 1

Related Questions