Aweber - Email Marketing Made Easy
How to Use Conditional IE Only Stylesheets in Thesis

How to Use Conditional IE Only Stylesheets in Thesis

February 24, 2011 · 1 comment

in Miscellaneous, Thesis, Thesis User's Guide

This post is part of a series of tips & tricks that I have hand selected from the Thesis User's Guide, and which I have found most helpful when customizing and enhancing Thesis. You should check out the guide for some excellent tips.
Thesis 1.x Notice: Thanks for reading this post! So, here's the deal. I wanted you to be aware that this post was written prior to the release of Thesis 2. So that means the instructions or other information provided applies specifically to Thesis 1.x and not the latest 2.x version. Thanks!

The bane of any web developer’s life is a little old browser called Internet Explorer. I can’t tell you how many hours I’ve spent over the years trying to get a website to look right in IE. The only advice I can give is to learn the common IE bugs that will get you every time and also to check each element in IE as you code it and not wait until the end.

IE Only Stylesheets

There are a bunch of ‘hacks’ which can be used in your standard stylesheet to target various versions of IE. In fact there are also some for Opera, Safari and Chrome. But using hacks are not always a recommended solution. The generally preferred way of dealing with some of the IE issues is to create a stylesheet that will be read only by IE, so you can target the inconsistencies with this browser. You do this by using conditional stylesheets. References will be provided at the end of this post for further reading, but here are two methods for referencing an IE-only stylesheet in Thesis.

Method #1: Add Custom Classes to the Body Tag

This is an interesting one and is somewhat contradictory to what I just said above. It isn’t actually referencing an external IE only stylesheet, but rather a unique class is added to the body tag based on which version of IE is being used to view the page. If you wish to target IE, you would simply reference the applicable class in your stylesheet. This is sort of a variation on a solution presented by Paul Irish by adding classes to the body tag.

Add this code to your custom-functions.php file.

function add_ie_classes($classes) {
  $browser = $_SERVER['HTTP_USER_AGENT'];
  if (preg_match("/MSIE/", $browser)) {
  $classes[] .= 'ie';
    if (preg_match("/MSIE 6.0/", $browser))
	  $classes[] .= 'ie6';
    elseif (preg_match("/MSIE 7.0/", $browser))
	  $classes[] .= 'ie7';
    elseif (preg_match("/MSIE 8.0/", $browser))
	  $classes[] .= 'ie8';
  }
  return $classes;
}

add_filter('thesis_body_classes', 'add_ie_classes');

Note that if you’re using caching plugins, this method may not be ideal.

Method #2: Reference a Custom IE Stylesheet using a Conditional Statement in the Head Section

Create a new stylesheet (named iestyles.css in this example) and save it in your Thesis custom folder. This stylesheet will contain your IE-only styles. Then place this code in the custom_functions.php file:

function add_ie_css() {
  $sheet = get_bloginfo('template_url') . '/custom/iestyles.css';
  echo "n";
  echo '<!--[if lte IE 8]><link rel="stylesheet" href="' . $sheet . '" type="text/css" media="screen, projection" /><![endif]-->';
}

add_action('wp_head','add_ie_css');

If you’d like to target a specific version of IE you would change the conditional statement. You can read more about that in the resources below.

Source: Conditional CSS for IE

Was this post helpful? Consider subscribing to my blog via RSS or

This Site Runs on the Thesis WordPress Theme

Thesis Theme thumbnail

If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced user, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.

If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:

{ 0 comments… add one now }

Leave a Comment

When commenting, you can use basic HTML tags. If you are pasting in any code, please escape it here and then include that code within <pre></pre> tags. Thanks!

CommentLuv badge

{ 1 trackback }

Previous post:

Next post: