0

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?

  • 1
    A specific problem with a theme or module should be reported in its issue queue – Laxman13 Aug 26 '11 at 4:47
  • 1
    Did you check if you are aggregating your CSS files to make sure that you didn't run into IE's file limit? (On the performance page) Which version of IE? I am pretty sure IE6 and maybe IE7 cannot handle Omega themes very well... You should definitely check the issue queues of Omega theme and/or the Omega based theme you are usin. Search there for IE issues and make sure you include "any" issue in your search not only active ones. – dddave Aug 26 '11 at 10:06
2

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));
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:

  • I am not having a problem that just started, I was wondering if there was an IE fix at all for omega – Ephraim Aug 29 '11 at 20:07
  • So everything works ok, besides you need to add file with ie fixes? Which version of core do you use? – Marcin Wosinek Aug 29 '11 at 20:11
  • the most recent version of 7 – Ephraim Aug 29 '11 at 20:12
  • which I believe is drupal 7.7 – Ephraim Aug 29 '11 at 20:18
  • 3
    So this module: drupal.org/project/conditional_styles seems to be solution. – Marcin Wosinek Aug 30 '11 at 7:29
1

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.

0

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.

0

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;
    }
  }
}
  • NOTE: You need to write css for ie saperately "God helps those who help themselves." -- Benjamin Franklin – Nilesh Chhatbar Sep 2 '14 at 11:18
  • Hello and welcome. Please remember that this site was not meant to be a free code writing service. Posting code is OK, but knowledge is more important. Could you add explanation why this code is needed and how does it work to answer the question and solve OPs problem? – Mołot Sep 10 '14 at 13:47
  • Hi Molot. Omega theme use the different layout for the different device. And IE 8 or lower then it not able to detect the which layout should use. So, using above code we simply detect the browser and if browser is ie-8 then we apply a different style.css for only that browser and one can write a css for the ie only. – Nilesh Chhatbar Sep 11 '14 at 6:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.