Smashing Magazine - we smash you with the information that will make your life easier. really.

Great article.

Especially good to know which features IE7 and 8 support. IE6’s bugs/lack of features are usually very well known by web developers, but IE7 and IE8 have slipped under the radar a bit. Now that a lot of projects are dropping testing for IE6, we need to focus on the new baseline: IE7.

Great article!!

Thanks, great article. Luckily, IE6 is dying.
According to w3schools statistics 12% use IE6 and decreasing every month.
I personally use Stop IE6 widgets now and I feel FREE!!

Very useful article. Thank you, Louis.

The problem with IE 6 is that some large companies still use it and their users cannot upgrade. I always test my work in IE6 because they are a big piece of my customers.

EDIT: Riccardo is a perfetc example of what I mean,

Very useful for the UI guys.. Thanks a lot.

Very nice article. Just like to add a couple of tricks I use on a regular basis to ease the pain of cross-IE support:

#1 Develop with Firefox then fix IE rendering ;-)
#2 Use IEtester to visualize rendition across the different versions of IE
#3 Use the adequate meta to force IE8 in standard compliant mode
#4 Use alternative CSS using conditional comments (http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx)

Hope this helps

Great article, nice to have all of this info in one place. I agree with Sandstream, the problem is large companies/organisations who cannot upgrade from IE6, has anyone forced Google Chrome Frame on them yet?

Thank god IE6 is dying! It was the biggest misstake Microsoft ever made. Developers Designers had to do all sorts of weird workarounds, just to get the design equal in all browsers.

EXCELLENT! merci! thank you! gracias! o brigado! nice article.

For having chained classes in IE6, try reversing the order of classes.

.class2.class1 {…}

Great article! I must admit I’ve never used orphans and widows, but then my work doesn’t usually require sites to be printable.

You mentioned that IE7 doesn’t support inline-block, but that’s not entirely true. There is a bug that means it doesn’t support inline-block on an element with a default value of ‘block’, but those elements that have a default of ‘inline’ – such as span, href, img etc. – will accept the inline-block value instead…

Oh, and may I join everyone else in berating Microsoft for Internet Explorer in general. It’s truly the worst. Even IE8 has more unacceptable bugs than I could fit in this comment.

To sum up this article, IE 6 sucks and no body should still be using it.

Otherwise great article :)

Add all these differences in IE6 again and Microsoft should automatically update IE6 to IE8… no need to ask end users …

Good to know the differences … good article…

@Rob W is correct, IE7 and even IE6 have partial support for inline-block

@Jason Zipperer:

You’re absolutely right. In fact, if you read Jeffrey Zeldman’s 1st version of Designing with Web Standards (published in 2003), you’ll see that he constantly refers to IE6 as the most standards-compliant browser on the market.

One of the best ever articles from you guys! Great job!

College Student Notes

IMO @Andrew, the moral is to only use CSS 2.1 selectors for progressive enhancement, and never for things that will make the site unusable for people using IE6.

Examples: to change the color, add a background, etc.

We should not motivate any webdesigner or front-end-developer to *not* use these. Styling a website’s markup is as much about looking back on IE6 (and before) as it is about preparing it for the future.

big thank for this info.

Thanks! Great article.

…and those are just the css issues; try setting an input id with the same name as another input’s name attribute

Nice post… and when IE 9 arrives make an article about all 4 crap browsers and their incompatibilities.

It is very sad for such articles to even exist and the worst part is that we (web developers) have to read it either we like it or not.

Very good article for reference. Thanks!

I am finding with the clients that I work with, IE6 is becoming less of an issue because their end-users are mostly using 7 and 8. Although 6 will still be around for awhile, at some point we need to cut the strings like we have done with IE5.

Far quicker just to pop

@;/*

in your code, hey presto no more IE6 visitors….

It’s about time!

this definetly shows how bad ie6 is… good overview

Concerning IETester, I for myself had to come to the conclusion that it does NOT render pages as it should.
For example if you compare a page in IE6/IETester and a native running IE6 (in Fusion oder VirtualBox) you might notice differences in rendering (espcially when dealing with png).

If you really need a page to be “IE6-compliant” there is no other way than to actually test it on a native IE6.

IETester is a quick and good tool for ironing out the biggest displaying bugs. If it just wouldn’t crash that often ;-)

Rob: “hey presto no more IE6 visitors…”

If you’re creating a commercial site, there’s no way you would want to limit your audience like that.

Generally, I’ll code in Firefox and make sure it works in IE8 and Opera. I’ll then see how well it’s working in IE7 and IE6, and tweak to make the site functional as required. I’m ok with the site not looking as nice under IE6, but I’ll make sure it can still be used.

For those who are saying that a descendant selector after a :hover pseudo-class works in IE6, I would like to see a working example of that. Here is an example link:

IE6 hover test

Visit the page above, and test the hover in IE6 and you’ll see it doesn’t work. Now, if there’s something I’m missing here, then I’d be happy to retract, but as far as I understand, hover does not work on any element in IE6 except directly on an anchor.

Once businesses take a huge interest in upgrading to windows 7 then finally we can turn to IE6 and wave goodbye.
Personally I don’t write sites to support it.
NB – in my analytics of sites that are for business users to read – about 40% still using ie6 as they are dictated (or dont care) by the PC supplied in the office.

IE6… ditch it already…

I believe there is an error in this post – IE6 does support :hover on anchor elements. Further, display:inline-block does work only for inline elements (spans, etc. – not sure if it works on IE6, but I know for sure it works for IE7).

I´m a student. This article will be very useful.

What I don’t understand are these numbers and why the very so much:
http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2
IE6: 24%
Compared with
http://www.w3schools.com/browsers/browsers_stats.asp
IE6: 12%

That’s a huge difference in numbers, I hope the 12% figure is correct

Well, since IE6 is still the baseline… looks like we can’t use anything in this post… ugh. Browser statistics show a nice steady drop of IE6 1 to 2 percent each month this year… let’s hope the trend continues. Another good post, but was sad to see “NO” in every single category for IE6. I agree with Zapix… these IT folks need to up their game, and quit building these companies systems around a browser that is obsolete… what are they thinking?

It’s nice to have all CSS IE differences in one article. Great job!

Handy article. Just to correct a quick error, this does work in IE6:

a:hover span {
color: #0f0;
}

It’s not mentioned above but IE8 (yes the new one) doesn’t support ‘border’ properly. So you have to use ‘outline’ instead.

Someone mentioned the browsers stats from W3C Schools, the issue there is that site only gets visits from developers, hence such a high figure for Firefox.

In the UK, IE6 is the major browser for Business to Business websites. One client stated that IE6 currently accounts for 70% of their traffic!

Haha – so basically IE6 cant do anything. I wish we could stick it in room 101!

Any tips on the best way to manage multiple installations of IE if you design primarily on a single workstation? Must you use VMs?

i hate ie 6 . i dont know why ie 6 update as ie 7 as firefox

Who cares if Microsoft are gonna support it until 4014 or whatever, doesn’t mean we have to. The more of us who stop supporting it the more users will be forced to upgrade.

I take the point about business to business websites/users but Microsoft is only supporting them because of Sharepoint and intranet nonsense. I blame the Sharepoint team/devision for prolonging this mess.

I believe that the IE team are trying to do good things and understand where the net is going (IE8 is a massive leap forward all considered) only to be forced to include such bizarreness as ‘Compatibility Mode’ due to the weight and corrupt bureaucracy of the Microsoft Business Unit so that Sharepoint doesn’t throw a fit.

(Deep breathe) and relax.

This is a long list of reasons why IE6 should be banned!

Great post!

RIPIE6 <– found yesterday :D

@ John Faulds: RE: Dean Edwards’ IE7/8.js = AWESOME.
@ Sandstream: Yes, unfort. I have to aghee with you on this one. If we could get them (corp. and gov.) to upgrade atleast to ie7 it would make our lives easier.
@Vincent : is that Room101 a referance to the book 1984?…

I am complete agreement about the IE6 needs dumped like the kleft overs in teh fridge for a month. IE6 for me is extra work = extra time = extra cost. I actually supported MS’s push of IE8 in the Windows automatic updates, no-one, NO-ONE, should have said a word and just let it go; esp. IT departments…

BTW, once again another great article from SM!

Thanks for this reference, this is a good help when finish a project and need to go back to start hacking for IE6. Please lmk when IE6 is completely out of the market.

@NeoSwf:

Thanks for mentioning that. Under “clipping regions” I mentioned that it works in IE7 with the wrong syntax (spaces), but that should also include IE6. I’ve sent a note to SM for a correction.

Everyone should keep in mind that using spaces for the clip property will make your CSS invalid, but will work cross-browser.

You could power every house on Earth for a few hours– just from the sheer RAGE MSIE elicits from Web Designers. :-)

Nice to see what does and doesn’t work. Thank you for doing the head bashing for us.

If you still want to torture yourselves and test for IE6, I suggest installing IE Collection:

http://finalbuilds.edskes.net/iecollection.htm

It’s a lot simpler than using the VPC image from Microsoft. On the other hand, if you want to be an activist, insert something like this into your website (there are tons of these out there):

http://code.google.com/p/ie6-upgrade-warning/

Either choice is commendable…I’m however encouraged by how sites like YouTube will eventually be phasing out IE6 support.

IE 6: No.

IE6 has No everywhere! FAIL :D

I am from India and almost 85% of people use IE here(at least whom I have seen and i have seen thousands). Most of them are on IE6 so as far as my clientele goes IE6 still cant be ignored(even a bit). I need some luck!

@Louis

The hover descendant selector style only works if the hover itself has a defined effect, so in the aforementioned case you can do something harmless like this:

a:hover{visibility:visible} or a:hover{display:inline;}

Hover Descendant Demo
Hover Quirks Tutorial

inline-block layout works on block elements in IE as well if you reset the style to inline in a separate rule like this:
.column{display:inline-block;}
.ie67 .column{display:inline;}
/* Use conditional comments to add the .ie67 class to the body tag or a wrapper div */

