Smooth Navigational Menu (v1.5) bounces page down in IE 9 (clean CSS and JS)

[GrahamO]

1) Script Title:
Smooth Navigational Menu (v1.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem:

My menu is having problems specific to IE browser 9.0 (no problem in Chrome/Firefox). When you scroll over the navigation dropdowns the whole page drops down (shifts vertically) by the same length of the dropdown menu.

Unlike a previous poster reverting to the clean CSS and JS does not fix this.

I have posted it with unmodified files:

janakilennie.com/test/Index.html

apart from commenting out the arrows but I tried it with them and it made no difference.

Thanks for any advice / help.

Graham

[jscheuer1]

Even though you think you're not using it, you still need the ddsmoothmenu.css file. The ddsmoothmenu-v.css file alone is not enough for IE.

By the way, IE 9 could be alright with just the one css file if you edited the script to accurately detect IE 9's support for the css3 box-shadow property. But IE 8 and less still need the ddsmoothmenu.css file. To update the script for IE 9, using a text only editor like NotePad, edit ddsmoothmenu.js file here as shown:

transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
shadow: {enable:true, offsetx:5, offsety:5}, //enable shadow?
showhidedelay: {showdelay: 100, hidedelay: 200}, //set delay in milliseconds before sub menus appear and disappear, respectively

///////Stop configuring beyond here///////////////////////////

detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1, //detect WebKit browsers (Safari, Chrome etc)
detectie6: document.all && !window.XMLHttpRequest,
css3support: typeof document.documentElement.style.boxShadow === 'string' || (!document.all && document.querySelector), //detect browsers that support CSS3 box shadows (ie9+ or FF3.5+, Safari3+, Chrome etc)

getajaxmenu:function($, sett . . .

IE 8 is still and will continue to be in fairly wide use though because Win XP users cannot update to IE 9. So regardless of whether or not you make the above edit, add the ddsoothmenu.css file to your page.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[GrahamO]

John,
Thank you SO much for the quick and accurate response. It works fine now. I would never have found that one. Browser compatibility is not my strong suit......

Graham