Target IE only with CSS - the easy way

Using the methods below, you can target IE only with CSS. This is very useful, as many times Internet Explorer and Firefox display pages differently, and it is much easier to write different code for the browsers than to try to use weird hacks to fix IE bugs.

Easy Method #1

This will allow you to target not only IE, but also different versions of IE. Does it work in IE 6 but not IE 7? This is the best way to fix it!

Add the following code in the <head> section of your page, and create the linked CSS files (ie.css) and upload them.

IE only

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

IE 6 only

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

IE 7 only

<!--[if IE 7]>

<link rel="stylesheet" href="ie7.css" type="text/css" />

<![endif]-->

Less than IE 7

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

Greater than IE 6

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

It should be noted that this only applies to IE. So you'll want to code for Firefox, then override it with these CSS files. The best way to do this is be more specific. So if you want to override a navigation link:

Normal CSS for Firefox

#nav a { padding: 4px; }
CSS in ie.css
#container #nav a { padding: 6px; }

Quick IE 6 hack

If to only need to apply css to internet explorer 6, use this simple hack in your normal css file: Add "* html " in front of any declaration

* html a { font-color: #000; }

This will only be used by IE 6

Rate this Tutorial

Rate this Tutorial:

Current Rating:

4.5 out of 54.5/ 5.00 with 2 votes.

Current Comments

0 comments so far (post your own)

Leave your comment:

Learn how to add this comment form to your site with our comment form tutorial!

Name:

Email:

URL:

Comments:
 
Guess the letters and numbers (passphrase riddle) -- /c/ followed by (??? - 10) = -1 , small 'J' +2 letters and not a "B", but (??? - 9) = -3 & 1 chars before small Q followed by 0 chars before small H , → retype that here
Enter the correct letters and numbers from the image into the text box. This small test serves as access restriction against malicious bots. Simply reload the page if this graphic is too hard to read.
 

Note: Emails will not be visible or used in any way, and are not required. Please keep comments relevant. Any content deemed inappropriate or offensive may be edited and/or deleted.

No HTML code is allowed. Line breaks will be converted automatically. URLs will be auto-linked. Please use BBCode to format your text.