Slashdot Mirror

I'm seeing more sites that load slowly. Sites that need ten seconds or more to load over an idle DSL line are becoming common. Often, the delay is caused by page layout designed to delay loading until all the ads load. The renderer reformats frantically as the content trickles in. Sometimes it's because the server is overloaded servicing the within-page requests. This is a big step backwards.

On the hysteria front, there's a site devoted to AJAX page layout. It contains a long section on how to get a page with three columns of the same height. Javascript is used to compute the length of each column and align the columns. Differences between browsers must be handled. It doesn't work right in IE Mac 5, Firefox 1.0, or Opera 5 and 6. (But it's fixed in Opera 9b and Firefox 1.5!) Special cases are required for Opera 8 and Safari. All this to get three columns. Write once, debug everywhere.

That's what HTML tables are for.

I availed myself of Web Schools from W3C, which is pretty straight from the horses mouth

w3schools.com has nothing to do with the W3C, and from a quick glance at their tutorials, they get a number of things utterly wrong. I think it's pretty sleazy for them to take advantage of the W3C's name to get credibility they don't deserve, especially when they do it to foist a load of adverts and diploma offers on you.

Didn't you think that it was a bit odd to go to a "W3C" tutorial site and read all about code that only works in Internet Explorer? I'm not the only one who doesn't like it. Selected quotes:

"the site's content itself is highly IE centric (W3 my arse, IE-only apis and samples everywhere)."

"It took me a couple of months of correspondance to get them to make a few simple changes to give their SVG (and any SVG written by their readers) a half chance of working in Moz."

"w3schools is a very lacking site."

"They don't even test their simple code samples."

"What good is a school that teaches the wrong content?"

The boxes CSS tutorial you link to is fairly dated now, there have been quite a few improvements to it, and this set of techniques is probably the best approach these days.

• css/edge
• Glish CSS Layout Techniques
• Position Is Everything
• stu nicholls | CSS PLaY | CSS layouts
• A List Apart
• CSS Discuss

A few good places to start:

• Position is Everything
• A List Apart
• CSS Zen Garden

On the book front, must-reads include: Designing with Web Standards by Zeldman, Eric Meyer on CSS and More Eric Meyer on CSS, and Dan Cederholm's Web Standards Solutions.

Also, Veerle Pieters has a very useful hyperlinked PDF of CSS resources; the associated blog page has more details.

That lot should get you started :-) Hope that helps.

But be warned: like you I'm a hard-core, long-term technical bod, who's done everything from embedded systems software to web development, and it's only after 3 years, absorbing everything I could learn about CSS in theory and practice, and particularly how to conquer the Great Satan IE, that I've finally got to the point I referred to in my original post. To be perfectly honest, I couldn't believe it when I only needed 13 lines of hacks to tame IE on a very complex design.

So when you start, the best bit of advice I can give you is: code and test to Firefox first. If something looks a bit off, check it in Opera 8, and in Safari if you have access to a Mac. Once you've got it working across those three, everything that goes wrong in IE is IE's fault, not yours. That's when you start applying the hacks found at Position is Everything and other places, until IE finally falls back into line.

It's not as bad as it seems; if you have the kind of logical mind that goes with writing code, you'll soon begin to discern the patterns underlying IE's peculiar behaviour. (Virtually everything can be tamed using the Holly Hack, explained at Position is Everything, linked above.)

Good luck, and Enjoy :-)

I suspect that if you had to modify HTML to correct display issues, then you hadn't completely separated structure (which belongs in HTML) from display (using CSS).

I suspect that one good reason behind preferring proven HTML techniques over their CSS counterparts (such as <table> vs. display: table-cell) was to make the site more compatible with legacy code that doesn't allow such a complete separation of structure from presentation.

Like it or not ie is the "standard-defying standard."

If you are taking technical advice from your customers, then perhaps you are in the wrong line of work. Customers don't understand all the implications. You know as well as I do that there are (or will be) a gazillion web-browsing devices out there all running different browsers. For example, my Nokia has a version of Opera on it which works great, and it's really annoying when I hit a site that does browser-checking and locks me out for no real reason other than "they don't like how their site will look on a non-approved browser". I don't really care in that case, I just want the functionality/content. This was the promise of HTML standards to begin with.

