IE9 and Media Queries
 

I usually use Chrome, and occasionally Firefox, as my browsers. A couple of days ago, I updated my site to the latest version of Montezuma (1.1.8, from 1.1.4), and made some additional customizations, and just for kicks, decided to take a look at the site on Internet Explorer. To my surprise, the menu looked out of whack, it was running vertically instead of horizontally, and the rest of the site had the sidebar folded to the bottom, as if the viewport were at a narrower size. Thinking I had done something wrong with my customizations, I tediously undid them one by one, but nothing seemed to work.

I then wondered if it was related to the version of IE that I was using (IE9), or if it was common to multiple versions, so I took a look at the site on my wife's computer, which had IE 10 installed, and to my relief, the site looked normal. After doing some Googling, it seems that IE9 doesn't process media queries properly (or maybe not at all?) when Compatibility View is turned on.

So my question is, isn't the "X-UA-Compatible Meta Tag" in the Montezuma Options > Head > Meta Tags supposed to take care of that? Mine is currently set to the default value. Is there something else that we can do to overcome this deficiency in IE9?

What is the link to the site? I see some of you symptoms in IE7 but IE8, IE9, and IE10 all look OK in my tests.

http://ladyeaglesbball.com

Actually, when I look at any of the sites that are featured in the Montezuma showcase thread, I see the same behavior. Open the site in IE9, then from the menu, select Tools > Compatibility View. The site should then reload, and it's usually the menu that gets screwed up (the menu items display vertically like normal list items rather than across).