Working with Internet Explorer

Adaptivetheme includes two sophisticated yet easy to use tools for working with Internet Explorer while building your themes.

  1. A simplified way of adding conditional stylesheets to your theme.
  2. Special CSS selectors you can use to target specific versions of IE.

Method 1: IE Conditional Stylesheets

In your subthemes template.php file you will some special PHP code you can use to add conditional stylesheets. Most of it is commented out by default so you need to remove the comments so the PHP can be used - there are instructions on which line to remove in template.php, so don't worry about that. Lets look at the code:

<?php
/**
  * Load IE specific stylesheets
  * AT automates adding IE stylesheets, simply add to the array using
  * the conditional comment as the key and the stylesheet name as the value.
  *
  * For example to add a stylesheet for IE8 only use:
  *
  *  'IE 8' => 'ie-8.css',
  *
  * Your IE CSS file must be in the /css/ directory in your subtheme.
  */
 
$ie_files = array(
   
'lte IE 7' => 'ie-lte-7.css',
  );
 
load_subtheme_ie_styles($ie_files, 'adaptivetheme_subtheme');
?>

If you haven't already you must change all instances of 'adaptivetheme_subtheme' in your new subtheme to your themes name. Our theme is called footheme, so lets get that bit of house keeping out of the way now:

   load_subtheme_ie_styles($ie_files, 'footheme');

Now, the bit we are really interested in is the following code example, which is adding a stylesheet called ie-lte-7.css and will use lte IE 7 as the conditional comment so the file targets all versions of IE7 or less.

    'lte IE 7' => 'ie-lte-7.css',

As you can see the syntax is very simple: '[conditional comment]' => '[stylesheet name]',. Remember, this is code - do it exactly the same as the example, don't miss a quote!

So lets add an additional stylesheet that is for IE8 only and called ie-8.css:

    'lte IE 7' => 'ie-lte-7.css',
    'IE 8' => 'ie8.css',

Once you have added this one line to the array save your changes and that's the hard part of adding a new conditional stylesheet over with.

Where are the actual files? Glad you asked - all your stylesheets must be directly inside the /css directory inside your subtheme. If the IE stylesheets are not in the root of that folder the system won't find them - don't put them in a sub-directory of /css.

Note that you have to create this file manually yourself and save it there, the system won't create it for you.

So your new ie-8.css file will be in sites/all/themes/footheme/css/ie-8.css, or wherever you have placed your theme (could be different if you have a multisite installation).

You can learn more about conditional comments here at one of my favorite sites: http://www.quirksmode.org/css/condcom.html

Method 2: Use the IE CSS selectors

Sometimes you really don't need or want to add an entire stylesheet just to add a few fixes for IE, and you don't want to fill up your stylesheet with IE hacks. Adaptivetheme borrows from the HTML5 Boilerplate project and writes IE version specific selectors into the HTML element. We can use these selectors to target one or more versions of IE in our normal stylesheets.

JohnAlbin of the Zen project has improved the Boilerplate method by taking a more targeted approach with the IE conditions and added more classes to help reduce the amount of CSS you need to write. Hats off to John, he's done a great job here and we thank him for this code. Here are the classes you can use to target one or more versions of Internet Explorer:

  .iem7  - target IE7 Mobile
  .ie6   - target IE6
  .ie6-7 - target IE6 and 7
  .ie6-8 - target IE6, 7 and 8
  .ie7   - target IE7
  .ie8   - target IE8

So, those are the two methods we provide to easily target Internet Explorer. Hope you have fun with them!

Last updated 22nd September, 2011 - 10:00am