IE9 using wrong media queries

IE9 using wrong media query


Today I was facing a problem with a responsive webdesign in IE9. For you information it’s based on getskeleton.com, but that’s not really part of the problem.

My responsive webdesign was working just perfectly in all the browsers I expected it to work – except for IE9. I had done an early test that didn’t show any problems, but today, it suddenly broke in IE9. Or in other words, IE9 started ready a this media query for mobile devices:

@media only screen and (max-width: 767px) {}

Googling the problem didn’t really help me out, but since a lot of you out there have been facing something similar I though I’d share my findings here. Basically I knew that the site was running perfectly in an early state. So I was convinced that the problem was “my fault” and at some point I must have done something wrong.

The solution / answer was found by using w3’s CSS validator. I simply pasted the entire CSS content into their “By direct input” and there it was – a simple CSS error. My CSS looked like this:

#header-nav-wrap-small ul li.current-menu-item ul li a,
#header-nav-wrap-small ul li.current-menu-parent ul li a,
#header-nav-wrap-small ul li.current-menu-ancestor ul li a,
#header-nav-wrap-small ul li ul li a
padding: 5px;
background: #eeeeee;
color: #0C4A5D;
}

I didn’t’ realize that I missed out the beginning {. Chrome, Safari, FF, etc. handled my poor CSS without any problems, but IE9 was so “kind” to break the media queries and forced me to discover the bug.

Bottom line: “Small” CSS errors can force IE9 to jump into the wrong media queries and break your responsive design. So if you experience something like this – well, check out your CSS, there might be some bugs in the machinery.