Web Design Blog
Popular Posts
- Fonts on the web and a list of web safe fonts
- CSS Hack:Getting Safari to behave
- Top 10 search engine optimization techniques
- Test IE5 or IE6 on your PC with IE7 installed
- Top 10 job boards for freelance web designers
- Creating a photo gallery in CSS without tables
- CSS Trick: Target only IE with an if statement
- Open source Dreamweaver alternatives
- 8 job boards, for freelance web designers, that don't suck
- CSS fix for the double margin float bug in IE6
Categories
CSS Trick: Target only IE with an if statement
Posted on Tuesday, July 10th, 2007 under CSS 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.
Whats Next?
16 Responses to “CSS Trick: Target only IE with an if statement”
Leave a Reply
About Dustin Brewer
Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout the web design portfolio.
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.
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.
I appreciate the addition, that is another great way to target IE6.
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.
[...] 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 [...]
But it sounds like they juiced you good. He picked up the deeds and felt their risky material.
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.
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…
great content thanx
You can target very specific versions of IE
http://www.quirksmode.org/css/condcom.html
Thanks for these clear informations. I have been tearing my hair out because of IE6; you have saved my sanity. I will be regularly checking your site for tips.
This was a GREAT help, thank you…
You can also (essentially) do the “IF IE6 or IE5″ check in your CSS directly by using the “!important” declaration. EG:
.myDiv {
background-image:url(“../images/bg.png”) !important;
background-image:none;
background-repeat:no-repeat;
filter:none !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=”../images/bg.png”,sizingMethod=”scale”);
}
In this instance, FF, O9, Safari and IE7 (all of which render PNGs correctly) use the statements that have been declared “!important”, while IE5 and IE6 use the newer declarations of the same elements (ie: “background-image:none” and “filter:progid:DXIma…”
I have just finished a site (see the link) that implements this method A LOT and it works beautifully.
Look forward to reading more from you in the future. check out my site and let me know what you think, its got other freebies as well as phone tricks, hope you like
ha ha … random that i would google this info and see a link to your site.
What about if not IE – well of to search to copy/paste that.
Hi … I found this site by mistake. I was looking in Yahoo for Accounting software that I had already bought when I found your site, I have to say your site is pretty cool I just love the theme, its amazing!. I don’t have the time at the moment to fully read your site but I bookmarked it and also will sign up for your RSS feed. I’ll back in a day or two. thanks for a awesome site.
[...] 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 [...]