0

I have a responsive site located here: http://wnmu.edu Everything seems to be working just fine in all other modern browsers except IE9.

It seems like only certain @media queries are being recognize, even though they are in the same stylesheet. Take a look at this screenshot:

enter image description here

The menu "About WNMU, Current Students..." is visible, which is originally hidden in less than 480px screens. However, the hamburger menu is still visible. My css code seems pretty simple:

@media only screen and (min-width: 784px){
    .banner #responsive_menu_toggles {
        display: none;
    }
}

I have capability mode off.

Thank you.

Sampson
  • 265,109
  • 74
  • 539
  • 565
thegreyspot
  • 4,079
  • 5
  • 28
  • 34

2 Answers2

1

It looks like this question was asked once before, here.

Media query not working in IE9

Just in case anyone is crawling SO for an answer to this, the above two answers aren't solving the core problem which is answered here - CSS media query not working in IE 9

Basically inline CSS3 media queries DO work in IE9 but you have to disable Compatibilty mode -

<meta http-equiv="X-UA-Compatible" content="IE=9">

The above meta tag needs to be placed before any other meta tags otherwise IE9 will default to compatibility mode on and will subsequently not work.

If you are curious I found this by searching google for ie9 @media css issues

Community
  • 1
  • 1
Marie
  • 2,114
  • 1
  • 17
  • 31
  • As I mentioned in my post "I have capability mode off." I saw this post. I'm using "" which is essentially the same thing. If you load the page in IE9 you will see that compatible mode does not run on the page. – thegreyspot Jan 06 '15 at 21:49
  • Oh I missed that bit at the end, sorry :( – Marie Jan 06 '15 at 22:14
1

Wow. Just figured it out. I guess IE9 has a "4094 rule" limit. So I broke apart the css file, and everything is good! I'll definitely see why I have so many rules.

Sigh of relief.

thegreyspot
  • 4,079
  • 5
  • 28
  • 34