Inline-Block Demo
Zoom Method
Crazy Alternative

Thanks to Paul O’brien, Stu Nicholls, Bruno Fassino, Hedger Wang, and Peter-Paul Koch

Hopefully we’ll see IE6 market share drop much lower now that Win7 is being released – as companies now will have a good reason to upgrade and won’t have compatibilities issues with their in-house apps.

The world of design and web development will be a nicer one. IE6 is holding back the web…

I run everything I do through a few different sites: IENetRender, Adobe’s browserlab (which I just discovered a short while ago), etc. For the really big stuff, I’ll order up a couple dozen shots at browsershots (no idea if this site moderates comments with multiple links in them, so just google if you’re not familiar with those).

The biggest pain in the ass is conflicts that only primitive versions of IE can’t seem to figure out — such as when it refuses to load a page altogether and gives an error message. And sometimes it’s not even IE — someone I know had his security settings in Windows jacked so high that a Firefox browser in XP interpreted an external javascript loading from jquery as an XSS vulnerability and bailed when loading the page. This was just a test page and I planned to change that anyway, but still, you never know…

After fleshing out a site in Firefox, I aim for:

1. Perfection in IEv.8.
2. Good in IEv.7.
3. Acceptable Functionality in IEv.6.

I used to be in one of those workplaces that chained every computer to an antiquated browser, so I know what it’s like. And I also know what my reaction was: “This piece of crap browser isn’t rendering the page correctly, but at least I can read it.” I had no expectation of perfect rendering.

Some users may be less sophisticated than that, but unless your business client is tailored specifically to a b2b purchase (for instance, selling services to large corporations), the perfect in this case is very much the enemy of the good.

IE6 Bugs … “Doesn’t support classes and IDs that begin with a hyphen or underscore”

Strictly speaking (at least in HTML4) no browser should. From http://www.w3.org/TR/html4/types.html

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (”-”), underscores (”_”), colons (”:”), and periods (”.”)

The simplest solution for making a multi-platform website is to simply boycott Explorer as a whole. To evolve, we must leave the weak in the dust. Survival of the fittest.

Well .. tht proves IE6 is the worst creation … it wont support anything at all .. .

well it does support a few of the ones that are mentioned as not supported.. i guess it has to do with different service pack versions .

well,

to say frankly you guys should know that ie 6 was was founded in 1995 and the css version 2 was released on 1998, thats why ie 6 is strugling with css 2. Hacking css makes ie 6 works better in some cases.
In my experience I worked out chained classes in ie 6. Please try this to use chained classes

Put commas after the class name to use multiple classes for a single div.

