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.
This entry was posted by Martin and filed under Activity log.