Incidentally the charge arrangement I usually do see is a bit different from what you mention- the higher figure usually includes Windows IE compatibility, the numerous problems of which are well-documented. The fact that Microsoft is even referring to that site to fix the next version of IE says a lot.

I might have a bit of a grudge as I was hired to work on a web/DB app that "only works in Windows IE". My boss says "they couldn't include cross-browser testing in the budget" when in my opinion it shouldn't have even been posed as a question to begin with. I'm really tired of that mentality.

http://www.csszengarden.com/ http://www.alvit.de/handbook/ http://www.wpdfd.com/editorial/basics/index.html http://www.w3.org/TR/REC-CSS2/ http://css.maxdesign.com.au/listamatic/ http://www.cssvault.com/ http://glish.com/css/home.asp http://webhost.bridgew.edu/etribou/layouts/index.h tml http://www.positioniseverything.net/ http://www.stylegala.com/

Only 2 of the many CSS bugs have been resolved, no improvement in CSS implementation/support, no good debug tools.

Maybe try a IE Blog 'standards' search... even though they are pretty quiet about it, when they do say something it's pretty encouraging. Especially the fact that they link Quirksmode and Position Is Everything. If the IE Team fixes the bugs outlined there, a huge weight of debugging will be lifted from web designers (well, in like 7 years when everyone is finally upgraded :)

More Info

http://blogs.msdn.com/ie/archive/2005/07/27/444004 .aspx
http://www.microsoft.com/downloads/details.aspx?Fa milyId=718E9B3A-64FE-4A4C-9DDF-57AF0472EAD2&displa ylang=en

"CSS improvements. CSS is a widely used standard for creating Web pages. Internet Explorer 7 is prioritizing compliance to CSS standards by first implementing the features that developers have said are most important to them. As a result, in Internet Explorer 7 beta 1 Microsoft has addressed some of the major inconsistencies that can cause Web developers problems producing rich, interactive Web pages. The work Microsoft has done includes fixing some positioning and layout issues related to the way Internet Explorer 6 handles tags. (More information about these bugs can be found online at http://www.positioniseverything.net/explorer/peeka boo.html and http://www.positioniseverything.net/explorer/guill otine.html. The final release of Internet Explorer 7 will focus on improving the developer experience by reducing the time needed for developing and testing on different browsers."

More Info

http://blogs.msdn.com/ie/archive/2005/07/27/444004 .aspx
http://www.microsoft.com/downloads/details.aspx?Fa milyId=718E9B3A-64FE-4A4C-9DDF-57AF0472EAD2&displa ylang=en

"CSS improvements. CSS is a widely used standard for creating Web pages. Internet Explorer 7 is prioritizing compliance to CSS standards by first implementing the features that developers have said are most important to them. As a result, in Internet Explorer 7 beta 1 Microsoft has addressed some of the major inconsistencies that can cause Web developers problems producing rich, interactive Web pages. The work Microsoft has done includes fixing some positioning and layout issues related to the way Internet Explorer 6 handles tags. (More information about these bugs can be found online at http://www.positioniseverything.net/explorer/peeka boo.html and http://www.positioniseverything.net/explorer/guill otine.html. The final release of Internet Explorer 7 will focus on improving the developer experience by reducing the time needed for developing and testing on different browsers."

The new version is able to open the documents by those who have the new version. Therefore everyone who wants to open those files must upgrade.

And as far as IE7 is concerned, what will it bring to a business whose intranet is optimized for IE6?

Nothing in the intranet but I bet someone does a site that relies on the IE7 functions and then all hell breaks loose. Will they fix the CSS bugs? I don't think so. Please, fix at least the margin doubling bugs and other annoyances. On the other hand, they might add new bells and whistles like scrollbar colors and other proprietary css tags without the company prefix like nice browsers do.

The new version is able to open the documents by those who have the new version. Therefore everyone who wants to open those files must upgrade.

And as far as IE7 is concerned, what will it bring to a business whose intranet is optimized for IE6?

Nothing in the intranet but I bet someone does a site that relies on the IE7 functions and then all hell breaks loose. Will they fix the CSS bugs? I don't think so. Please, fix at least the margin doubling bugs and other annoyances. On the other hand, they might add new bells and whistles like scrollbar colors and other proprietary css tags without the company prefix like nice browsers do.

[...] lots of cool effects that work only in IE or IE 6

