Easy, isn't it?
It should have been. A quick browse of the standards documentation at the W3C site lead me to think that I should be able to do it in an evening.
In fact, the pages were migrated, manually, in the space of one evening and displayed perfectly in Firefox, Opera and Konqueror. I then spent another evening re-migrating them to use a standard template page, and a macro-expander (Will Duquette's expand.tcl) to assist in any wide-scale updates/changes).
The pages validated without any errors or warnings on the W3C site but (and anyone who has done any web design is probably way ahead of me here) I hadn't allowed for the bizarrely bug-ridden CSS, layout and XHTML handling of Internet Explorer.
Problem 1 - The XML Declaration
The first issue I came up against was that IE (I only tested IE6) doesn't play well with pages that include the XML declaration, as recommended by the W3C (its inclusion is "strongly encouraged" but not required for standards compliance).
When IE sees the XML declaration, this forces it into quirks mode,. In quirks mode, IE runs in some sort of bug-compatible mode with earlier versions of IE. This had the effect of putting IE6 into a mode where it emulated an earlier incarnation where it's box model was badly broken.
In my CSS layout (inspired by an article at A List Apart) this resulted in my left column of navigation links actually displaying on top of the middle, content column.
Problem 2 - Hover Strangeness
After removing all the XML declarations from my pages to work around Problem 1, I decided to play with the visual parts of the CSS a bit. In particular, I decided to add a different background colour for links under the mouse cursor via the hover property for <a> tags.
The pages still layed out perfectly on first load in IE, but the moment the mouse cursor went over one of the links, IE decided to re-layout the page in the same way as the previous problem - i.e. the left hand navigation column suddenly jumped to again be on top of the content column.
See this article at "Position is Everything" for more details of this bug and some nice demos.
After fixing the above, I decided to add some background colours to the block of links in my navigation area. Again this turned out to be a bad idea. IE bahaved particularly weirdly in this case. The page sometimes laid itself out ok on first load, and sometimes didn't. In either case, the background colours in the navigation items weren't there at all. At least they weren't until you either dragged another window over that portion of the IE window in which case the colours appeared where you had obscured the window or resized the IE window (by 1 pixel was enough) at which time the colours would appear. In neither of these cases was the first item background colour displayed though.
I found the description for this problem, and a (thankfully simple) fix over at PIE.
Not entirely :-(. The above all appeared to be fixed, at least in IE6 on Windows 2000, but I have no way of checking other IE versions, so heaven knows what the pages look like in IE5.5 or IE7. Even IE6 still occasionally reverts to the behaviour described in "Problem 1" above, for no discernible reason. A reload usually fixes it but I have no idea what's going on in IE's twisted mind.
There are also still some glitches with small window sizes in IE6, which I may get round to fixing at some point.
I don't know where professional web designers find the strength. How Microsoft with their development resources can continue to release such buggy software (and the reports I see about IE7 beta don't indicate that it is much better) escapes me.
I would have got nowhere in fixing any of these issues if it wasn't for the wealth of sites discussing CSS and HTML/XHTML. A bit of Googling around quickly revealed that a large proportion of the literature out there on CSS in particular is devoted to describing IE bugs and how to work around them. The following were particularly helpful:-
- The W3C define the XHTML and CSS standards. Their site describes these and provides resources such as the online validator.
- A List Apart has many instructive articles on aspects of CSS layout, HTML/XHTML, typography and many other things.
- Position is Everything similarly has many articles, along with a large number of descriptions of IE bugs (and bugs in other browsers, but mainly IE) and how to work around them.
- Quirks Mode has some really interesting and instructional material too.
- The CSS Zen Garden is very interesting as an example of the kind of things that can be achieved with CSS stylesheets alone - very impressive.