Does anyone know how to fix (or what causes) the page up/down bug in FF when contentEditable is present on a div?
See an example Navigate to contentEditable article with FireFox (3 or 3.5) and use the Page Up/down arrows on your keyboard. You should be unable to scroll to the bottom of the page, and it should appear to flicker and jump back up.
The only way i can see is to use an iframe... like TinyMCE and CKEditor WYSIWYG editors, they both use iframes. However content loaded in an iframe does not posses the styling rules of its parent. Therefor has to be adapted ... the reason to herald the contentEditable div in the first place.
Since no one answered i'm going to sulk and play with matches
I think it's a bug of Firefox even exists in the newest version 3.6.8.
For the sample page: http://perplexed.co.uk/993_contenteditable_cross_browser_wysiwyg.htm
There are 2 ways to make the page up down buttons work:
1. Change all the three DOM node's contenteditable="true" to false.
2. Find the id="main-content" node, and delete the style "float: left;".
Seems the problem for Firefox is contenteditable="true" conflict with the style float:left;.