CODEWITHSUNDEEP
cssinternet-explorer-9media-queries
user1580280
user1580280

Reputation: 41

IE9 ignoring media queries

This is my first attempt at developing a responsive site. It's working fine in all browsers but IE9. I know that IE9 is compatible with media queries. I checked to see if compatibility mode was turned off and I don't see the icon visible so I believe that it is. My media queries are listed below the base styles. I'll just paste in a few media queries below so that I don't exceed any character limits. Let me know if you need to see more. Note: The doc type is for html5.

Media Queries:

@media only screen and (max-width: 479px) {
  /* 320 =================================================== */

  header .logo a {
    background:url(../images/logo-320.png) no-repeat;
    width:213px;
    height:69px;
    float:left;
    margin-top:35px;
    display:block;
}

}

@media only screen and (max-width: 480px) {
    header {min-width:100%;}

    .main-link-wrap {
    width:100%;
    margin:0 auto;
}

    .featured-prod {
        width:100%; 
    }

    footer {
        min-width:100%;
}

}

@media only screen and (min-width: 480px) {
  /* 480 =================================================== */

    header .logo a {
    background:url(../images/logo-480.png) no-repeat;
    width:310px;
    height:94px;
    float:left;
    margin-top:5px;
    display:block;
}

.featured-prod .product-box {
    width:185px;    
    margin-left:1.8%;
    margin-right:1.8%;
    text-align:left;
    color:#282828;
    font-size:12px;
    font-size:1.2rem;
    line-height:13px;
    float:left;
}

footer .address {
    font-size:22px;
    line-height:32px;   
}

}

Upvotes: 2

Views: 7090

Answers (2)

Suvi Vignarajah
Suvi Vignarajah

Reputation: 5788

Is there a reason you're using a max-width: 479px and a max-width: 480px media query? I assume you're not seeing any of your styling in the max-width: 479px block? This is because those rules are being overridden by your max-width:480px rule.

Here's why, if a browser is 320px wide - that means it is less than the maximum width of 479px but it is also less than 480px (both conditions are satisfied). And because you've got the max-width: 480px block after your max-width:479px it's overriding those rules. My suggestion would be for you to include the rules in your max-width: 480px in your max-width: 479px block or vice-verse.

As an FYI, this problem is not IE9 specific - arranging your CSS rules in that sense will behave the same way across all browsers.

Upvotes: 0

Kris C
Kris C

Reputation: 2848

Tested with a very simple html5 page. 

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
</body>
</html>

Referenced your stylesheet. Added

body {background: #F00;}

to the first query and

body {background: #00F;}

to the second query.

Background changes from red to blue as expected when resized in IE9, indicating that media query is working. I suggest try adding the same to your page to prove the media queries.

If the background changes as expected then there is something else wrong with your CSS (e.g. is it targeting the correct element; is another style overriding etc.)

If the background doesn't change then there is something unusual going on in your page, or with compatibility, etc.

Upvotes: 1

Related Questions