IE 6, 7 & 8 Conditional Stylesheets

Events happening in the community are now at Drupal community events on www.drupal.org.
tchopshop's picture

I have searched the issue queue and I cannot figure out how to create a simple IE only stylesheet using conditional comments... someone on the issue queue mentioned adding a function to the template.php of my subtheme, which I tried, but it didn't work, since it's loaded before other stylesheets from Omega.

I'm tearing my hair out, please help!

Comments

Conditional comments and some html

gkunno's picture

You could try this method, use conditional comments:

Replace the If expression with the one you want. This works for all IE verisons, IE6 upwards need a specific tag, older IE just "If IE", but i dont think there are many ppl. who actually use older IE than IE6, I could however be wrong...

Anyway just make a separate css and call it "why-cant-they-stop-using-ie-already.css" or anything else :), then add the code:

<link rel="stylesheet" type="text/css" href="why-cant-they-stop-using-ie-already.css" />

So the complete code goes like:

<!--[If IE 6]>
<link rel="stylesheet" type="text/css" href="why-cant-they-stop-using-ie-already.css" />
<![endif]-->

PS. Ill bet you dont want to target the css to all versions of IE, so remeber the change the If expression!

Thanks for your help, but you

tchopshop's picture

Thanks for your help, but you misunderstand... Of course I know how to write conditional comments (I'm not a beginner)... but I don't know how to add them to the Omega theme, so that the stylesheets get loaded after the Omega ones.

See this thread:
http://drupal.org/node/1263750

This module may help

jmolivas's picture

This module may help conditional_styles

This module allows themes to easily add conditional stylesheets to the theme's .info file.

; Set the conditional stylesheets that are processed by IE.
stylesheets-conditional[lt IE 7][all][] = ie6-and-below.css
stylesheets-conditional[IE 9][all][] = ie9.css
stylesheets-conditional[IE][print][] = ie-print.css

http://drupal.org/project/conditional_styles

--
http://jmolivas.com/
@jmolivas

if module does not work yo

jmolivas's picture

if module does not work yo may try the following code

<?php

function theme_name_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));
 
drupal_add_css(path_to_theme() . '/css/ie-6.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE 6', '!IE' => FALSE), 'preprocess' => FALSE));
}
?>

--
http://jmolivas.com/
@jmolivas

Hi, if you see this

tchopshop's picture

Hi, if you see this thread:
http://drupal.org/node/1263750

The person who started the thread says that the module did not work with Omega. Someone else suggested the function that you have above, which I tried.

However, that doesn't work either, because it adds the conditional comments into the stylesheet area, but the omega responsive stylesheets are added in the script area, which is loaded after the stylesheets are loaded.

Adding a weight

kdmarks's picture

I'm struggling with the same issue. I finally got the IE conditional sheets to appear after global.css by adding a weight. In template.php, added:

function MYTHEME_preprocess_html(&$variables) {
  // Add conditional stylesheets for IE
  drupal_add_css(path_to_theme() . '/css/ie-8.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE, 'weight' => 115));
  drupal_add_css(path_to_theme() . '/css/ie-7.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'preprocess' => FALSE, 'weight' => 115));
}

Omega Framework

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: