TW Blog :: Archives for November 2003

IE5.0 Versus IE5.5

Relates to Accessibility and Exploder

I am a strong advocate of accessibility, and make every effort to sell and build website for clients that are conforming to the WCAG, while maintaining Web Standards and page validity. For all the hard work, sometimes those ever so standards-friendly browsers from Micro$oft put a spanner in the works!

On completion of a recent website, with all the usual set of validity and accessibility tests, I was perturbed to hear from the client that the display on screen was total chaos! As it turned out, they had just had MS 2000 Pro installed, accompanied by IE5.0 as the default browser. While I urged them to upgrade their browsers, it was conceivable that a portion of the target audience would also be using IE5.0, and so the pages were not accessible. A few weeks ago, this would have been a real issue with no way for me to test where the problems were arising, but fortunately recent discoveries allow testing over the full range of IE browsers.

So I got to testing, and soon traced down the glitches to a couple of CSS incompatibility issues for IE5.0. The major cause of so much destruction was the use of relative for container positioning, and IE5.0's reluctance to acknowledge the height attributes in these containers. I knew declaring position:relative was a cause for disappearing elements across IE5.x and had formulated personal guidelines for using this declaration, but did not know it could eat appart the display in IE5.0.

Most CSS hacks for hiding code seem to classify IE5.x as a single entity, but in this case I needed to write different code for IE5.0 and IE5.5, otherwise one of them would fail to display correctly. The best solution I found in the archives is the following snippet:

div#id {
  position: static;               [1]
  position/* */:/**/:relative;    [2]
  position:relative;              [3]
}

1. Line [1] is read by all browsers - final value for IE5.0
2. Line [2] is ignored by IE5.0 and IE5.5 but read by all other browsers
3. Line [3] is also ignored by IE5.0 but is read by IE5.5 - final value for IE5.5

It is a great shame when so much work is put into accessibility for all browser mediums and users, yet making a site accessible for the client rests on a bunch of ugly hacks! I suppose a better long term solution to this would be to separate this bunch of IE CSS hacks using Tantek's Mid Pass Filter. Then, once these legacy browsers have finally been put down, the hacked files could just be discarded.

Posted on Tuesday, Nov 18, 2003 at 18:03:00.