The Keyboardfish

Keyboardfish (Remora clavicensis)

This page was developed as testpage for the site of a Dutch keyboard teacher, and first publicated 3^rd of oct. 2005 in the Dutch forum www.designhulp.nl.
The application and final result you can see on his real site.
So the text in the buttons, if not English, is ... Dutch.
This testpage is also in a Dutch version.

See 'mini-tutorial' in the source code.
Starting point was the working Suckerfish-model (with the Suckerfish-javascript for Internet Explorer).
The CSS is adapted step by step: not changing to much, making the wanted (or unwanted) effect of what was changed easy to see.
Testing each step in Firefox (a real -almost- standards compliant browser) and Internet Explorer (browserlike thing with strange properties), to see if IE-hacks are needed.
In this testpage the css and js are included in the html-document itself, as fastest way for changing & testing. If everything is completed and as desired, they can become separated (linked) files.
I discovered that the DOCtype has influence for the prestations of Internet Explorer. With:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

IE doesn't show the changing colors of the button-background when hovering. But with:

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

IE performs good (and the rest still working!).
Some limitations of this testpage.
If the visitor uses for IE a fontsize which is bigger as normal, the submenu-items don't follow the fontsize of the menu-items (to big). Also then the lining up of items and sub-items is not so good.
This testpage has a concrete width for the menu and submenu buttons: it is not liquid! (adapting as fontsize, window-format and resolution change).

translated: 4th of januari 2006