CSS Specific for Internet Explorer 189
As much as we don't like to deal with the IE bugs, we still have to face it because your boss and visitors are still using Explorer. It gets frustrating when different versions of Explorer displays web pages differently due to the inconsistent rendering engine. We typically use IE conditional comments to fix the IE issues. But there are more ways than the conditional comments...
#1 IE Conditional Comments
IE conditional comment is probably the most commonly used to fix the IE bugs for specific versions (IE6, IE7, IE8). Below are some sample code to target different versions of Internet Explorer:
<!--[if IE 8]>= IE8<!--[if lt IE 8]>= IE7 or below<!--[if gte IE 8]>= greater than or equal to IE8
<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>
<![endif]-->
<!--[if lt IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->#2 CSS Rules Specific to Explorer (IE CSS hacks)
Another option is to declare CSS rules that can only be read by Explorer. For example, add an asterisk (*) before the CSS property will target IE7 or add an underscore before the property will target IE6. However, this method is not recommended because they are not valid CSS syntax.
- IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (
\9) at the end before the semicolon. - IE7 or below: add an asterisk (
*) before the CSS property. - IE6: add an underscore (
_) before the property.
.box {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
#3 Conditional HTML Class
The third option, which was founded by Paul Irish, is to add an CSS class with the IE version to the HTML tag by using IE conditional comments. Basicially, it checks if it is IE, then add a class to the html tag. So to target specific IE version, simply use the IE class as the parent selector (eg. .ie6 .box). This is a clever way and it doesn't cause any validation errors.
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
Good ideas – I use IE myself simply out of habit but I find a lot of pages I go to don’t load properly and I am guessing that your discussion here is part of the reason why. But when it is so easy to upgrade your current version of IE why don’t more people do it?
Nice, didn’t think of option #3. might get handy! thanks
Why can’t huge organisations like the NHS (UK) and Military (you know who you are) just get their frickin acts together and stop using IE6? AAAARRRGHHHHH
SEO Directory
Free to Add Your Website Our easy to use SEO Directory and tutorials make search engine optimization accessible to everyone.
add2seo.com
Nice article :D
Great article. I think the design community needs to stand united against old browsers like IE6 which are holding back the web.
If all web designers stop supporting the old technology, eventually users loyal to the old browser will have to upgrade.
I wish to some day see the day when we can move forward with HTML5, CSS3 and newer, more efficient technologies.
nice article.. thanks for sharing… :)
Very nice, thanks
#3 looks very good. Sometimes it’s adequate to use a CSS3 selector to differentiate between IE and normal browsers, thus keeping the nasty IE conditional tags out of HTML. I also used the “*” and “_” tricks, but now they stopped working, no idea why?
Regards.
Nice post.
I always get frustrated when things don’t work for IE.
Great this is a really nice post. I would be sharing this post with our web designers weekly session.
Nice article, thanks.. iF–_–
I used to use conditional statements in my designs just to do the CSS work arounds correctly but then I decided that if Microsoft could be bothered in the last 10-12 years to even attempt to create a browser that is close to the web standards of the day then I’m not going to spend time seperating out my IE CSS. So I’m option 2 all the way now!!
Thanks for the post, I’m new to web design so this helps a lot (Stupid IE 6)… There is one other option to consider? Just add a link for users to download a real browser like Firefox, Chrome, Safari, Opera etc. :P
I remember being initially relieved at finding these hacks years ago. They solved the occasional inconsistency at a time in the web’s history when rendering engines had a forgiving attitude towards weak standards compliance. This was mainly because IE was overwhelmingly the dominant browser and however things rendered in IE was a practical (if not a de facto) standard. However the fact that we are still having to use these hacks makes me upset.
I sometimes like to do a thought experiment where I put myself in the shoes of the developers at Microsoft who are responsible for IE and ask myself how I’d approach the requirement to implement those IE conditional statements and version specific CSS hacks in the rendering engine. I’m sure the initial justification would have been that it is doing a service to the web community by giving them a handy backdoor to manipulate the rendering behaviour in the *rare* case when it might be needed. I’m sure back when IE6 was being created they never thought the use of these hacks would be so ubiquitous. But it begs the question as to why you’d be satisfied with a browser release that leaves so many standards insufficiently implemented that such a backdoor is necessary?
I’d like to think that in that position I would have advocated for a more standards compliant core product. I understand there are constraints and pressures in any project, and a release of the most widely used browser in the world must be a mind bogglingly complicated undertaking, so let’s say IE6 was unavoidably compromised. I’m sure I would want to put those compliance issues to bed in IE7… or IE8. If I was the developer implementing the same code in IE7 that interprets these hacks I’d definitely be upset that a product that I’m involved in was still compromised to such an extent that the hacks were necessary.
By IE8 though there’d be an even worse thing nagging my conscience, it would be the thing that would truly deny me the pride I should feel in working on such a widely used and significant piece of software (as IE undeniably is). That would be the knowledge that countless numbers of my fellow web developers are going to be putting these conditional hacks into their website code for years to come, most would be doing it because they are conscientious, diligent workers who want their client’s sites to be as good as it can possibly be. I’d feel most ashamed for what I’m forcing those web developers to do. If only I’d cared about my own product enough, those guys’ jobs would have been quite a bit easier.
Great article…. thank you…
Even Mic is finally trying to kill ie 6 ! :
http://windowsteamblog.com/ie/b/ie/archive/2011/03/04/counting-down-internet-explorer-6-usage-share.aspx
respectfully
Useful Article Css Splash | Webdesign Inspiration gallery
Owesome Theme.
I prefer to just use the CSS3 :not pseudo class
#content {
/* css for all browsers */
}
#content:not(#ie7or8) {
/* fancy css for modern browsers, that ie6 and ie7 won’t see */
}