Techniques to use when IE6 dies

Emil Hesslow ( 27 Aug 2009 )

http://a.deveria.com/caniuse/ , nice page where you could see which features you can use in which browser.

Csaba Kétszeri ( 27 Aug 2009 )

A “please drop your current browser and use something better” message is too similar to the old “optimized for Netscape Navigator” ones.

It simply sends out a negative message about the page.

If the sale/marketing and the customer service department agrees in that this kind of message should be on the page, it is fine for the IT to put it on. After all, a world without IE6 is a better world. :)

Emil Stenström ( 27 Aug 2009 )

@Csaba Kétszeri: Are you arguing that we should never let go of IE6? Because that “optimized for…”-message will look just as bad in 2014 when Microsoft’s support for IE6 is dropped. Btw. that dropping could be something as simple as disabling the CSS for IE6, while still letting them get to the content.

Emil Stenström ( 27 Aug 2009 )

@Emil Hesslow: That’s a great reference list. I love the summary box at the bottom, stating that 96% of the features in the list does not work in IE6.

Roland Bouman ( 27 Aug 2009 )

Hi!

yeah, I can’t wait for it to die out too. Another thing that is sorely missing in IE6 is a print preview that doesn’t suck.

BTW:

“Multiple classes/ids on the same element”

AFAIK, multiple classes on the same element works fine in IE6. At least I use the feature and it seems to work for me. Am I missing something?

Emil Stenström ( 27 Aug 2009 )

@Roland Bouman: It’s easy to think that multiple classes work, but in fact they don’t. Try styling something like .class1.class2 { [css here] }. You’ll notice that everything with class2 gets that styling, whether or not it has class1 applied too. It’s trixa, and very easy to miss.

Roland Bouman ( 27 Aug 2009 )

Hi Emil!

When you wrote “multiple classes on the same element” I thought you meant:

and this works fine – the div is styled bold with a red background.

What you are describing in your reply seems more like a ruleset with multiple class selectors. I tried it, but I can’t get your particular example to work at all (tried Chrome, IE8 and FF 3.5). Am I missing something?

Emil Stenström ( 27 Aug 2009 )

@Roland Bouman: Here’s an example applying CSS to elements with multiple classes: http://www.webdevout.net/test?01Z – scroll down to see the result.

Alex ( 27 Aug 2009 )

The min/max height can be set in IE6 with the followings:

For max height:

For max witdh:

Anyway, i think that we could all e-mail Microsoft with suggestions about these facts.

John Stathon ( 27 Aug 2009 )

I think that the biggest problem with IE and the big thing that IE6 can’t do is offer you protection.

It has many vulnerabilities as it benefits from a poor update system.

If you don’t want to include the code that @Emil published in your websites you should know the following tips to avoid problems with your site design in IE6.

1.Use a doctype
2.Use display:inline for all floated elements
3.Use only

tags formhovered elements. (the CSS hover effects that IE6 can only apply are limited to

tags)
4.Avoid Percentage dimensions

I think that is a good idea to create a website with this theme of discussion, or support the existing ones.

Alex ( 27 Aug 2009 )

Have a look at what Microsoft has to say about this:

http://news.bbc.co.uk/2/hi/technology/8196242.stm

‘The software giant said it would support IE6 until 2014 – four years beyond the original deadline.’

Emil Stenström ( 28 Aug 2009 )

@Alex: I linked to an article about that in the first sentence :) “except Microsoft themselves”.

Emil Stenström ( 28 Aug 2009 )

@Alex: About your max-width/max-width suggestions. Using expressions is not a recommended way to work around IE6:s problems. The problem is that they are evaluated too often, even as you move your mouse around. Slow computers get a very sluggish behaviour, which is why optimization tools like YSlow recommends against using them at all.

The point here isn’t that there are no workarounds. There are. It’s about developers being able to focus on CSS, not those workarounds, and therefore be more productive.

Alex ( 29 Aug 2009 )

@Emil, i had adblock enabled on Firefox and the “except Microsoft themselves” link had a full banner ad so the page was not loading.

Anyway, the majority of surfers that use IE6 are begginers so without Microsoft help it’s very hard to make them change/upgrade their browser.

Regarding your last comment, what is the best way to avoid problems with Min-height, Max-height, Min-width, Max-width in IE6?

John Stathon ( 29 Aug 2009 )

I think that is very hard to optimize your site for IE6 and i don’t think that it worths it.

Emil Stenström ( 30 Aug 2009 )

@Alex: Ah, an adblocker :) Regarding max/min-width/height: if you need it for IE6 you can easily use regular javascript to do exactly the same thing, just with less resources.

Alex ( 30 Aug 2009 )

@Emil, i guess i have to change all the expressions that i’ve used till now.

