Dropdown Menu troubles in IE9/Windows 7?

[charliek]

1) Script Title: Top Dropdown Menu (mattblack menu)

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

3) Describe problem: We installed this menu bar a few years ago, and it worked fine in Firefox, IE 8 and Chrome. However, you can't click the dropdown links when viewing the menu bar in Internet Explorer 9 with Windows 7. I read that there was a JavaScript change in IE 9. Is there a workaround to get the top dropdown menu to work consistently in IE9? (I don't know JavaScript).

[jscheuer1]

Works fine here in IE 9 - the demo page that you linked to that is. Is that the page you're having problems with? If not and you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.

[charliek]

Works fine here in IE 9 - the demo page that you linked to that is. Is that the page you're having problems with? If not and you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.

Thank you so much for your reply. Here is a webpage that has the mattblack menu that isn't working consistently when you try to click on the dropdown menu options: http://www.autismweb.com/floortime.htm Some dropdown links work and let you click through to other pages, while other dropdown links disappear when you try to click on them.

[jscheuer1]

I think I see what you mean. On some of the pages, unless you move the mouse really quickly from the trigger to the dropdown, it disappears before you have a chance to click on any of the items.

If that's what you're talking about it's because there's a 1px gap between where the bottom of the trigger ends and the top of the dropdown begins. I'm not sure why this is only happening on some pages. It seems to be happening on all pages except the home page. The home page has:

<link href="homestyles.css" rel="stylesheet" type="text/css">

The other pages:

<link rel="stylesheet" type="text/css" href="twoColstyles.css">

This probably is the cause, but I cannot be sure.

What I would try first is add this to the twoColstyles.css file:

.ddsubmenustyle, .ddsubmenustyle ul {
	margin-top: -1px !important;
}

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

That should take care of it for IE 9. Even if it doesn't, leave it in place so I can check to see why. It did take care of it here, using IE 9 Developer Tools. However, it might mess up how it looks in others. If so, let me know and we can make the change specific to IE 9.

[charliek]

Thank you -- that CSS change seems to have fixed the problem. I'm not sure why the CSS for the content pages altered the functioning of the dropdown menu while the CSS for the home page didn't. The only difference was a two-column vs. a three-column floated layout. Thank you very much for pointing out the problem was CSS, not JavaScript, and also the fix.

[jscheuer1]

You're welcome. It's probably not the number of columns, though it might be. Floating vs. not floating more likely might be a factor, that is if I understood you correctly that one stylesheet floats its columns or something and the other doesn't. Floats generally take up less layout space than equivalent non-floated content.

But, as I said, I cannot even be certain it's the difference in stylesheets. Just that I noticed that as different and as a possible cause. There doesn't appear to be any difference in the layout space of the menu or dropdowns, so floats seems like a good candidate. The differences their inclusion/omission engender often doesn't show up in tools which analyze layout.

[ritab68]

Hello All,

My name is Rita. Much like charliek, I'm having an issue with menu placement between IE and all others.

When I look at the following site in Firefox (where I spend most of my time) it looks fine -- when I view in IE, the menu is at the bottom and the drop down menu items are hidden.

http://stillpointzenbuddhisttemple.org/

The CSS for the menu bar looks like the following:
#navsite /* Menu Bar */
{
position: absolute;
margin-left: 350.5px; /* menu bar position horizontally */
margin-top: 0em; /* menu bar position vertically */
font-family: arial, Helvetica, sans-serif;
font-size: 80%;
Z-INDEX: 1;

}

#navsite ul { /* all lists: define the padding/margins for the box that is created by ul */
float: left;
list-style: none;
line-height: 1;
font-size: small;

}


Any suggestions on how to make sure that IE behaves as I want it to (like Firefox)?

Have a great night and thanks!
rita.