I have a question about using IE8 + 7 with Omega.
Is there a way to have a site use the responsive grid options for all browsers except IE8 + 7, and just have IE8 + 7 sent the non-responsive default layout?
I bring this up as I just did my first small responsive site using Omega. But I hadn't realized that IE8 didn't recognize media queries, and hence the responsive settings would not work. So right now it seems like I have a site that I can either turn on my responsive grid settings and not have the site display correctly in IE8 + 7, or choose to turn off the responsive settings and just display the one layout to all media.
I'm sure everyone involved in Omega's development is on top of this, but I haven't found any answers yet. Any help would be appreciated.
Comments
Correct me if I am wrong, but
Correct me if I am wrong, but shouldn't the media queries only come in to play if the site is viewed at a certain resolution?
Have you tried anything like this:
<!-- If is lower than IE9 use conditional comments --><!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="all" />
According to microsoft, IE 8 and 7 support media queries: http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx
Maybe I'm wrong
I might be wrong about why IE 8 + 7 don't seem to be working for me when I have responsive layouts toggled on. I thought I had seen some reference to the media queries being the culprit in other discussions by Jake. I just know it's not working for me right now.
I have tested and when I turn off responsive grid layouts the site renders properly (in my narrow layout only).
I'll need to try some other things. I was hoping that this was not an unknown problem and that someone had been through this previously. It seems like, given the share of IE8 usage being able to feed IE8 it's own code while still providing a responsive site to everything else would be possible.
IE8 media queries not working
IE8 media queries not working .. here either (Windows 7 64bit if it makes a difference). Also: I'm using the main theme direct to test layout possibilities with no edits at all - so this is a 'neat' result and custom css/code errors can be ruled out. And when I say they're 'not working' all I mean is that the current viewport/browser size/resize is completely ignored but stays at the maximum width specified in theme settings unlike Arne's problem.
@bhosmer I'm still a bit of noob with Drupals (I'm only two years in ;-) and I'm not a CSS expert but according to your msdn.microsoft.com library link:
Media Queries
The following CSS3 media query properties are supported in Internet Explorer 9:
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
No mention of IE8/7 there - unless I've read that wrong.
By the way devs, great work so far on Omega. It's a great initiative and I'm building my new site around it so keep going - and do let us know about IE8/7 scenarios. I'll gladly test further and more precisely if that would help. I have IE 6, 7, 8 and 9 all running on different set-ups (Windows only) here.
Regards,
Colin
Just figured it out
I just figured out how to do what I wanted. Being able to do this seems to have been built right in, but I didn't realize it. Now the Grid Settings options on the Layout Configuration page make perfect sense.
I just needed to set up my sub-theme xxxx-temp-alpha-default.css file with the styles I needed to correspond to the default Primary layout I wanted to be shown to older versions of Internet Explorer.
It was actually easy to do a quick verification that the styles I included in my xxxx-temp-alpha-default.css file were working, just by toggling on and off the Enable the responsive grid . Then I tested it using Parallels, XP and IE8 and 7.
Totally great! I may have missed this in the excellent video casts Jake has done, and I'm sure it will be included in the upcoming documentation for 3x.
Once again, I'm impressed with the forethought the developers of Omega have put into this theme.
phew, glad to hear that's working
We definitely spent a good amount of time sweating the details of IE8- browsers. As many of you have noted, IE8- browsers don't recognize media queries. There are ways to trick them into recognizing parts of the specification, but really, it's not worth the trouble.
You'll also notice that the conditionals for IE include !IEMobile
(lt IE 9)&(!IEMobile)So you will still get a responsive experience on a Windows Mobile phone, but not a desktop.