How To: Create an IE Specific Stylesheet
If you are a web developer you know how painful is to write a webpage that behaves same in all the web browsers. Generally the webpage created for Firefox behaves pretty much the same in Chrome, but Internet Explorer has its own problems. Whether it be problem with Multiple Selection in IE or the AJAX Cache Problem, Internet Explorer has always been a browser which needs special attention. Thus, generally how we deal with IE is we create a separate stylesheet altogether and include it in the webpage whenever the client is using Internet Explorer.

IE Only

Here is the basic technique for an IE-Only stylesheet: 
<!--[if IE]>
 <link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

Code language: HTML, XML (xml)

Non-IE Only

The opposite technique, targeting only NON-IE browsers: 
<!--[if !IE]>
 <link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]-->

Code language: HTML, XML (xml)
If you need to get include stylesheet for specific versions of IE, here are a few examples.

IE 7 ONLY

<!--[if IE 7]>
 <link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->

Code language: HTML, XML (xml)

IE 6 ONLY

<!--[if IE 6]>
 <link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]-->

Code language: HTML, XML (xml)

IE 5 ONLY

<!--[if IE 5]>
 <link rel="stylesheet" type="text/css" href="IE-5-SPECIFIC.css" />
<![endif]-->

Code language: HTML, XML (xml)

IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="IE-55-SPECIFIC.css" />
<![endif]-->

Code language: HTML, XML (xml)

VERSION OF IE VERSION 6 OR LOWER

<!--[if lt IE 7]>
 <link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->

Code language: HTML, XML (xml)

View Comments

  • I preffer using cssbrowserselector js library solution: http://rafael.adm.br/css_browser_selector/
    CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.
    I find this solution easier then conditional importing the css files.

  • Hi viral
    Nice blog
    i have a question
    i used

    i dont have "IE-6-SPECIFIC.css physically.Where is that css?

    With the same code above ,it doesnot work for IE.Why is it so
    also i tried with

    on ie 8 &9 .It doesn't work as well.
    On clicking Sports menu...sub menu does not open instead language menu goes down..
    on clicking sports again technology menu comes up again.
    i'm clueless.
    Plz help me in getting it right..
    Thanx

  • my website is totally animated with java script but not runs in internet explorer...
    should you please help to solve them.

  • I have made 2 page one is a.html and another one is b.css,
    In a.html i have put this code

    aaaa

    and in b.css
    .box {

    background: gray; /* standard */

    background: pink\9; /* IE 8 and below */

    *background: green; /* IE 7 and below */

    _background: blue; /* IE 6 */

    }

    not working in any version of IE
    plz suggest me what mistake i m doing

Leave a Comment
Share
Published by
Viral Patel
Tags: CSS hacked internet explorer
15 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

5 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago