Quick Tip: How to Target IE6 and IE7 with Only Two Characters
Did you know that, with the addition of only two characters, you can target both Internet Explorer 6 and 7 in your stylesheets? It’s easy…I’ll show you!
At a Glance
#someElement {
background: red; /* modern browsers */
*background: green; /* IE 7 and below */
_background: yellow; /* IE6 exclusively */
}
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Tom Elders - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
agreed with eben all the way around.
however, with regard to “the real world” there is a responsibility of account managers/executives to inform clients that there is no need to have the site look 100% similar across various browsers. if this is stated up front, more flexibility will be established when the design goes into production offering latitude to the developers.
if you disagree, name me one reason why it would matter? consider the permutations of just the first couple of popular OS/Browsers
MS # of OS (7, Vista, XP, etc) x versions (pro, home, etc) x browser types (IE, FF, Chrome, Opera, etc) x versions (1 through infinity) and then potentially multiply that by 2 based on 32bit/64bit of the OS.
— thats just Microsoft and in a real quick and dirty way
I don’t know from personal experience, but then you’d also have to take into account the MAC versions of MS browsers, no? Do they render differently on MAC than Windows? Do they continue the issues between IE versions on MAC?
That’d just add to my nightmares because I cannot test on a MAC – I have no way to do so, without using something like Browsershots…
Nobody supports IE for Mac. I believe that the least release was in 2003. We all just ignore it.
I was wondering what program you were using there to test pages in old explorer versions.
VMWare Fusion
You may want to try out IETester as well.
http://www.my-debugbar.com/wiki/IETester/HomePage
Thanks, I actually saw the new article before I saw this but either way, thanks for the info this will help me a lot.
I don’t care about validation, or conditionals or the fact that these hacks exist.
Hacks have their place, but they encourage new web designers to write bad code. The kind of code that works GREAT in Firefox, but looks nothing like it’s suppose to in IE6, so they give up and make a completely new style sheet for IE to redeclare what everything does.
If you learn how to code right you won’t need hacks. You shouldn’t ever even need a hack for ie7 if you’re using a CSS reset.
And YES validation is VERY important. Can tell you how many tomes I’ve had fix other developer’s crappy code…
“You shouldn’t ever even need a hack for ie7 if you’re using a CSS reset.”
Simply not true. IE7 made leaps and bounds ahead of IE6, but it is certainly not without its bugs. There are plenty of situations where you need to target IE7 specifically.
Amber – that’s just not true. Validation is important only for ensuring that you haven’t made mindless mistakes or omissions (leaving off closing divs, etc.)
Secondly – this screencast presents an option. It doesn’t present itself as the only way to compensate, but if you only need to change two properties total to make it work in IE6…I say, don’t bother creating an additional stylesheet.
It’s always important to know what’s possible – even if for testing purposes.
Thanks for the nice tweet, by the way.
“You shouldn’t ever even need a hack for ie7 if you’re using a CSS reset. ”
Not sure what you mean by this. You’re saying that, if you use a CSS reset, you never need to compensate specifically for IE7? Is that right?
That’s interesting when you, yourself, reference an ie7 stylesheet on your own site.
Conditional stylesheets aren’t hacks…and I only use them for less than 10% of my sites and only if they design hands me something insane.
Validation is very important. It ensures quality code, reduces your cross-browser problems and shows you actually take the time to properly code. You can fix a broken pipe with duct tape…but that doesn’t make it right. 99% of my clients wouldn’t hire a non-validating developer and NONE of them would pay $100+ an hour either
Amber – you’re missing the point. Validation, as I’ve said many times, is definitely important. But it’s not the end of the world if you don’t get a 100% score. If you avoid using browser-specific stylings just because you’ll no longer have a perfect validation score, then you’re doing it wrong. Otherwise – yes, of course it’s important to test for errors in your coding. That goes without saying.
uh…..huh? You’ve said many times validation is important?
“Hey Shane – I’m not concerned with validation. You shouldn’t be either.
”
I don’t recall reading your emphatic defense of validating code.
“Hey Shane – I’m not concerned with validation. You shouldn’t be either.
”
That doesn’t sound like saying validation is very important.
You must not have read my previous articles then. Of course you should check your code, Mark. That’s obvious.
But if a person doesn’t use -moz-border-radius, or something like that, because it doesn’t validate – then they’re fully misunderstanding its purpose.
vry nice!
Average attitude of a web designer/developer: “My way is the right way, and there is no other way.” The comments really have been more entertaining than the article itself.
This sort of seems like a debate of what works vs. web standards. In theory a separate CSS style sheet for IE 6 would be better, but i think it comes down to how much you are getting paid. When you accept a cheap job for less than $1000 or whatever your personal limit is, then Hacks are fair game. For a High Dollar site, i would be to afraid of the future browser’s picking it up and throwing things off.
To those of you who HATE this method: let’s imagine that your website only needs one property change to display correctly in IE7. Are you really saying that the smarter solution is to create an entirely new ie7.css stylesheet, add an additional HTTP request, all to insert one property? That hardly seems efficient to me.
That’s when I can understand using this method. Sure – if you have a bunch of revision, go ahead and export them to their own file. That makes better sense. But not when I only need one or two changes.
It’s the same with JavaScript. If you only have 3-5 lines of JS for one page of your site…an external JS file just isn’t needed.
The real problem with this method in my opinion has not been discussed. What happens if Microsoft releases IE9 or IE10 and these “hacks” behave completely different in this new browser.
You’re going to have to check all the stylesheets you’ve made using these “hacks” and replace them with new css, normally using ie conditional css…so this would basically mean, doing your work twice.
Microsoft advocates backwards compatibility above all else. Your “what if” isn’t going to happen.
I would say that the best way to go about things is to try your hardest not to use a hack. I used to use these hacks all the time because it was easier to just throw some extra code in to fix issues in IE6.
Since then I have learned so much more about how IE6 renders things and how it interprets the box model. Most issues I run into in IE6 can be fixed by just adding a width (or height) attribute: See: http://www.satzansatz.de/cssd/onhavinglayout.html
So, personally, I prefer to find a solution that doesn’t include hacks or conditional stylesheets. I take some extra time, try out a few solutions, and attempt to understand how IE6 works. If there is a valid hack-free solution then I will use that.
It’s un-possible to make a tut on this subject without both sides arguing over conditional css vs css “hacks”.
I think they both have their place but in general cleaner code will result from conditional css.
Oh my God… Have I been living under a rock? Why haven’t I heard about this?
It’s not like I usually have tons of IE specific properties to set, but in no article discussing CSS browser targeting have I ever saw this.
Tables ftw
If you’re using the new CSS3 specs in your stylesheets (-moz-border-radius), you’re already using hacks just like these. They’re browser specific and don’t validate just like the ones Jeffery mentioned.
I say use em, it makes life easier dealing with IE and saves tons of time.
All I have to say is there is a time when you have to stop and decide when to stop supporting those really old versions all together. I mean 5 years from now I don’t want to worry about IE6 at all. I hope that by then at least the majority of people viewing the web have moved onto Firefox, Chrome, Safari, Opera or at least IE8. There really is no reason why people should still be viewing the web on IE7 and below today. Not when there are much faster and much more customizable browsers out their for free.
As for CSS and browsers, I only really care to check IE8 out of the explorer versions. They make it a pretty big deal on IE to upgrade to IE8 constantly so I hope soon enough all those people using old IE version will have IE8 and standard CSS works on that and all other browsers pretty damn well with no hacks or separate sheets.
this is better than conditional comments! Thank you so much
I think that obviously, yes, we should take care to make sure that our code outputs correctly, and for that purpose we use validation. But if what you’re dealing with is just one validation issue, and that issue ONLY relates to the hack that you and everyone else knows is obviously going to throw the validator off, then really, common sense should tell you that its not worth worrying about.
Now, I wouldn’t go so far as to say that just brushing off the invalid code is always best. Obviously, in some situations, we should always ensure we have valid code. And in others, we shouldn’t worry about it because it simply doesn’t matter. But all I’m saying is that I think being sensible about your choices and simply taking the given situation at hand into account should really be what decides whether invalid code is “right or wrong” – there isn’t an absolute reasoning for everything, really.
But that’s just my two cents.
I prefer not supporting those browser at all. We need to phase them out.
The problem is “we” don’t have a say in phasing them out. People typically don’t upgrade or change their browser software. We can phase out their support in our sites, but the user will just go to someone else’s site that caters to them.
Ok there are some valid points, but here are my two cents.
I’ve worked as part of a team of 12 – 18 Java developers on a large component based web application. There are hundreds of classes, tons of views, loads of css files that style these components.
Components are loaded in and out of pages at will, so maintaining ie6, ie7, ie8 style sheets with css files becomes very unwieldy and ultimately slows you down. Everything you need to change for IE is right there in the one spot.
What Jeff talks about here is not new. I remember seeing an excellent webcast from one of the Frontend Leads at Yahoo which talks about OOP based CSS and this css filtering technique. Look it up!
If your web app is small and you want to keep atop of your high horse then sure use conditional css. If it grows and there are many different types of pages with different elements then css filters are easier maintain.
I employ the later technique now. No client is going to care if your css doesn’t validate.
I see the point of people argue about validation in code when using hacks. I normally use both methods when writing CSS. If it requires a lot of hacks, I definitely go for Conditional stylesheet. But if only requires just less than 5 lines of hack. I dont bother making a completely different stylesheet for it.
I think we should be more flexible in coding.
So why don’t you just do this:
.element{background:blue} /*All browsers*/
* html .element{background:green} /*IE 6*/
*+html .element{background:red} /*IE 7*/
Validates and all that jazz
thats a lot of comments for such a short tut
Time saver.
Thanks for the tip, Jeff
good tips. thanks
The 2 big reasons NOT to use this hack are:
1 – It’s not valid.
So? A hack like this will be needed in approximately .05 percent of your entire CSS sheet if you have to help out the IE’s. Lighten up!
2 – Someday you will have to remove it.
From what? From your 9 year old website? By then you will have moved on or replaced the site 3 times over. Lame reason!
The 2 big reasons detractors say NOT to use this hack are:
1 – It’s not valid.
So? A hack like this will be needed in approximately .05 percent of your entire CSS sheet if you have to help out the IE’s. Lighten up!
2 – Someday you will have to remove it.
From what? From your 9 year old website? By then you will have moved on or replaced the site 3 times over. Lame reason! You should see the crap I “should” remove from my production CSS for some pretty big sites, along with orphan includes, graphics, dead files. It’s just sawdust…nothing to even think about again…
Nobody will notice, nobody will care, and you will still have time to play with the kids and think about music, painting, and poetry, see your parents, and walk in the woods before you hopefully live to 99 and die a good death surrounded by loved ones as you face eternity.
True, the css validator does display it as an error, but if you look after the “error” you reallise that is NOT an actuall error. If the validator would not take in consideration the _ and * and woud not generate an error than you people will still say that is an error?
I don’t bother about validation either… But I believe validation ensures consistent future of web…
I use this hack myself.
If IE is throwing everything around, using conditional CSS is what I opt for, if its one of two things a little hack didn’t do anyone any harm
I prefer to use separate stylesheets for both ie6 and ie7, because easier to maintain.
I just found this and it saved me a LOT of aggravation. I can’t use conditional comments for browser-specific stylesheets. I’m developing a site in asp.net using an App_Theme, so the default stylesheet is dynamically embedded LAST in the head tag, there’s no (easy) way to insert another stylesheet after the default.
Also, I had serious issues with positioning in IE 6, different issues in IE 7, and no problems whatsoever in IE 8. This hack is EXACTLY what I was looking for. I only need to apply the CSS hacks to a couple of elements. I think this is a very sound fix to an annoying problem.
THANK YOU!
Without taking pride into ones work, and not obeying to standards, the web soon becomes a mess again – there are reasons why those standards are established. Dislike the way how this here is presented as the oh so good solution. A webdesigner always should aim for flawless work.
Great post. I’m not big on debate, both sides make a lot of sense, but this will be great for debugging and testing things in the development stage. Thanks!
Thank you so much for the tip. I, as you stated, only needed to add this to one line of css code and it fixed my problem in IE6 and IE7. My site was rendering perfect in IE8 and other non-ie browsers before the “fix” and it did not affect them at all after I added the hack. So simple and so efficient. Thank you!
MySpace pages already display differently across browsers because all comments and the # character are stripped from your code.
If you want to make anything at all neat you need to know what’s really going on in the browser. If we’re concerned about IE6, I don’t want to hear anything at all about MySpace being obsolete and “nobody using it”. What you mean is “I don’t use it, and I’m elitist. The universe revolves around what I can see from my desk.”
The intimidating google ranking of MySpace pretty much forces any emerging artist on to MySpace music because it will always rank higher than their own homepage, and often lower than their own reviews.
If you don’t want to use this tip, don’t, but it certainly is justified in appearing on this site as a “quick tip”. It does exactly what it claims, it targets the two browsers mentioned with two characters and doesn’t effect any other browser.
If you’re concerned about future IE versions reinterpreting * and _, the obvious choice is to just tell IE that it should behave like IE7 now and forever.
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
As far as validation arguments go, the whole reason this hack works is because it fails validation so completely that browsers completely ignore the whole line of code. It’s malicious compliance at it’s finest.
The “point” Jeff makes in these comments is that code is “good” fulfils your goals in the best way possible, your goals shouldn’t bend to fit the current paradigm of “good” code.
Deciding that producing 100% valid code is a goal in itself seems contrived to me. It’s like saying that if I have to hang a painting on the wall, my goal isn’t actually to hang the painting, my goal is to swing a hammer at a nail. My friend offers me an electric screw driver and a screw to make the job easier, with better results and I tell him to bugger off because I’m all about that hammer right now.
If we’re talking about what makes code “good” or “bad” then conditional comments should never validate anyway. Do you all really feel it’s “good” that conditional comments successfully convince the most popular browser in the world to interpret logical conditions in HTML? or to interpret any comments at all for that matter? it’s another bug/fix marketed as a “feature” by Microsoft and picked up on by developers of validation software because of supply/demand market forces (if they don’t validate Microsoft’s code, regardless of how non-standards compliant, or ideologically backward, they lose market share).
Now, Jeff’s example here lets me avoid redundant HTTP requests, that usually take 300-900ms each when you’re in Australia (incidently, envato is a Melbourne based company), hosting in America, thanks to latency. Jeff’s example also lets me cache as much of my stylesheet as possible, and reduce filesize a little by minimizing the characters used.
Thanks Jeff!!
So, avoiding loaded statements that just get people’s backs up, like “pride in my work”, I can show my clients a real performance increase. Most of Australian internet users are stuck on dialup or ADSL1 if they’re anywhere more than a few hundred km’s from a capital city, and we’re apparently introducing a country-wide internet censorship which won’t help things much. While validating code and following “best-practices” usually helps me greatly in reaching the goal of fast pages, if it makes my page slow down to include external stylesheets, It’s no longer academic, I simply can’t afford to do that.
I meant that I’m not concerned with a 100% validation score.
Because most of the responses are things like “yeah, but it doesn’t validate.”