No matter which size is my viewport, the narrow.css file is the only one triggered with IE7 and IE8 in my Omega site

Question

I´m using Omega theme in D7. After configuring all the .css files to achieve an adaptive design, I realize that ie7 and ie8 looks like hell.

The problem? The different css files (that have different codes according to different mediaqueries) are not triggered.

No matter which size is my viewport, the "narrow.css" file is all I see. Not even the default.css

Is there a workaround to this?

Thanks!

Answer 1

You can load css file by using this code:

drupal_add_css(path_to_theme() . '/css/ie8.css', array(
  'weight' => 999, 
  'browsers' => array('
      !IE' => FALSE, 
      'IE' => '(lt IE 9)&(!IEMobile)'), 
      'group' => CSS_THEME)
);

== 2nd option ==

try Respond.js module

This Drupal module provides IE 6-8 support for responsive themes.

Answer 2

I ran in to this issue last week and respondjs, for whatever reason, didn't work for me. I ended up using Omega 3, Delta, Context, and Context Useragent together to fix the issue.

1. Add a new template in Delta (Appearance -> Delta -> Add).
2. Give your template a title and select your Omega theme from the dropdown and save it.
3. On the next screen click the "configure" option for your template. This will bring up an Omega layout configuration screen.
4. Uncheck the "Enable the responsive grid" box and save it. This gives you a non-responsive version of Omega that will work in IE LTE 8.
5. Add a new context (Structure -> Context -> Add).
6. Give it a name.
7. Select "Useragent string" as a condition and enter "MSIE 8" in the field.
8. Select "Delta" as a reaction and select your newly created Delta template.
9. Repeat 5-8 for IE7 (use MSIE 7 for step 7).
10. Clean up the issues with an IE LTE 8 stylesheet.