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