Just compare a W3C compliant page in IE 5, IE5 for Mac, IE 5.5 and IE6. I don't have the link handy, but i think David Hyatt had a nice write-up of IE's rendering, with elements jumping around.

full support for css2

I don't expect that from any browser today. I'd settle with

• correct implementation of supported CSS2 features

That's right. The problem isn't that MSIE doesn't support some CSS features but that it supports many of the features incorrectly. For example, read about quirky implemenatation of percentage unit in MSIE. MSIE implements not one but two different implementations for that feature and neither is the correct one! Just try that page with MSIE and hover the examples with mouse cursor.

For amusement, next time MSIE messes up the page layout, try inserting CSS rule * {zoom:1}. That CSS property should do nothing (it's a proprietatry property defined by microsoft and it's supposed to select "zoom level" for the element, 1 being "100%").

This site best viewed in a Browser That Works Better than Internet Explorer.

What I would like to see is a book that skips all the fluff that we've seen before and goes straight to browser bugs.

Absolutely. There are a million tutorials that will teach you all about CSS in theory, and once you have a reasonable base knowledge you can actually go into the W3C spec itself and dig into the details, but when it comes time to make your pretty new XHTML/CSS2 page work in IE you better have a boatload of knowledge.

After 5 years, and the thankful death of NS4 and IE5 (for the most part), I can debug my XHTML/CSS pages extremely efficient, but good references are still necessary. My two favorites:

CSS-discuss mailing list wiki
&
Position is Everything

I don't know why anyone informed would say this. The CSS in IE6 is kinda bad, but it's clearly supposed to be W3C CSS and not something proprietary.

Have you seen how well MS has adopted the W3 open standards for css and (x)html?

You trying to be Funny, right? Just have a look at the weird and wonderful world of Internet Explorer

Not in Dreamweaver MX 2004, at least. Using their clicky-clicky interface and built-in templates with a :hover on the "navbar" triggers the Guillotine Bug. This is using only the WYSIWYG editor and banging in attributes on each element in the "properties" boxes.

Another benefit is that all other user-agents won't even download it. Unless you're putting all your css inline, but then that's just a huge waste. Link your styles in the head and CC out the ie.one(s). No muss - no fuss.

first, basic styles:

<link rel="stylesheet" type="text/css" href="/includes/_css/basic.css" media="screen" />

<link rel="stylesheet" type="text/css" href="/includes/_css/extended.css" media="all" />

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/includes/_css/ie.css" media="screen" />
<![endif]-->

I lay out in FF and give it a second pass with IE (it is truly joyful to be able to continue checking in FF when i boot into the dark side). And a lot of IE's rules are pretty much obvious from the beginning, so it's not always a complete shock when checking it in that.

OT - I keep seeing these pages where the same bloody css & js stuff is on every page. I figure whoever's put it together thought they were 'templating' because they stuck it in to head.php or something, not realizing that the browser never has a chance to cache (and thus save on both bandwidth and rendering time). All they needed to do is put some link tags in.

Another benefit is that all other user-agents won't even download it. Unless you're putting all your css inline, but then that's just a huge waste. Link your styles in the head and CC out the ie.one(s). No muss - no fuss.

first, basic styles:

<link rel="stylesheet" type="text/css" href="/includes/_css/basic.css" media="screen" />

<link rel="stylesheet" type="text/css" href="/includes/_css/extended.css" media="all" />

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/includes/_css/ie.css" media="screen" />
<![endif]-->

I lay out in FF and give it a second pass with IE (it is truly joyful to be able to continue checking in FF when i boot into the dark side). And a lot of IE's rules are pretty much obvious from the beginning, so it's not always a complete shock when checking it in that.

OT - I keep seeing these pages where the same bloody css & js stuff is on every page. I figure whoever's put it together thought they were 'templating' because they stuck it in to head.php or something, not realizing that the browser never has a chance to cache (and thus save on both bandwidth and rendering time). All they needed to do is put some link tags in.

Well, for starters min-width and max-width would be incredibly useful, as well as easy to implement. There are work arounds for those, but they suck and often don't work very well.

All the other stuff like attribute selectors and so on would be really great, but if they could just add support for min-width and max-width and fix the bugs in the stuff they've got nearly-implemented (peekaboo bug, 3px jog etc.), as well as add proper support for XHTML 1.1 as "application/xhtml+xml" it would be a step in the right direction.