.class1, .class2, .class3 { background: #fff; } – correct
.class1.class2.class3 { background: #fff; } – wrong

Content here

Anyway thank you (author) for the useful article.

IE6 is the best. I wish i still had one.

@ Emil.Here you go make your wish come true
http://download.microsoft.com/download/ie6sp1/finrel/6_sp1/W98NT42KMeXP/EN-US/ie6setup.exe

Hi
nice article, we can see (again) the poor css support of ie6 but too, progression of the IE family (finally) and that’s a good thing.
It’s not easy to boycott ie6 when you do a work for a firm, pc are often old and ie6 is the king of the place ;(

There is a little mistake, your forget the ‘clip: ‘ in your example

Clipping Regions
Example

view plaincopy to clipboardprint?
#box {
CLIP: rect(20px, 300px, 200px, 100px)
}

Great read, one of the better articles on CSS support throughout MS browsers.
Was familliar with most of them, but still a good read to refresh my memory! :)

I hope the errors mentioned in the comments above will soon be corrected in the article. e.g. ‘a:hover span’ actually works in IE6 as mentioned by Gonzo. Would be nice to have that article in a simple table, too.

finally, a very good article on IE, which – in any version – will eventually drive any web developer insane. just one thing: i used inline-block on IE in some cases, Rob W is right.

thank you for thar article! great!

Very Nice article about comparision of different version of IE, Its very useful for web developers

“IE6/7 bugs : List items with a specified list-style-image will not display the image if they are floated”

In fact, it’s not really a bug, this is what the specs actually describe in CSS2.

The specs has changed that in CSS2.1 :

http://www.w3.org/TR/CSS21/changes.html#q58
Changed rules to convert ‘display’ not always to ‘block’, but to an appropriate block-level display value as given by a mapping table.
Added rule 4 to convert root element’s ‘display’ value according to the mapping.

http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
Specified value > Computed value
others > same as specified

In CSS2, where there were no mapping table, list-item had to be converted to blocks, and by consequence didn’t had any list-specific properties anymore.

IE 6 is a major pain in the rear but our site stats shows that 29.7% of the visits come from IE6, on a worldwide scale that is way to high to just ignore!

Anyway, where’s the fun if it all works perfectly?

Good article, now you need to publish a list of workarounds.

hi,
It is nice article, can you please tell me about .png image support for browsers because most IE version doesn’t support .png images

With Regards,
Sonam S. Diwate
Web Developer / Designer

Ahhh….!!!
I bookmarked this.
I bet, this will solve some pain for desginers. A single-look comparison is always a good one.
I really appreciate your work.
Thanks.

While I agree with most of the cases displayed it this article, I cannot miss the fact that there are supported features listed as if they are not. As a web programmer I have often used selectors like “a:hover span”, in many projects, and it works correctly. Also the Outline property typed as a short hand, I even have never thought that I can write it other way, It works just fine. I really don’t have the time to test everything listed here, but mind that the author has some gaps. It is a shame after 9 years of practice!

Great roundup! Looks like IE6 supports almost nothing, IE7 supports a lot but not newer CSS3, and IE8 supports almost everything.

IE is some sort of evil mockery on standards.

@Mr.MoOx:

Thanks for pointing out the typo in the “clip” code example. It’s been corrected.

Another IE7-bug is that if you :hover anything else then <a>-elements in massively slows down the website.

Why do some companies keep IE6? There are sofware packages that are not supported on new browsers. Take for instance Oracle 11i ERP system. Until a couple years ago, Oracle would not support IE7. We tried running it and for the most part it ran but there were certain functions that would not run correctly. Lucky for us Oracle supports it now. I’m sure there are currently other software packages that still do not support past IE6. Now, when can we go to IE8?

That was great man. Really good. Thanks!

Not to plug a product, but if you have $149.00, pick up Microsoft Expression Web which comes with SuperPreview. It allows you to see side by side inconsistencies and box models in IE 6, 7, 8, and any other browsers. I go with Firefox and Opera. This program has literally saved me 10s of hours in cross browser compatibility. Nice article!

EVERY item in the article denotes a forward progression of the browser, not a flaw or a fault or broken compatability.

The ONLY time any of these items becomes an issue is if you write your code from the front to the back (start coding against the newest browser and then progress to the oldest). Show me a coder who needs to ensure compatability and codes (front to back) that way and I guarantee that they are currently unemployed (or at least not employed as a coder). Its dumb, stupid, idiotic, lazy, {pick a few of your own choice words too} coding that causes these problems and nothing short of it.

lol, not a SINGLE “Yes” on IE6! GIVE IT UP FOR DA MAAAAAAAN!!! B3

Great article by the way. :’3

@Gads, can you elaborate ? Are you saying that designing for IE6 first will make it compatible to Chrome or FF directly ?

:last-child pseudo selector doesnt seem to work in IE 7 also.

@Gads,

What psycho builds FOR ie6 and then scales upwards? I personally build for the latest browsers then I work into my css graceful degradation towards the older browsers. If you design for ie6 you must have 90’s designs or something. Very strange.

This being said I tend to do my html and CSS with IE6 at least in mind, even though I don’t go out of my way to make it perfect in IE6 anymore. I tend to have almost no issues with the browser.