When Firefox shows SELECTED values that are different from those shown in the Source

Another quirk that cost me hours:

Firefox can be "two-faced" in the way it handles SELECT (or Combo) boxes if you have errors on your page.

Try View Selection Source (or use Web Developers' View Source or Inspect Element) and the code looks perfect. And the boxes lay out nicely and show the right list of options. BUT look at which items are ACTUALLY selected, and they aren't the same ones that show with selected="selected" in the source.

Fix the errors elsewhere on the page and all works as you would expect!

Sortable.create - Sortable is Not Defined

The DragDrop capability offered by Scriptaculous is tremendous, but is not good on error messages. What does one do with the error "Sortable is Not Defined" on a "Sortable.create" statement?

The answer, from my experience, is to look hard at the coding of the page. When I have hit this problem it has normally (perhaps always) been because "echo" statements for debugging had resulted in a page source which showed the "body" tag appearing far sooner than I had intended, and that seemed to be what was spooking the Sortable.

vertical-align - ok on td but not table (or tr or tbody)

The vertical-align css property appears to be valid only at a td level. There is a hint of this (but not explicit statment) in the w3.org documentation

Styling select options using span or strong?

Searching around, it looks as if this cannot be done in HTML with or without CSS.

To quote :

option tags do not allow other tags within them (it's not valid html).
firefox, for example, simply removes them from the DOM when it renders it. 

It's easy to style the whole option tag. What you don't seem to be able to do is to style just part of an option.

The application was a list of users within our village. Name formats will vary, and it won't always be obvious which is the right one to sort on. Eg "Newtown Tennis Club" might be known just as the "Tennis Club". The solution was to specify a separate sort name for each user, and to sort the options in that order. I wanted to highlight the sorted term in bold: cannot do. Capitalising is the best I have been able to do.


Isn't HTML a pain?

Making titles look right

A mixed-case title presents problems with vertical alignment: if none of the letters have a "descender" -ie the title does not include any of g j p q y - then you may want to sit the title lower on the page than if it does.

Here is a simple php function to check whether a string includes a descender:
function hasDescender($thisString){
    return (preg_match("/[gjpqy]/", $thisString));
}

Anchor link fires despite "return false"

I wasted a long time wondering why I couldn't stop the link for an anchor tag firing after the onlick Javacsript had run. Was it because I was setting the onclick function using window.onload? 

No - it was because I had errors in the function that I was calling. And because of that, it wasn't getting the the return false at the end (which is what stops the src link being followed by browsers with Javascript working).

Scriptaculous Sortables - this.observer is not a function

Hit errors with the error message "this.observer is not a function" when releasing a dragged object using the excellent Sortables function from scriptaculous.
Much grief before I eventually found the problem: where all the other options settings require the value to be in quotes, the "onUpdate" parameter requires the function name NOT to be quoted
.

So - use onUpdate:showList not onUpdate:'showList'