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…
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]-->
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.
\9
) at the end before the semicolon.*
) before the CSS property._
) before the property..box {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
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]-->
nigedo
Nice. Pretty well known by now but nicely summed up. :)
Philipp
I prefer option 2, al least the ie users are decreasing
Fred
I prefer the last option, but I’d use a serverside browser detection in stead of the conditional comments.
Wolfgang Keim
Last technique often proves to be a real timesaver!
Grégoire Lemaire
thanks for checking all of the options ! sooo many junk information on the net, final a reliable source !
Ariakan
Why don’t you use some valid hack for W3C compatibility (for IE6 and 7) ? ;)
.class{…} /*All Browsers*/
* html .class{…} /*IE6*/
* + html .class{…} /*IE7*/
It’s better. :)
Thurein
Wow,
It’s great.
Really useful
Mark Host
Been using number three since Paul Irish wrote about it on his blog. I believe its the easiest and most maintenance worthy solution.
Well known resource, but a good summary none the less.
Ade
The 2nd option is my most used because I usually serve the same basic stylesheet for IE6 and 7 now. But I find a good use for option 3 whenever a CSS3 feature and its consequent absence in IE8 causes some problem (such as a loss of contrast, for example).
nico
I agree websites should be USABLE with IE. That does not mean they should look the same (or be pretty at all), especially with IE6 and 7. If one uses a 10 year old browser he/she should know better than to complain about eye candy… and he will be used to see 90% of websites displaying like crap anyways. Much better is to EXPLAIN to clients and bosses etc. why they should stop to use an old and unsecure browser. Continuing to give IE user the same exact feel as the other users will not make the Internet a better place and will slow down the change to modern browsers.
Jacob Stoops
I prefer to use #3 as my method to control that madness that is IE. Thanks so much for the great tips. I refer back to this site often for code-related questions!
KAMiKZ
Thanks for this article, it is very useful indeed, now that I finished my app’s design for all other browsers, I have just started on making it work on IE as well. Do you have happen to have an article that lists the css properties that renders differently or use different syntax ( or won’t render at all) for IE than for the other browsers?
Or is there such a smart javascript libraries that just detects the browser being IE and converts all proper CSS syntax to IE compatile syntax?
THANKS!
Creative Agency
nice tips, we could even use body classes btw.
Ralph
The last way to css specific for the internet explorer is new for me. You write: “it doesn’t cause any validation errors”. This is great. I will remember me this way!
Yvonne
I’ve never seen #3 before. Definitely sounds like a great way to handle different versions of IE. Thanks!
Andrew
I’ve never seen the third option before. It’s certainly novel, but it means that all stylesheets have to be served even when the majority won’t be used. The first option is still the most efficient, I think. Using a combination of the first and third might be ideal depending on the situation and preference.
Sean
Putting all stylesheets into one is a much better practice anyway. Less http requests increases load better than a few less lines of code.
Sean
load times*
Apologies, I’m not well.
TANTEREA
LIVE THE LIFE YOU’VE ALWAYS DREAMED OF MAKING LEGITIMATE MONEY FROM HOME. VISIT http://www.freedom.ws/tanterea. YOU TO CAN CHANGE YOUR FUTURE!
TANTEREA
LIVE THE LIFE YOU’VE ALWAYS DREAMED OF MAKING LEGITIMATE MONEY FROM HOME. VISIT http://www.freedom.ws/tanterea. YOU TO CAN CHANGE YOUR FUTURE! ACESS CODE: tanterea
Ian
In all honesty, I would say that option 1 is really the only valid way to handle things correctly. #2 relies on bugs that might be fixed or might behave differently in future versions and #3 requires that you load IE specific CSS rules for all browsers.
Also, it’s a really bad idea to use [if gte IE 8] as it will likely break when future versions of IE come out.
CuPliz
Hi Nick,
Thanks for the #3! I’ve been stuck for 6 hours, find a way to do it. Now I can relax with the rest. Thanks!
ASK Technologies
Nice css tips,thanks for sharing.
SteveB
I like #3 a lot! Cheers!
Diseño web en Madrid
I never see number 3, you can put it for Internet explorer 7,8 and 9? I didn’t know that
David
I have seen the #3 in html5boilerplate I think.
Faraz
There are very useful and problem solving tips in this article.IE is really becoming a headache for developers for the same reason that is mention here that people are still using it.
Ravikumar V.
this one saves me lot of time while implementing html pages….
Thank you
Web Design Doctor Chesterfield
Tips 2 & 3 have saved us considerable time on a current web design and development project. Much appreciated, team @ perceptant101.com
Hixster
Nice write up thanks – hadn’t considered solution #3 before , but it seems really elegant and simple and leverages the benefits of the cascading nature of css.
Mythic Tech
there is merit in all three but I agree with the post above me that number 1 is the best, it has the least likely chance of having issues.
I will add though that I am so sick of cross browser issues, why they cant just get along is beyond me lol
Trevor Seabrook
Mythic Tech – Toronto Web Design
loreley
Except for no. 1, the other 2 solutions are not so clean – first, better to avoid hacks as they make your code less cleaner (and once IE6 is old enough not to require anymore our support & attention, it will be rather tedious to go through a big css file and start cleaning all the useless code.)
No. 3 can actually be tweaked to make it a bit easier – instead of giving a class to the html, you can wrap your whole html code in a for example, and then in your css you’d use it like this:
#ie6 .example {etc}
However, the issue I have with both these options is that they turn your code into an ugly soup (and no. 2 makes your css invalid). The first option allows for a nice & clean CSS, while all the IE specific food goes in a separate file.
loreley
forgot to put some spaces in my example! – what I meant was:
… you can wrap your whole html code in a for example
Widi Mawardi
I dislike internet explorer, whatever version it will always still ugly.. i would rather told my boss how ugly IE is.
Riccardo Benetti
I know this hack only for IE8: font-size: 12px/; using this / before semicolon.
Vikcon
Thanks a lot for sharing the CSS insights and IE, the unavoidable monster
Matthew Fowles
Hey great article thanks! Have not heard of option 2 before, shame its not valid really.
Elvis
Nice article, also @Ariakan wrote in comments great method.
Erick
Though Example 3 seems like a good solution, I wonder how well it would work if you have a large site where there are a lot of styles and loading all variations for all browsers may simply put a dent on performance.
I like Example 1 because it loads only when needed. I suppose if the site is small enough, it may not be an issue.
Good post for sure..
ertan
nice article.
thanks
Kevin
Thanks for sharing! We use #3. We also told our clients We will stop supporting IE7 or below.
zakk garcia
Thank you. This helped fixed my CSS issues on IE browsers.
Looking for high quality web design services and CMS development team? I tried http://www.webdesign.8rf.org they also have cheap unlimited website hosting plan.
Logo Design
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?
Dana
Nice, didn’t think of option #3. might get handy! thanks
David
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
add2seo.com
SEO Directory
Free to Add Your Website Our easy to use SEO Directory and tutorials make search engine optimization accessible to everyone.
add2seo.com
Vivoo Creative
Nice article :D
Maziar Ahmadi
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.
sandeep
nice article.. thanks for sharing… :)
Erwin Francis Cutanda
Very nice, thanks
rado
#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.
Pixeno
Nice post.
I always get frustrated when things don’t work for IE.
Web Designer London
Great this is a really nice post. I would be sharing this post with our web designers weekly session.
Web designer Lt
Nice article, thanks.. iF–_–
HTML Codes Dude
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!!
Mark
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
Adrian
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.
world web designed
Great article…. thank you…
Webdroid
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
css splash
Useful Article Css Splash | Webdesign Inspiration gallery
yashwanth
Owesome Theme.
gvon
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 */
}
Mobarak Musaied
Nice Tutorial …
Web Design Nottingham
Nice advise! Thanks
rado
Also, I would do IE fixes buried in the .js file. It’s radical and not too subtle, but has 2 advantages: none of the HTML/CSS code is polluted by IE fixes and we can use CSS3 selectors for IE with jQuery.
Nevikup
Good Article,
Thanks.
Alan
Why not use something like Modernizr that adds classes to the html tag (like what’s done in the HTML5 Boilerplate) to target specific versions of IE? I’ve found that to be the easiest solution for me.
ivas
Good!
Thanks.
Wordpress Blog Designer
Wow that was Cool for IE….and I a looking forward for more Cool IE CSS combination effects…
John Nevin
is this w3c standard ????
Amanda
I have always had trouble making a good website design layout that is also compatible with IE. All other browsers are not a problem, but IE usually is the headache.
Jared
I find using a chunk of css to reset browser defaults helps a lot, even with ie7. We don’t support ie 6
seb
yeah since I started using a reset stylesheet I have less problems.
Manish Salunke
very nice
girls dress up
it’ s really nice post,thanks for share information
Spencer Thornock
Someday, my dreams will come true and I’ll wake up and Internet Explorer 28 will be out and finally standards compliant :)
Good tips, always have to include some minor adjustments to make my designs sing in IE6/7/8 … stupid IE, you would think that Microsoft with all the resources in the world would get their together… I think they’re just punishing the world by holding web standards back because they lost the ant-trust lawsuit…
Dave
This is NICE :-)
Dylan van der Heij
On our newly configured websites we used http://css3pie.com/ to make the CSS3 things work in IE. Works amazing and handy!
For all other basic IE stuff ofcourse you will need the tips above, thnx for this explanation!
oliver
obviously you didn’t test your hacks before you posted them.
\9 hits ALL versions of IE (including 9)
Jon
Having to use these hacks gives me a headache. At least Microsoft is now joining the campaign to end the abomination that is IE6: http://www.ie6countdown.com/
Adriana @ Cheap Marquee
Very useful post. I agree with Jon. I hate to make special code ONLY for IE6 which is one of the worst browsers EVER! But either I like it or not, it needs to be done until this browser fades away completely (hopefully) I have been looking for a post that gives tips for IE6. I will share it in Facebook. Thanks
dan
http://webdesignersbest.com/
online project auction for clients and web designers
also buy services on site. web design, graphics, etc.
Chat medium
This is really interesting! I’ll visit this site more often to learn new things about French. I love this site! I’ll recommend this to my friend!
Fashionnnnnnnnnnn
That’s really usefull for me. Thanks for sharing. Love you.
Brugge Restaurant
this is a really use full for me. Thanks for sharing. Love you.
fuss3 Printer toner cartridges
Great prices on printer toner cartridges from fuss3. Original and compatible to choose from.
Ataxia200
I really <3 anything you do. This is soooo awesome!!!
Web design uae
Yeah! I very much agree that most of the users are still using IE.And thanks for the awesome tips.
Navratan
Great post!! very informative.
Thank you very much for such a lovely and informative post.
Alghero
Unfortunately, there are too many people who use IE and I think that with IE9 will be the same old story. MS please quit producing garbage software, thks.
Ocular Concepts
Indeed IE and all its versions are a pain…everywhere. Thanks for these IE specific CSS solutions
Simran
Nice post
Simran
Very informative post. i am in research for my career in web designing. Thanks for posting this valuable information.
http://www.promowebperu.com
Aravind
http://rafael.adm.br/css_browser_selector/
dexx
Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.
Neil
wtf?
Dysko
wtf x2 :)
Mehmet
it was only spam.
Jon S.
This information is clear, concise, and well put together.
I hate IE.
I just made the following on my website, using your information:
Your version of Internet Explorer is incompatible with this website.
Please update or use a different internet browser (e.g. Mozilla Firefox)
=)
dan
http://crab-tree.com is now a worldwide web design services website
Ravinder
Thanks.It really worked for me.
Mont Blanc Pen
What is friendship?Mont Blanc PenWhy do we call a person our friend? When do we call someone a very good friend?
Vernon Website Design
Thank you!!! I’ve been struggling with this for some time.
Sachin s
Thank it working correctly but what about Chrome, Safari, Firfoxe, is there any code for same way !!!!
Joe Smith
I love this i want more on this subject
any references please?
Lee
Many thanks, very useful. Can’t wait until the day IE loses its market share.
Website Design Australia
Your article is very informative. Thanks for posting this. Seriously I hate IE. Also I have some question about the codes for Chrome and Firefox? is there any code for them? and if it is possible for you to share me more about it that would be great.
orhanbt
This is verry good.
Paweł Rychlewski - malpa.net.pl
In some cases you coud use !important marker to trick IE browsers. The advantage of using !important is that your CSS file remains valid.
Thanks for good concise post.
JB
background: blue /; /* IE 9 */
JB
background: blue \ 0 /; /* IE 9 (\ 0 /without space) */
complex41
And then he handed you the thirty-five 45
Web design Cambridge
Great. We been having some problems with a Joomla site not displaying well in IE. Why has Microsoft had so much trouble with html over the years? ;-) . This article will be bookmarked and emailed to colleagues!
Daniel Lemes
I do the same question. Unbelievable how so big company can still produce crap such as IE. Each new version, the problems remains. What the hell they do?
Great tip, no doubt.
vinoth kumar
Thank you very much for the clear tips to run the CSS file in IE.
Web Design Richmond
Great tips. Thanks for bringing that out. It’s very helpful =) keep up!
santrozen
going crazy with this different browser. why there is not a unique css code for all?
mybookmart
ohhhh nice i like this
Jenifa
Option 3 does not seem to work with IE9. any other suggestions?
Thanks in advance!
raghu
awesome bro keep it up
bikeman
Hacks and Fixes for IE perpetuate the use of this obsolete browser and stagnate web page development. Do not use IE hacks. Encourage your site visitors to upgrade their browser.
Tina
Bikeman, spoken like a true self-centered, arrogant web developer. Grandma Gertie is NOT going to want to upgrade her browser. Hell, she barely was able to figure out the ‘computer thing’ and just learned how to check her email. If you’re a true professional, you will find a way to code the CSS to deal with IE. It’s part of our job. Deal with it. Supposedly, you know more than Grandma Gertie. Prove it.
Spencer
Not only does Grandma Girtie now want to nor know how to upgrade their browser but MANY corporations were required to custom build their online applications for internal use for IE6 because it was such a BAD browser. Many of those companies don’t want to redesign their apps *again* and force their employees to use IE6 still to this day.
randurk
good, simple and its work with chrome, firefox and ie 6.
thanks.
Facebook URL Shortener
Excellent post, really very helpful, thanks for sharing it here, i really found this useful for running the CSS file.
Dejan
Thank you very much for this post :)))
Akhil
IE still have so many problems with css, our site is working fine in IE7, IE8 but had some problem with IE9, didn’t expected IE9 to be worse than earlier IE :)
Thanks for the tips.
Ann Marie {Cascade Valley Designs}
Thank you so much. Finding this post saved me from a frustrating font problem I had on my site with only IE9 . I used #2 (\9;)and it worked beautifully. This will definitely be a saved post in my tips folder. Cheers.
Ron Richardson
Wow… #2 \9 works like a charm… Thanks !
ads
ads
Jim S
Doesn’t work with px amounts?
right: 35px\9;
Dhrubo
display: none\9;
is perfectly worked for me.
thanks a lot. :)
ajcoder
I found this site helpful. But then realized this infromation was in the comment above. Dope!
http://stackoverflow.com/questions/7364891/how-to-define-specific-css-rules-for-ie9-alone
:root #element { color:pink /IE9; } /* IE9 */
Omar
Thanks alot for this.
JT...
background: pink\9; /* IE 8 and below */
This works in IE9 too.
Zoffix Znet
Except that’s invalid CSS that has possibility of choking some UAs.
e11world
Very useful! I’m using it on all my projects now.
jhuna
Thanks a lot! Really saved me! :)
Tanja
HI, I want to recommend http://www.elcoplanet.com to all of you who are hosting your pages or you are doing reseller web hosting business, I have been using acvilla.net ixwebhosting.com etc. with years and all they have expencive prices and lot of limitations,www.elcoplanet.com offers lowest prices and high class performances of hosting Reseller Hosting, Master Reseller Hsoting, Alpha Master Reseller Hosting and Their special product Super Alpha Master Reseller Hosting
Keerthi
This is quite helpful. Thank you for putting it up in here.
rohit
Very useful! Thanks :)
Iulius Mihai
HI, I use
in my website Handmade Retail Group
Teressa
Hallo, I am interested for Alpha Reseller and Super alpha reseller web hosting..I wanted to ask does http://www.elcoplanet.com offer these plans ? I can see plans listed on their page but I wanted to ask do you or some one else have experience with Alpha Reseller and Super alpha Reseller plans..
Because I really need unlimited web hosting space and web hosting bandwidth and I can see that they have cheapest prices..and also some promotions !
Ahmed
sooooo nice very good solution
baskaran
your info is not bad.But try to give some new things !!!!!
Bhupathi
Excellent details
CSS
I like this solution. But when I try to use, It is not effect.
visit site
Do you have a spam problem on this site; I also am a blogger, and
I was wondering your situation; many of us have created some nice procedures and we are looking to exchange solutions with others, be sure to shoot
me an email if interested.
Alquiler yates Ibiza
I have been using acvilla.net ixwebhosting.com etc. with years and all they have expencive prices and lot of limitations,www.elcoplanet.com offers lowest prices and high class performances of hosting Reseller Hosting, Master Reseller Hsoting, Alpha Master Reseller Hosting and Their special product Super Alpha Master Reseller Hosting
Brian Kueck
It’s time to re-think this hack:
top: 260px\9; /* All IE versions. Chrome sees this now too! It complains that “top: 260px 9;” is an invalid CSS rule, due to the space. */
Dymo L
Excellent post. I will try to make this kind of specific CSS for Internet Explorer to make it fast :D
Shoib Mohammed A
First method is good, because it will be good for debugging and adding new styles for ie, if we keep it in a separate file.
Lokendra
Really helpful. Thanks a lot for this tutorial.
Rodrigo
Thank you was having problems with IE7….
Sai Swetha Patnaik
In which technology is this implemented ?