Anyway, i’m thinking that it should look good if i use your “8 years old browser alert” and urge all those who use IE6 to upgrade as soon as possible.

Jeff Seager ( 31 Aug 2009 )

Tough question, Emil. I think a positive statement is almost always better than a negative one. What do you think about briefly noting the advantages of viewing your site with a modern standards-compliant browser (IE7 or higher, Opera 7 or highter, Firefox 2 or higher … etc.) — then linking to The Web Standards Project or something like that?

I wouldn’t want to do that with a pop-up window. Maybe with something like we now use with the

tag that alerts people to enhancements only available with javascript enabled. Using javascript or another method, you could detect IE6 users and deliver that message only to them.

In the end, I think the only way to choke out bad practices is to practice doing it right. We cannot insist that people upgrade their browser, but it’s good to point out how upgrading will benefit them.

Jan Willem ( 2 Sep 2009 )

I agree with you, especially not supporting these PNG. I use it in my menu. Altough I still write separate CSS files for IE 6, because it’s still used by enough 13.6% off all browsers (according to w3schools.com statistics.

En yes, I thinks IT fokes are lazy, lately we got new updates on every department and I remember the last programm became suitable for Explorer 8, so all programms are ready for browser update. Still they didn’t update the browser, still they didn’t give me a good reason why they didn’t. Perhaps because I’m the only complaining about this. I don’t understand my collegue, they all got newer browsers at home!

I have a support section in home some time which gives a message if people use IE 6. I think everyone should do this. It’s time to move on, the only thing which should be done is install the new browser and if necessary (mostly even not) implement online programms.

Jan Willem ( 2 Sep 2009 )

Oh, I forgot: great list, Emil!

Alex ( 7 Sep 2009 )

I found out a nice free tool to test your website compatibily with all IE versions. It has no adware/malware/spyware and it’s a very usefull tool for a webdesigner.

http://www.my-debugbar.com/wiki/IETester/HomePage

terry ( 13 Sep 2009 )

ie6 support till 2014 ? microsoft fails again :((
@Alex – you can try http://browsershots.org/ to check various browser compatibility

Jim Westergren ( 17 Sep 2009 )

Hi Emil,

From your third link I found http://www.ie6nomore.com/code-samples.html which I saved for later use – I think it is great.

What about floating anchors on inline lists? Isn’t that a bug in IE6? Maybe I don’t know the exact bug but I always have a headache writing the CSS for an ul element that is the nav menu.

Alex ( 18 Sep 2009 )

@Terry – your solution for checking browser compatibility is great but very time consuming. If you want to test only IE and you want to do it fast like you had that browser installed on your operating system, you can use the tool that i wrote about in my last post.

Cody ( 18 Sep 2009 )

Wow IE6 until 2014 – Ouch!

Either way I think I’ll be most excited not to worry about PNG transparency and the min and max heights and widths.

I seen some people looking for options to test IE. This is what I use if anyone is interested.

http://www.my-debugbar.com/wiki/IETester/HomePage

Alex ( 10 Oct 2009 )

Have you seen that youtube have stopped supporting IE 6?

Randy Comeau ( 11 Feb 2010 )

Agreed, IE is dead. IE in general… Why doesn’t MS just lay down and die!

Sean ( 26 Apr 2010 )

I can say I’m looking forward to PNG being fully viable, and the use of multiple class selectors (although the additional selector pool may be enough once I can use some more CSS elements — I love :first-child and :last-child).

IE6 is the browser that just won’t die.

JP ( 10 Jun 2010 )

IMO, IE will continue to survive because they bundle it with windowz :)

Vanessa ( 21 Jun 2010 )

Wow IE6 until 2014 – Ouch!Either way I think I’ll be most excited not to worry about PNG transparency and the min and max heights and widths.I seen some people looking for options to test IE. This is what I use if anyone is interested.www.my-debugbar.com/wiki/IETester/HomePage

tswaters ( 5 Aug 2010 )

I think the best possible way to deal with old browsers is to not apply any hacks and let the layout break. Don’t waste time testing sites in a wide variety of older browsers, just assume they’ll fail and let them.

If users of ancient browsers navigate around the internet and see that everything still works — they will assume there is nothing wrong with their browsing experience. If every third page they see is broken, they might just get a clue — and that’s better than a push from Microsoft, IMO.

Then again, I should say I don’t have customers, per say, visiting my web sites — optimizing a site for a mass number of computer configurations isn’t exactly a priority of mine. This is all anyone sees when they visit my site on an older browser: “Your browser is not future friendly. Upgrading as soon as possible will bring you a better internet experience, I promise.”

jb007 ( 24 Jan 2011 )

Really, your article is super. thanks…..