Media Queries and IE7

Based on this tutorial: Adaptive & Mobile Design with CSS3 Media Queries

I’ve been using media queries to optimize a simple website for mobile devices. Looks great everywhere, except IE7. IE7 is applying all the mobile styling instead of ignoring it.

Feeling stupid, but I’ve compared my markup with similar sites and just can’t identify the problem. Have a look:

Saffron Photography

Any suggestions would be appreciated. :slight_smile:

IE8 and under don’t understand media queries, so they’ll ignore them by nature. There is a js script in there assigning a special class to the body element, which then (by what means I’m not sure) tells ie7 to use the styles it’s using.

The adaptive site doesn’t use that.

Bizarre. I don’t remember what that js was supposed to do, but removing it worked like a charm. Thanks a ton!

Also, I had a IE7 bug that hid the navigation unless I included:

input:hover{ cursor: pointer; }

How strange is that?

Hm, sounds suspicious. To be honest, though, I tend to be happy with any old fix for those old browsers these days.