Fixed menu bug
Posted by mholmes on 19 Feb 2007 in Activity log
This menu bug turned out to be another IE-related thing. This is how it works:
- Pure CSS menus depend on the :hover pseudo-attribute.
- IE6 does not support this.
- As a compromise, I had added an onclick event to the Menu header to make the menu show on IE6.
- Whenever you use JavaScript to set a CSS property (display: block, in this case), most browsers cache this property and then retain it when you use the back button to return to the page, so the menu is displayed.
- Switching to pure CSS (removing the onclick attribute) solved the bug on all browsers, but made the menu inaccessible on IE6.
- I fixed this by using browser detection (boo!) to trap for IE6 and assign the onclick handler to the menu just for IE6.
- I also added a :hover for the document body to hide the menu automatically when you move the mouse anywhere outside the menu.
Tested and working on Firefox, IE6, IE7, Opera and Safari.