Unfortunately, Microsoft don't even care about fixing the bugs that have been documented since forever.

Still, I hear they'll finally be adding proper support for alpha-transparency PNGs, thank the heavens.

So why are they supporting HTML?

Or previous CSS versions?

Check this out. Look at it in a standards-capable browser, then in IE. "Mostly compliant" is still not compliant.

CSS is incredibly well documented, both officially and by its users.

Dealing with browser quirks takes nothing more than time and a little pit of patience. You have to set your goals of which browsers with which features, plan for graceful fallback, and test test test. Just like any trade with numerous and subtle exceptions, if you do it long enough it all becomes second nature and you find yourself writing CSS that not only validates, but looks right on every browser you desire.

CSS would be nowhere today if it had been an XML-based language. The spec is pretty well written and (numerous gotchas excepted) pretty well supprted, even by Microsoft.

Late reply and further off topic. Anyhow, that is a great page.

Two other good CSS sites are http://www.positioniseverything.net/ and http://www.csszengarden.com/.

P.I.E. has a list of IE CSS bugs and plenty of workarounds, mostly using other IE bugs to hide CSS rules from other browsers.

CSS Zen Garden's highlight is the main page. Hundreds of others have created different stylesheets for it which completely change the appearance. The special effects set has some very impressive effects accomplished with pure CSS.

The bad thing about the CSS Zen Garden is it's depressing. Few people designing sites professionally for a company are able to really use CSS, only using the pitiful amount it supports correctly. It's depressing because the web could be so much better if only IE would go away.

Here are some interesting display/development related bugs

Concrete examples are available at: Position is Everything

The trouble is that a certain page renders wrong (what I think is wrong), the first time you look at it after opening Internet Explorer, and then displays correctly every time you look at it afterward, even with 'refresh'.

That sounds like one of these bugs. I've had even worse - all the text on the page disappearing, but minimising and then maximising the window fixes it! Internet Explorer really is a piece of shit.

• CSS Wiki! - + - this is extra copy so this would post
• Centering advice! - + - this is extra copy so this would post
• Centering advice! - + - this is extra copy so this would post
• Fix crappy MSIE support! - + - this is extra copy so this would post
• tips, tricks and good practice techniques! - + - this is extra copy so this would post
• Box model Illustrated! - + - this is extra copy so this would post
• links collection! - + - this is extra copy so this would post
• links collection! - + - this is extra copy so this would post
• links collection! - + - this is extra copy so this would post
• Tutorials, Demos, and Hacks! - + - this is extra copy so this would post
• Best Practices! - + - this is extra copy so this would post
• Best Practices Crib Sheet! - + - this is extra copy so this would post
• Best Practices! - + - this is extra copy so this would post
• Holly Hack! - + - this is extra copy so this would post
• 3 pixel hack! - + - this is extra copy so this would post
• Firefox webdev plugin! - + - this is extra copy so this would post
• Mozilla CSS editor! - + - this is extra copy so this would post
• Debugging Advice! - + - this is extra copy so this would post
• Page Building Process! - + - this is extra copy so this would post
• selectutorial! - + - this is extra copy so this would post

Lists

• listamatic 2 (nested lists)! - + - this is extra copy so this would post
• listamatic! - + - this is extra copy so this would post
• listutorial! - + - this is extra copy so this would post
• Piped List! - + - this is extra copy so this would post

Floats

• floatutorial! - + - this is extra copy so this would post
• float-theory! - + - this is extra copy so this would post

Filtering

• Explorer! - + - this is extra copy so this would post
• safari filtering! - + - this is extra copy so this would post
• filters! - + - this is extra copy so this would post

Type Issues

• CSS Wiki! - + - this is extra copy so this would post
• Centering advice! - + - this is extra copy so this would post
• Centering advice! - + - this is extra copy so this would post
• Fix crappy MSIE support! - + - this is extra copy so this would post
• tips, tricks and good practice techniques! - + - this is extra copy so this would post
• Box model Illustrated! - + - this is extra copy so this would post
• links collection! - + - this is extra copy so this would post
• links collection! - + - this is extra copy so this would post
• links collection! - + - this is extra copy so this would post
• Tutorials, Demos, and Hacks! - + - this is extra copy so this would post
• Best Practices! - + - this is extra copy so this would post
• Best Practices Crib Sheet! - + - this is extra copy so this would post
• Best Practices! - + - this is extra copy so this would post
• Holly Hack! - + - this is extra copy so this would post
• 3 pixel hack! - + - this is extra copy so this would post
• Firefox webdev plugin! - + - this is extra copy so this would post
• Mozilla CSS editor! - + - this is extra copy so this would post
• Debugging Advice! - + - this is extra copy so this would post
• Page Building Process! - + - this is extra copy so this would post
• selectutorial! - + - this is extra copy so this would post

