Styling Internet explorer with separate CSS

This is how you can use a different CSS file for the different Internet Explorer browser or for use for other actions.

  <!--[if IE]>
<SCRIPT LANGUAGE="Javascript">
alert("Congratulations! You are running Internet Explorer.");
</SCRIPT>
<P>Thank you for closing the message box.</P>
<![endif]-->  

 

Item Example Comment
IE [if IE] The string "IE" is a feature corresponding to the version of Internet Explorer used to view the Web page.
value [if IE 7] An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version. For more information, see Version Vectors.
WindowsEdition [if WindowsEdition] Internet Explorer 8 on Windows 7. The string "WindowsEdition" is a feature corresponding to the edition of Windows used to view the Web page.
value [if WindowsEdition 1] An integer corresponding to the edition of Windows used to view the Web page. Returns a Boolean value of true if the value matches the edition being used. For information about supported values and the editions they describe, see the pdwReturnedProductType parameter of the GetProductInfo function.
true [if true] Always evaluates to true.
false [if false] Always evaluates to false.

The following table describes the operators that can be used to create conditional expressions.

Item Example Comment
! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.

Source http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx

In Drupal you can add conditional stylesheets in template.php or in page.tpl.php. Below is how you can add it in template.php using the variable table.

<?php
function zen_preprocess_page(&$vars, $hook) {

 
// Add conditional stylesheets.
 
if (!module_exists('conditional_styles')) {
   
$vars['styles'] .= $vars['conditional_styles'] = variable_get('conditional_styles_' . $GLOBALS['theme'], '');
   
$vars['styles'] .= $vars['conditional_styles'] = variable_get('conditional_styles_IE7_IE6', '');
  }

...
}

//To set up the variable you can temporary put these lines of code in the function preprocess_page.

variable_set('conditional_styles_IE7_IE6', '<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/zen/zen/ie76.css" />
<![endif]-->'
);
?>

Differentiating between IE 5, IE 6 and IE 7, by using underscore hack or star property hack (commonly mistaken for the star HTML hack).

.box {
   background: #00f; /* all browsers including Mac IE */
   *background: #f00;         /* IE 7 and below */
   _background/**/: #0f0;     /* IE 5.0 */
   _background:/**/ #f62;     /* IE 5.5 only */
   _background/**/:/**/ #f61; /* IE 6 only */
   _background: #f60;         /* IE 6 and below */
}

Source: http://www.ejeliot.com/blog/63

Knowledge keywords: