Results 1 to 7 of 7

Thread: Dropdown Menu troubles in IE9/Windows 7?

  1. #1
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dropdown Menu troubles in IE9/Windows 7?

    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).

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.
    Last edited by charliek; 01-16-2012 at 05:00 PM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <link href="homestyles.css" rel="stylesheet" type="text/css">
    The other pages:

    Code:
    <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:

    Code:
    .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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank you

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Apr 2012
    Location
    riverview
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question More Dropdown Menu Woes...

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •