Internet Explorer is the bane of the Thesis developer’s existence. You get your page looking just right in Firefox, then discover that it is a mess in IE. Since so many people use Internet Explorer, it is important to get your site looking right in that browser.

Microsoft went their own way when writing Internet Explorer, ignoring web standards that all other browsers adhere to. There are many things that work in every browser except IE. This is particularly true about IE6 and IE7 — IE8 does a much better job of rendering the page, but it still has its quirks.

What are you to do? If you change the code to suit IE, it’s wrong in every other browser, and if you change your code to make Firefox, Safari, and Chrome happy, your page is borked in IE, which is used by over 50% of all your visitors!

There is a solution — actually two solutions — described in this article. Each will detect whether the user’s browser is Internet Explorer. They will let you write CSS code to make the page look right for IE users while leaving your main CSS code in custom.css intact for other browsers.

The end result is that you can make your site look the same in all browsers!

Browser detection using pregmatch

This method of detecting Internet Explorer will let you write CSS code for each version of IE individually, or for the IE browsers as a group. It uses the PHP regular expression (regexp) function pregmatch().

There is one drawback to this solution: If you are using a caching plugin like WP-SuperCache it might not work, or the results may be unpredictable. If you are using a caching plugin, then the HTML method described below is the one you need to use.

How it works

PHP has a superglobal variable called $_SERVER, which contains information about the user’s browser, among other things. We will use it to set a variable named $browser that can then be parsed by the pregmatch() function. This is wrapped in an if statement that tests whether the browser is IE or not.

If the browser is Internet Explorer, we will use the HTML style tag to execute CSS code just for IE. This CSS code is written just like you would in custom.css.

First example: Executing CSS code for all Internet Explorer browsers

If all the versions of Internet Explorer can use the same CSS code to correct their problems, this is the version to use. It simply detects whether the browser is some version of IE by looking for the browser code “MSIE.” The code goes in your custom_functions.php file. It doesn’t matter where you put it in the file, but I usually put it at the beginning before all other functions.

/*=================================================*/
/* BROWSER DETECTION TO EXECUTE IE HACKS           */
/*     USING PREGMATCH                             */
/* Version 1.0                                     */
/* Written by Mike Nichols January 3, 2010         */
/* Website: http://thesisthemetools.com/           */
/* Copyright (c) 2010 by Michael L Nichols         */
/* License: Creative Commons Share-Alike 3.0       */
/* http://creativecommons.org/licenses/by-sa/3.0/  */
/* THIS NOTICE MUST STAY WITH ANY COPY DISTRIBUTED */
/*=================================================*/

/*---------------------------------------*/
/* detect all Internet Explorer browsers */
/*---------------------------------------*/
function browser_detection_all() {
	$browser = $_SERVER['HTTP_USER_AGENT'];
	if (preg_match("/MSIE/i", $browser)) {
?>
	<!-- HACKS FOR ALL IE BROWSERS -->
	<style type="text/css">
	.custom #some_id { background: red; }
	.custom .some_class { color: red; }
	</style>
<?php
	}
}
add_action ('wp_head','browser_detection_all');

Second example: Executing CSS code for individual versions of IE

What if the CSS code that works for Internet Explorer 8 doesn’t work for versions 6 or 7? Or more commonly, the hacks for IE6 are not needed in IE8, and maybe not in IE7. I have had occasion to write different code for IE6, 7 and 8 for the same site!

In this case, you need to be able to write code for an individual version of Internet Explorer. The following version of the pregmatch method will detect which version of IE is being used and let you write CSS code just for that version. Again, it can go anywhere in your custom_functions.php file:

/*=================================================*/
/* BROWSER DETECTION TO EXECUTE IE HACKS           */
/*     USING PREGMATCH                             */
/* Version 1.0                                     */
/* Written by Mike Nichols January 3, 2010         */
/* Website: http://thesisthemetools.com/           */
/* Copyright (c) 2010 by Michael L Nichols         */
/* License: Creative Commons Share-Alike 3.0       */
/* http://creativecommons.org/licenses/by-sa/3.0/  */
/* THIS NOTICE MUST STAY WITH ANY COPY DISTRIBUTED */
/*=================================================*/
/*----------------------------------------------*/
/* detect individual Internet Explorer browsers */
/*----------------------------------------------*/
function browser_detection_indiv() {
	$browser = $_SERVER['HTTP_USER_AGENT'];
	if (preg_match("/MSIE 6.0/i", $browser)) {
?>
	<!-- IE 6 HACKS -->
	<style type="text/css">
	.custom #some_id { background: red; }
	.custom .some_class { color: red; }
	</style>
<?php
	}
	elseif (preg_match("/MSIE 7.0/i", $browser)) {
?>
	<!-- IE 7 HACKS -->
	<style type="text/css">
	.custom #some_id { background: white; }
	.custom .some_class { color: white; }
	</style>
<?php
	}
	elseif (preg_match("/MSIE 8.0/i", $browser)) {
?>
	<!-- IE 8 HACKS -->
	<style type="text/css">
	.custom #some_id { background: blue; }
	.custom .some_class { color: blue; }
	</style>
<?php
	}
}
add_action ('wp_head','browser_detection_indiv');

Browser detection using HTML

There is another method of detecting the Internet Explorer browser which uses an HTML conditional statement. It should be used when you have the WP-SuperCache plugin or another caching plugin activated on your site.

Rather than writing CSS code directly in the custom_functions.php file as in the other solution, you create a separate file that is linked, or read into, the page while it is being built. This file contains your CSS commands, which are written in exactly the same way as in the custom.css file.

Once again there is a drawback: This method cannot detect individual versions of Internet Explorer, only that the browser is some version of IE. Therefore, the CSS commands in the file being read must apply to all versions of IE.

How it works

This solution uses the conditional statement <!--[if lte IE 8]><![endif]-->. If the browser is less than or equal to Internet Explorer 8, then the commands between the if and endif statements are executed.

In this case, the commands link the external CSS file named ie-hacks.css into the page.

Although it may seem that you could detect individual browsers with the code lte IE 7 or lte IE 6, I have never gotten it to work — all versions of Internet Explorer see the “IE” and execute the code anyway.

The code

Following is the code to put into custom_functions.php file. You may name your external CSS file anything you want. If you put the external file into your /custom folder, it will be editable by the Thesis editor.

/*=================================================*/
/* BROWSER DETECTION TO EXECUTE IE HACKS           */
/*     USING HTML                                  */
/* Version 1.0                                     */
/* Written by Mike Nichols January 3, 2010         */
/* Website: http://thesisthemetools.com/           */
/* Copyright (c) 2010 by Michael L Nichols         */
/* License: Creative Commons Share-Alike 3.0       */
/* http://creativecommons.org/licenses/by-sa/3.0/  */
/* THIS NOTICE MUST STAY WITH ANY COPY DISTRIBUTED */
/*=================================================*/

function link_ie_hacks() {
?>
  <!-- Link IE hacks -->
  <!--[if lte IE 8]><link rel="stylesheet" 
  href="<?php bloginfo('template_url') ?>/custom/ie-hacks.css" 
  type="text/css" media="screen, projection" /><![endif]-->
<?php
}
add_action('wp_head','link_ie_hacks');

Conclusion

I hope you are able to use one or both methods described above in your Thesis theme. They are valuable tools to help you make your page look the same in all browsers.

As always, your comments are welcome. If you want to contact me directly, just click on the “Contact” tab in the menu.

©2010 Michael L Nichols. All rights reserved.

Tags: