fl0blog

Been working on a drop down menu for work. The suckerfish article and its siblings at ALA (along with the terrific book Designing with web standards by JZ — which I still recommend to everyone interested) convinced me to go the standards compliant / CSS way.

The first hurdle to take was to get in a standards-compliant mode, which is absolutely necessary for any decent CSS support. The logical path would be to do everything in XHTML Strict, which brutally enforces a rigid structure and refuses presentational markup. The problem there were the tools: ASP.NET apparently has a 1990-era markup engine, which cannot produce XHTML and uglifies most of the HTML4 code it encounters. Luckily, with a good HTML4 Strict doctype, it produces reasonable — not beautiful, nor 100% valid — markup. Good enough for the CSS code to work. ASP.NET 2.0 is announced to fix this, and considering this is 2005, that’s nothing too early.

Now, there are quite a lot ‘CSS menu’ systems available on the web, tested in different browsers, but of course none of them has a layout model that is compatible with the layout needs that were pre-determined for the project you’re building. So you have to adapt them, which leads you right into the arms of all the CSS bugs in all of the world’s browsers. When you start to change parameters and add CSS code blocks to someone else’s system, it is inevitable that you break the original authors’ carefully crafted CSS-bug stealthiness.

This was a lesson hard-learned, because after starting my own test based on the Suckerfish article, and then moving on to use the ‘Simple Website Menu’ by brothercake, I was still nowhere (i.e. an almost complete menu but only in one browser). And this was after having plowed trough most of Eric Meyer’s CSS: The Definitive guide (which I can also recommend to anyone heavily interested in CSS).

In the end, the solution was ’simplicity’. The easily adaptable son of suckerfish from HtmlDog.com proved to be flexible enough. It comes with a small JavaScript code snippet, that teaches Internet Explorer how proper :hover states are done. Good enough for me, considering that ‘only fix what is broken’ is not that bad of an attitude, and almost every CSS menu in existence does the same.

I now got to a state where FireFox, IE6 and Opera7 ‘get it’. This indicates that the path to compatibility with all the mozillan browsers is wide open, along with all the other standards-compliant masterpieces out there (should test with Konqueror). Probably I’ll need to spend some time un-breaking the box model of IE5, but I’m hoping that would do the trick. As for some older or lighter browsers: don’t worry, the styles will eventually be hidden so that you get to enjoy the beautifully accessible structurally degraded HTML tags. Or something.

This entry was posted on Tuesday, March 22nd, 2005 at 16:53 and is filed under English, Usability, Web stuff. You can subscribe via RSS 2.0 feed to this post's comments. You can comment below, or link to this permanent URL from your own site. Your comments will appear immediately, but I reserve the right to delete innapropriate comments.