Lists

• listamatic 2 (nested lists)! - + - this is extra copy so this would post
• listamatic! - + - this is extra copy so this would post
• listutorial! - + - this is extra copy so this would post
• Piped List! - + - this is extra copy so this would post

Floats

• floatutorial! - + - this is extra copy so this would post
• float-theory! - + - this is extra copy so this would post

Filtering

• Explorer! - + - this is extra copy so this would post
• safari filtering! - + - this is extra copy so this would post
• filters! - + - this is extra copy so this would post

Type Issues

• CSS Wiki! - + - this is extra copy so this would post
• Centering advice! - + - this is extra copy so this would post
• Centering advice! - + - this is extra copy so this would post
• Fix crappy MSIE support! - + - this is extra copy so this would post
• tips, tricks and good practice techniques! - + - this is extra copy so this would post
• Box model Illustrated! - + - this is extra copy so this would post
• links collection! - + - this is extra copy so this would post
• links collection! - + - this is extra copy so this would post
• links collection! - + - this is extra copy so this would post
• Tutorials, Demos, and Hacks! - + - this is extra copy so this would post
• Best Practices! - + - this is extra copy so this would post
• Best Practices Crib Sheet! - + - this is extra copy so this would post
• Best Practices! - + - this is extra copy so this would post
• Holly Hack! - + - this is extra copy so this would post
• 3 pixel hack! - + - this is extra copy so this would post
• Firefox webdev plugin! - + - this is extra copy so this would post
• Mozilla CSS editor! - + - this is extra copy so this would post
• Debugging Advice! - + - this is extra copy so this would post
• Page Building Process! - + - this is extra copy so this would post
• selectutorial! - + - this is extra copy so this would post

Lists

• listamatic 2 (nested lists)! - + - this is extra copy so this would post
• listamatic! - + - this is extra copy so this would post
• listutorial! - + - this is extra copy so this would post
• Piped List! - + - this is extra copy so this would post

Floats

• floatutorial! - + - this is extra copy so this would post
• float-theory! - + - this is extra copy so this would post

Filtering

• Explorer! - + - this is extra copy so this would post
• safari filtering! - + - this is extra copy so this would post
• filters! - + - this is extra copy so this would post

Type Issues

Good old Peter Blum - quality validators. While on the subject of .net improvements, don't forget to update the machine.config file so that .net doesn't detect uplevel browsers as downlevel and start outputting HTML 3.2. You can find a fairly good browsercaps file here: http://www.codeproject.com/aspnet/browsercaps.asp though there may be better resources around.

For CSS - I can recommend (In no particular order):
http://thenoodleincident.com/tutorials/css/
http://www.meyerweb.com/eric/css/edge/
http://www.positioniseverything.net/
http://www.s7u.co.uk/
http://alistapart.com/topics/css/

For CSS inspiration, go here: http://www.csszengarden.com/

But I would go for a book:
Designing with Web Standards, Jeffrey Zeldman (ISBN: 0735712018). Possibly also the Eric Meyer on CSS books too.

Enjoy.

Browsercam is a good resource. Of course, you can't test functionality with it, but your layout is where you will run into the most browser bugs.

Ultimately, the best route I've found is to stick like glue to the standards and don't use nested tables or rely on Javascript.

As long as you stick valid HTML 4.01 or XHTML and CSS, the rendering bugs for IE5+/Win and IE5+/Mac are pretty well known. Older browsers can easily be sent plain text or minimal styling with media or @import hacks. Spend a lot of time lurking on the CSS-d mailing list.

Where do you find out about the "well-known" rendering bugs? There are a ton of sites out there about them, but I like PositionIsEverything and the CSS-Discuss Wiki.

You will, however, notice that many of the bugs mentioned there are fairly trivial, and (as of Firefox 0.8) several of them appear to be fixed now.

