IE fix for Omega theme?

Question

In the past, I have used the Fusion theme for designing web sites. Recently I started using the Omega theme, and realized a big problem with it. I went to look at it in IE, and it looks terrible. In Fusion, there is an IE fix in which, there is a separate css file for ie. I can't seem to figure out how to do this in omega. I know that there has to be a way, because the acquia site is themed in Omega, and it looks fine in IE. how is it that I go about fixing this problem?

Answer 1

You can just add the following code into your template.php file

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

Answer 2

As dddave mentioned it is probably because you have on your site more then 31 css files. Ie will use only 31 first files - other will be left alone.

What can you do with it? On live site - turn on standard drupal css aggregation. I will make creating theme painfull - you will need to clean cache(admin/settings/performance) after every css file change. So you can use the IE CSS Optimizer module:

Then there will be more option for css aggregation. It will make possible to aggregate all module's css, and having all theme's files included directly. Hopefully total number of files will be below 31.

For making easier adding condition styles for IE try the Conditional Stylesheets module:

Answer 3

The module conditional styles and Omega don't work well (last time I checked), so basically what I did was adding this to template.php

function custom_theme_preprocess_html(&$variables) {
  drupal_add_css(path_to_theme() . '/css/ie-lte-8.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE));
  drupal_add_css(path_to_theme() . '/css/ie-lte-7.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
}

Doing it this way, IE-specific styles get rendered last, after all the other CSS files in Omega.

Answer 4

As well, if the earlier reposes didn't help: Omega is in HTML5. You have to be certain a link html5shiv.js or html5shim.js is included in the head of the page.tpl.php file. Older versions of IE just won't know how to behave.

Answer 5

Add this function to your template.php

function theme_preprocess_html(&$vars) {
  // Setup IE meta tag to force IE rendering mode
  `enter code here`$meta_ie_render_engine = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
      'content' =>  'IE=edge,chrome=1',
      'http-equiv' => 'X-UA-Compatible',
    ),
    '#weight' => '-99999',
  );

  // Add header meta tag for IE to head
  drupal_add_html_head($meta_ie_render_engine, 'meta_ie_render_engine');

   drupal_add_css(path_to_theme() . '/css/ie-lte-8.css', array(
    'group' => CSS_THEME,
    'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE),
    'preprocess' => FALSE)
  );
}
function omega_subtheme_css_alter(&$css) {
  foreach ($css as $key => $value) {
    if (preg_match('/^ie::(\S*)/', $key)) {
      unset($css[$key]);
    }
    else {
      $css[$key]['browsers']['IE'] = TRUE;
    }
  }
}