REFERENCE: suckerfish drop down menus

I spent the entire weekend losing sleep over the drop down menus for this blog. One can easily create drop downs using the 'select' html tag which produces a standard microsoft drop down widget. However, the actual look of the drop down is not controlled by the web browser, but by the OS, hence it's editable attributes are limited. One can use a java script to alter it's looks and behaviour, but that is just way too much overhead.

A few years back someone wrote a standards compliant drop down menu that doesn't rely on java and is entirely in css and dhtml. It's called the suckerfish drop down because their example page was about, um... suckerfish. These menus are built around html unordered lists. Since then, they've cleaned the code up in a version called 'son of suckerfish' and now have a more functional version called 'grandson of suckerfish' or 'sons of suckerfish' which adds additional functionality such as keyboard support.

Son of suckerfish tutorial: HERE

I came across an example suckerfish drop down written by John Labriola.

John Labriola suckerfish demo: HERE

I cut and pasted his sample code into my blog. It worked!

Here's where it got messy. I went in and mucked around trying get rid of the borders. What a mistake! Everything got broken. If I could get it working in IE, then Firefox didn't work and vice versa. To make a long story short, it wrecked an entire weekend. Finally I stripped everything out and pasted the orginal code back in.

To complicate matters, IE, is not standards compliant and on top of that, it's buggy. I encountered 2 problems with the suckerfish menus on IE. First, the menus don't work at all because of a mouse hover problem specific to IE. The remedy is a javascript patch job and the use of IE specific conditionals so that the script doesn't get in the way of the other browser types such as Firfox, Opera, Safari and to a lesser degree Netscape. These conditional statements were developed by Microsoft specifically for IE and are considered css hacks.

Second, when working, the drop downs get stuck and do not refresh on the mouse out event.

IE7 suckerfish fix: HERE

All in all a weekend in hell.