CSS Trick: Target only IE with an if statement
July 10th, 2007 by Dustin Brewer
This is part of a new segment I will be starting, there will be others but I figure this is a pretty good one to have. There are a lot of weird things about IE6 (and lower) and even IE7 browsers that make most web developers want to tear their eyes out and ignite them where they fall. For this reason there are a lot of CSS hacks that make Internet Explorer behave. This week I am going to discuss the most useful hack of them all, which really isn’t a hack it is more of a feature.
How do I target only IE6 or IE7 browsers?
I am talking about the if statement for Internet Explorer, which allows you to target a specific version of Internet Explorer and to alter whatever you want in the CSS to make that version of IE display your web site the way it should be displaying your web site.
The method works like this:
<!--[if ie]> code for ie goes here <![endif]-->
Now you can put just about anything you want inside of these lines, for example you could put IE Sucks inside of an h1 tag if you wanted. But I think that it would lose meaning. Most commonly you would just want to include your ie6 or 7 (sometimes both) css file inside of the if statement so you could manipulate the css just as you would for your regular CSS. For example:
<!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css"> <![endif]-->
Target any version of IE with a simple CSS trick
You can of course replace the if IE 6 with whatever version of IE you are targeting or just generically target them all and not specify a number. But it is usually not that easy.
That is pretty much the basics of how it is done, mostly it just takes patience to get it all right across every browser. With this trick in hand though it becomes a lot easier, but it is not the end all fix all of course.
Popularity: 7%
Dustin Brewer is a freelance web designer located in Oklahoma City, OK that works professionaly as a web designer doing design comps, CSS cutups, Search Engine Optimization, Flash design, and PHP development. As well as a news contributer to various web design news sites and technology news portals.
© 2008 dustin brewer, web design news and style, All rights reserved.
July 10th, 2007
Absolutely, I couldn't agree more Daniel. I will do everything possible even down to changing the entire way a site is cutup to avoid using hacks. They are just too unreliable and a good portion of them cause your CSS to invalidate anyway.
There are very rare occasions that I even use the IE if statement's IE CSS. I will always try to change the way I do something in CSS to try and fix the problem across all browsers.
July 10th, 2007
Good article Dustin. I’d have to disagree with kevin’s comment. The problem with using hacks is that you are taking advantage of a flaw in the application. You run the risk of that flaw either being corrected or perhaps new versions of browsers may adopt that mistake as well. All hacks will become redundant eventually. Using conditional comments eliminates any such risk. Not to mention it keeps your CSS structure in order and valid. Its a much more future proof approach.
July 10th, 2007
I appreciate the addition, that is another great way to target IE6.
July 10th, 2007
Clients (for the most part) don’t require IE compatibility older than IE6.Another way to deal with IE6 is to use the underscore “_” hack.
ONLYIE6 will read a CSS property that starts with an underscore. IE7 willignore it. Thus the underscore can be used to target specific propertiesfor IE6 only. For example:
.my_div{
min-height:20px;
_height:20px;
}
In the rule above ALL “modern”browsers (IE7+, or FF or Safari, etc.) will use the min-height property andignore the height property since it starts with an underscore. IE6 however,will only use the height property. Here’s anotherexample:
.my_div{
background:url(32bitimage.png);
_background:url(8bitimage.gif);
}
Inthe above rule IE6 will use the 8 bit GIF image while all other modernbrowsers will use the 32 bit PNG file.
Targeting IE6 within a singlestyle sheet makes debugging and simplification of the CSS a little easier.I hope this helps.
January 7th, 2008
[…] comes to Internet Explorer though, you have to make exceptions some of the time. There are ways to target Internet Explorer using an if statement that can help you change some CSS to get your site to work right in different versions of […]
February 16th, 2008
But it sounds like they juiced you good. He picked up the deeds and felt their risky material.
March 22nd, 2008
Hi! I’m trying to bring all sites I’ve built since 1996 to present into compliance with XHTML. The site listed above is a new one and it’ll be an ecommerce site as well, therefore, I’m cramming the CSS books and have one glitch which I’ve been trying to ignore until now, because I need to get the site up and running. I can’t get the nav bar to show up in IE7 unless I type it in sideways to create a horizontal nav bar.
In Firefox I can type an unordered list and tweak the CSS and it shows beautifully in the nav bar background. Nada for IE7. If I keep the links that I typed in sideways, then the firefox page has two nav bars, one with the background and one without. I’ve included some if statements but nothing is happening to resolve the issue. I guess the question is…how do I get IE7 to show the nav bar the way it looks in Firefox? Help…I’m befuddled and with the holiday…have to cook and I’m so into getting this fixed that I can’t think about anything else.
Thanks so much for any help you can give me.
March 22nd, 2008
I forgot to mention that I put a different link into the Website slot in the form above…the site I now have listed is the exercise file from the CSS Web Site Design book I’m working with, and I uploaded the files into one of my sites so you can see my dilemma. The ecommerce site is not listed…it is http://www.phillymusclecars.com . I haven’t really started working on it yet because I’m so hung up trying to get the Internet Explorer nav bar to work using CSS…