Reponsive Design: can't get anything to work on IE

Mobile
1

I can’t convert my website to responsive design because I can’t get anything to work on IE…

and now I just find out that – oh joy – media queries don’t work in IE… gee, what a suprise, eh… stupid me, expecting IE to work like a sane browser… I’m SO SICK of everyting being a problem in IE… and when you’re on a mac and don’t have access to IE, even more fun…:-o

everything I have done for IE, every time I go to the library to test, nothing, absolutely nothing, works in IE 7 or 8

for example, these use respond.js for the media queries for IE, but I could not get them to work in IE 7 or 8…

http://mayacove.com/dev/rd/index3_rj.html
http://mayacove.com/dev/rd/paper_rj.html

do these two pages look in IE 7 & 8 the way they should look in other browsers?

here, http://mayacove.com/dev/rd/index3_mq_script.html
I applied another script I found for the media queries for IE…
does this look in IE 7 & 8 the same as in other browsers?

and here, I applied modernizr for the HTML5 tags…
http://mayacove.com/dev/rd/test_rd_mod.html
does this look in IE 7 & 8 the same as in other browsers?

thank you…

2

At least you know you are a member of a very large and sympathetic club… :smiley:

Frankly, I see no purpose in trying to get Internet Exploder to recognize media queries. Let that browser just use the default styles (which have to be for desktop, obviously) and be done with it. Anyone clueless enough to be using IE 7 or 8 will be quite satisfied with a fixed width layout, even if it scrolls right a bit.

If your default styles are for mobile, you could always just offer up a conditional style sheet to IE with a fixed desktop layout. That’s probably easier than messing with JS, and more than IE deserves, IMHO.

Edit:

By the way, you certainly can test IE on your Mac. I have four versions of it installed on my Mac, via VMWare Fusion, though there are verious other options. As much as I hate IE and Windows, it is very handy to have such easy access to it. I can have multiple versions of IE open at once, alongside all my other browsers.

3

thank you for your help & suggestions, Ralph…

the thing is, I’m a developer and I need to learn to make things work in IE 7 & 8…:wink: I’ve always been very good with cross-browser/IE stuff, but this is cross-browser on a different level…;-o

this is the site I’ve been using as example for responsive design…
www.bostonglobe.com… they support all the way from IE6 to the devices, they also support noscript and have print stylesheets… it’s friggin’ amazing, they support everything…:wink:

I actually also did you suggest, namely just use a style sheet for IE… (I guess should be for IE8 & older, yes?)

so I also tested these in IE at the library yesterday…
page 1
page 2

IE would just not load the stylesheet that I have in the conditional, for example


[FONT=Courier New]<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="css/ie_paper.css">
<![endif]-->[/FONT]

and if you use HTML5 tags like <section>, <article>, etc… just doing a styleshseet for IE 7 & 8 won’t cut it…right?? :wink: that’s where modernizr comes in, yes?

thanks again…

4

so regarding modernizr… does this work in IE 7 & 8?

(i.e., does it look the same in FF, Chrome, Safari, as it does in IE??)

thank you…

5

Ralph,

this VMWare Fusion that you mentioned, you don’t have to restart your machine to switch from mac os to windows, right? because I know with some of these things you do have to do that…
not being able to test on IE is simply not an option with all this RD stuff, media queries, HTML5… because of course EVERYTHING is a problem in IE… (gasp…:wink:

thank you…

(PS (edit): of course what this tells me also is that any IE browser older than IE9 will land in the dustbin of history double quick…:wink: I know IE9 and above are much less problematic…)

6

Yes, same with Parallels and even the free alternative of VirtualBox (I believe). Basically you can have IE (even in multiple versions)—along with all the other Windows browsers, for that matter—open along with all your other Mac browsers. It works seamlessly, and is very handy indeed.

7

so here I have two pages…

http://mayacove.com/dev/rd/index3_ie.html
http://mayacove.com/dev/rd/index3_ie_mac.html

in both am loading IE stylesheet… one (the first one) with a conditional for IE… the other one (ie_mac.html) am loading exact same stylesheet, but w/o the conditional for IE… yet when I go to the library and load these two pages in IE they look completely different why is this? (they look fine in IE9 & 10, but in 8 & 7 it’s like they’re not reading the ie_index.css at all…)

I don’t get this at all… here are screenshots I managed to at the library yesterday:
http://mayacove.com/dev/ie.gif
http://mayacove.com/dev/non_ie.gif

you can’t see it very well in these screenshots, but you can see they’re loading diff style sheets…

don’t get what’s happening…

in this one
http://mayacove.com/dev/rd/index3_ie.html

have:

[FONT=Courier New]
<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="css/ie_index.css">
<![endif]-->[/FONT]

in the other one,
http://mayacove.com/dev/rd/index3_ie_mac.html

I have the same thing w/o the conditional…

they both look the same in all browsers, except in IE 7 & 8 they look completely different… why is this?

thank you…

thank you…

8

You may want to look into respond.js:

9

yes I have looked into response.js…

here’s an example with response.js…

does it look the same in IE 7 & 8 as it does in IE9 & 10 (& the other browsers)?

thank you…