It's not anything like IE's bugginess and incomplete support. You don't see freak bugs like IE's margin-doubling. IE also lacks support for :hover, position: fixed, and has many other bugs and omissions.

And the fact is, no browser supports all of CSS2. Mozilla (Gecko) has much better support than most browsers, and they are constantly improving it's rendering. Compare that with the stagnation of IE's development over the last several years.

You will, however, notice that many of the bugs mentioned there are fairly trivial, and (as of Firefox 0.8) several of them appear to be fixed now.

It's not anything like IE's bugginess and incomplete support. You don't see freak bugs like IE's margin-doubling. IE also lacks support for :hover, position: fixed, and has many other bugs and omissions.

And the fact is, no browser supports all of CSS2. Mozilla (Gecko) has much better support than most browsers, and they are constantly improving it's rendering. Compare that with the stagnation of IE's development over the last several years.

I second that!

IE6 is old and it's CSS support is lacking (non-complete CSS1 as parent poster stated) and bug-ridden!

Ever encounterd a webpage that uses CSS that "works" in IE, and looks broken in other browsers? Chances are it's really because the other browsers work right according to the specs, and the author of the page unknowingly created CSS that satisfied IE's float quirks, or had an HTML editing tool that did it.

A real showstopper for the adoption of CSS if you ask me!

Same problems here... but Explorer Exposed! helps me quite a bit. Good listing of IE CSS bugs and work arounds.

Well, the designs do work and most browsers, but many of them rely on various hacks and workarounds to display correctly on all browsers, and even the most standards compliant browsers on the market have bugs. This means that developing cross-platform CSS is a lot more work than it should be.

But the CSS Zen Garden is definitely an amazing ressource, and discovering it was what helped me kick the tables-for-layout habit.

That's a bug alright, and unfortunately a longstanding one. I'm curious though? What type of effect are you trying to create by this kind of positioning with respects to form controls?

Personally I find it odd, that you would favor IE when creating complex (or even simple) CSS layout - personally I find IE lacking and frustrating in so many areas. Try taking a look at this site for example. There are some serious IE CSS positioning bugs discussed here which I can't imagine you haven't encountered? Some are misinterpretations of the W3C specs, and others just exhibit unexplainable behaviour. There are workarounds for some of them, but not all of them will leave you with valid markup. There are also some Mozilla position bugs explained there, though I don't know whether they have been fixed in the meantime.

Another classic IE CSS1 bug as shown by the Complexspiral demo.

I remember an interesting story here on slashdot about how Microsoft winning the browser war stopped the innovation with IE. Think about it? How old is IE now? This MSDN document about the CSS enhancements (box model implementation) in IE 6 is dated march 2001. That's ages ago, and now CSS2.1 - if I'm not mistaken - is the current recommendation with CSS3 around the corner. When is the IE 7 due? 2006? 2007?

A lot of other browsers like Mozilla and Opera are much more up to date, with respects to CSS, and at least with one of these browsers you can file a bug, and see it getting proper treatment and being fixed in the end.

And what's more, it doesn't even fully support CSS1, which was released in 1996! Try the ComplexSpiral demo, which is a neat demo of the effects possible in Mozilla, Opera and Safari with the 'background-attachment:' CSS1 property, which IE supports only on the BODY tag. Also, let's add 'position: static' support onto our wishlist (for watermarks/menus on pages) and PNG alpha support, and a whole bevy of regular CSS rendering bugs that have remained unsolved for years. MS claims "full CSS1 compliance", but in reality they only support the reduced CSS1 core spec.

And to think it'll be a wait of several years before IE is updated with Longhorn... until then, writing pure CSS sites is going to remain a bug-whacking chore. Let's all be collectively glad that MS fought so hard for their "Freedom to Innovate" back in the anti-trust days ;).

P.S. redesign slashdot using modern web standards, editors!

Well let's take a look at what technologies IE supports reasonably well.

HTML 4, spec first published Dec. 18, 1997
CSS 1, spec first published Dec. 17, 1996
CSS 2, spec first published May 12, 1998

So they range from 5.5 to 7 years old.

Also, I find it offensive to hear someone say that IE handles standards as well as any other browser. Maybe as well as any browser available at the time IE 5 was released, and it has progressed very little on it's way to version 6. Please see this for a small sampling.