How to add conditional css for Internet Explorer?

| | 1 min read

Some alignment issues occurring in IE may be a test for your patience. We had once worked in a Drupal 6 site, and the design look well every where, but there is a small alignment problem shown up in IE. Applying a conditional style sheet saved our time. Read on to know about how to apply conditional css in a Drupal 6 site.

This can be done by adding conditional comments to your page template file. Conditional comments are a sort of instructions only meant for IE and it is available from version 5 onwards.


<!-- [if IE]>
<![endif]--> 

It is similar to HTML comment and so other browsers treat it as a comment and IE can interpret the

and it will parse it as normal HTML.

Steps to set conditional css in drupal.

Add a css file in to your custom theme's folder, which is supposed to address IE issue.

Then in your page.tpl.php file, add the following piece of code inside tag.


<?php
<!-- [if IE]>
<link rel="stylesheet" media="all" href="<?php print $base_path?><?php print drupal_get_path('theme', 'theme_name') ?>/css/ie.css" /> 
<![endif]-->
?> 

This will add the css file specified(in the above example it is ie.css), only in IE and you got your problem solved. But if you have a lot of issues in IE, this is not suitable, because you have to redefine almost all of the rules in this css.

Reference: