Articles

Use Different Styles For Different Internet Explorer Versions

Internet Explorer

If you ever built a website before then you will know the problems you face with trying to cater for all the different versions of IE. The problem with IE is that the browser does not behave the same way as the other browsers, but to make it worse the different IE browsers can behave differently. This is why it's important to be able to not only test your website on the latest version of IE but for all the previous IE versions which are still currently in use.

At the moment the lowest version browser which is still supported is version IE6...they are currently in IE version 10 beta.

IE6 is a 10 year old browser and with the rapid changing world of the web you can easily see how IE6 will not be able to support most of the modern web standards and can certainly not support CSS3 and HTML5. For this reason if you want the website to be usable in IE6 and the other versions then you need to make sure you have different styles for the different internet explorer versions.

Internet Explorer Hacks

There are a few hacks you can put in your CSS to do different things in each browser.

IE6 Only Hacks

* html input {
     padding:10px;
}

IE7 Only Hacks

*+html input {
     padding:10px;
}

IE8 Only Hacks

input {
     padding:10px\0/;
}

IE7 And IE8 Only Hacks

input {
     padding:10px\9;
}

Not IE7 Hacks

_input {
     padding:10px;
}

You should try to avoid using hacks as you can not predict how other browsers will render them or if they will affect the display on the other browsers.

How To Use IE Only CSS

If you don't use hacks then there are other ways which you can apply different styles on different IE browsers.

The best ways to deal with the different browsers is to either use a different style sheet depending on the browser version you are using or to change the class of the HTML element.

Change The Class Of The HTML Element

If you change the CSS of the top document element then you can apply this in your CSS file.

When the browser is IE6/IE7/IE8 you will add the class

<html class="ie6">
<html class="ie7">
<html class="ie8">

Then in your CSS you can change the style of different elements by doing the following

html.ie6 input { padding:10px; }
html.ie7 input { padding:15px; }
html.ie8 input { padding:20px; }

That's how you can apply different styles depending on the browser but you need to be able to add the browser version in the html tag to start with, this can be done with either Javascript or by using conditional HTML comments.

Conditional If Statement

Below is a code snippet which will create a different html tag for:

  • IE6
  • IE7
  • IE8
  • IE8 or higher
  • Non-ie browsers
<!--[if IE 6]>
     <html class="ie6">
<![endif]-->
<!--[if IE 7]>
     <html class="ie7">
<![endif]-->
<!--[if IE 8]>
     <html class="ie8">
<![endif]-->
<!--[if gte IE 8]>
        <html class="ie9">
<![endif]-->
<!--[if !IE]><!-->
        <html>
 <!--<![endif]-->

Change HTML Element With Javascript

Below is how you can change the HTML tag with Javascript.

<script type="text/javascript">

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for MSIE x.x;
 var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
 if (ieversion>=8)
     //For IE8
     document.getElementsByTagName('html')[0].className+='ie8';
 else if (ieversion>=7)
     //For IE7
     document.getElementsByTagName('html')[0].className+='ie7';
 else if (ieversion>=6)
     //For IE6
     document.getElementsByTagName('html')[0].className+='ie6';
}

</script>

If you prefer using jQuery here is the same but in jQuery.

if ($.browser.msie) {
    if(parseInt($.browser.version) == 8){
         //For IE8
         $("html").addClass("ie8");
    } else if(parseInt($.browser.version) == 7){
         //For IE7
         $("html").addClass("ie7");
    } else if(parseInt($.browser.version) == 6){
         //For IE6
         $("html").addClass("ie8");
    }
}

Now you can apply these styles in your CSS files.

Using Different Style sheets

The other option is to use a different style sheet depending on the browser.

You can use conditional HTML comments to change the style sheets used by the browser.

<!--[if IE 6]>
     <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<!--[if IE 7]>
     <link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if IE 8]>
     <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
<!--[if gte IE 8]>
     <link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->
<!--[if !IE]><!-->
     <link rel="stylesheet" type="text/css" href="default.css" />
 <!--<![endif]-->

Using the above methods you can make sure that you have different styles for all the different IE browsers which should help you create the same presentation in all IE browser versions.

Back to top

Fastest WordPress Hosting With WPEngine

Stunning speed, powerful security, and best-in-class customer service. At WP Engine.

Risk free for 60 days