Skip navigation
Currently Being Moderated

Spry menu problems with Internet explorer

Jul 30, 2007 6:33 AM

Hi everyone

I'm having ongoing problems with my horizontal menus and internet explorer. They work fine in other browsers and with the generous help of others at these forums I've managed to sort out most of the problems. But I've hit a real wall with this one. The menus drop down showing the links OK but you cannot highlight or click on the options that drop down, they just appear as text. Any help would be appretiated. My appologies for posting in other threads also but just hoping for a response.

I am very new to this side of design so simple answers would be very helpful. Thanks

Bob
 
Replies
  • Currently Being Moderated
    Jul 30, 2007 6:49 AM   in reply to Bob Haslett
    Hi Bob,

    please send us a link where you can reproduce your problem to see what's wrong with the menu bar. It is quite hard to guess what is not working without see exactly the wrong behavior. Also which IE version do you use ? IE 6 or IE 7?

    Thanks,
    Diana
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2007 9:56 AM   in reply to Bob Haslett
    Hi Bob,

    There are a couple of problems with the tweaks you did to the menu bar CSS. If you fix those things will work fine.

    - In CSS you must specify your units. In this rule you added:

    ul.MenuBarHorizontal
    {
    ...
    width: 800;
    ...
    }

    You need to make that 800px, or whatever unit it is you want to use.

    - For this rule:

    ul.MenuBarHorizontal li {
    ...
    position: top;
    ...
    }


    "top" is not a valid value for the position property, so I would leave it as the original value of position:relative.

    - Looks like you changed the z-index value of this rule to 1010:

    ul.MenuBarHorizontal ul
    {
    ..
    z-index: 1010;.
    ...
    }

    If you change it back to its original value of 1020, the menus will appear. What's happening now, is that because you changed the z-index, they are appearing underneath the iframe that is used to force menus to appear above native windows that may be in the page.

    Out of curiosity, did you change the z-index because the menus were appearing underneath content that followed? If so, it may be because you added a position:relative to your menubar rule. There's a bug in IE where positioning an element causes it to create a new z-index context, which is incorrect. If you can get away with not positioning your menubar, you can avoid that bug.

    --== Kin ==--
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2007 12:51 PM   in reply to Bob Haslett
    Bob,
    It looks fine in my IE7

    Neil
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2007 1:21 PM   in reply to Bob Haslett
    Hi Bob,

    Hmmm, your site now looks fine to me in IE6 and FF. You never really mentioned what browser and OS you are testing on.

    --== Kin ==--
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2007 1:27 PM   in reply to Bob Haslett
    I need help with a horizontal menu in IE too. Works fine in FF & Safari. Sub menu items are screwed up in IE... see test page http://www.fontanafreelance.com/SnyderCorp/
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2007 1:31 PM   in reply to Bob Haslett
    Hi MissJada,

    I suspect that your problems stem from the fact that you've added content, specifically spans around the menu item <a> tags. So if you look at your markup as it is right now, you'll see lots of list items that look like this:

    <li><span class="mainTxt"><a href="AboutUs.html" title="About Snyder Corp." class="MenuBarItemSubmenu">About Us</a> </span>

    This breaks the menubar structure. If you want to add extra content, put it *inside* the <a> tag like this:

    <li><a href="AboutUs.html" title="About Snyder Corp." class="MenuBarItemSubmenu"><span class="mainTxt">About Us </span></a>

    --== Kin ==--
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 10, 2007 7:37 PM   in reply to kinblas
    I'm having the same problem with IE. would you be so kind as to check out what I need to do to fix it?
    http://www.carvertech.info
    thank you for your help.
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 29, 2007 12:35 PM   in reply to carvm
    I am also having a problem with Internet Explorer, the sub menu. Can anyone help me? http://arrivetransportation.com/temp/index.html tia!
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 29, 2007 6:26 PM   in reply to Marguerite07
    I have 2 similar problems to the prior posts:
    1) I run IE7 and FF and the positioning of my submenus are skewed in IE only.
    2) I am not sure, but I believe I have a problem with my iframe appearing in my IE7 browser behind all of my submenus. Well, I know I have a problem with something, but whether or not it's the iframe I don't know. What I do know is that the box shows up like a border around my submenus and I can't get rid of it. I suspect that it may be caused by the fact that my menu buttons are imported gif's in the shape of rounded rectangles which allows for the corners to be visible. I actually just thought about it and my gif's are set to have a white index transparency, but maybe If I export the gifs without transparency, then that issue will be resolved. Well I will try that part and see, but any and all suggestions are welcome. Oh and I just remembered, that problem with the border around my submenus also has another problem with the word "false" inside of that border behind my submenus. This problem again is only in my IE browser, and it is hard to see it, but I have no idea why that is there or what it's from. I ran a search in my SpryMenuHorizontal.css page and in my html page for the word 'false' but nothing turned up. The only document related to this issue that contains the word 'false' is the 'SpryMenuBar.js' document.

    CSS Layout file

    HTML Demo link

    Thank you,
    Danny
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 29, 2007 9:13 PM   in reply to Bob Haslett
    So I browse to
    http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js
    in an attempt to fix the problem I'm having with the positioning of sub
    menus (they appear to the right of each menu button and expand to above and below my menubar). I can see the .js file. Where do I put it?
    Product: en_US
    From handle :
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 29, 2007 11:17 PM   in reply to NJMark
    NJMark,
    I think you want to put that javascript file in the "SpryAssets" folder. You can always just create a Spry Menu Bar and find where the default location is and simply replace that 1.4 file with the new 1.5 version that you are referring to.

    Danny
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 1, 2007 6:21 AM   in reply to theMooreDotNet
    I'm new to this forum, a novice (and found most tutorials on DW very good), and am having similar problems with the Spry menu as others encounter. I tried tech support - oh, we can't support something you have edited (such as a layout supplied with DW CS3).
    I use XPpro, IE 6.0, Firefox.
    My page is at http://63.134.241.209/BeaCon_DW/default5.html

    This is a prototype home page with a navigation menu and several submenus.
    It displays normally in Firefox both locally & on the internetm except for the gray outline around the area - I cannot figure out how to eliminate that.

    It does not display in IE normally.
    Locally in IE, if I do not allow a "security" file to open, the menu displays, arrows to submenus display, but no submenu displays.

    Locally in IE if I allow a "security" file to open, and on the internet - the area for the menu is white.

    I have changed my IE security settings to enable most everything possible, yet I still have the pop up message about needing to allow a file - then all is blank.

    Elsa
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 2, 2007 6:06 AM   in reply to Bob Haslett
    have same problem with drop down menu in cs3 dreamweaver as you had
    i am not to technically minded,
    how did you fix your site please
    barland co uk

    Graham Cook
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 2, 2007 6:21 AM   in reply to Bob Haslett
    The problem of submenu display in a browser seems to be a browser issue. I have upgraded IE6 to IE7 - now the menus and the submenus display in the proper location - BUT - the submenu is beneath and obscured by a white box with narrow top and left borders and the word "false" in the top left space of the white box.

    Not being a techie, I can't explain this - but there must be some code hidden somewhere or the browser is inserting this.

    Still haven't figured out how to eliminate the gray outline visible in firefox.

    As it is a holiday weekend here (US) there may not be much exchange of ideas until next week.

    Elsa
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2007 8:10 PM   in reply to Bob Haslett
    Re: It does not display in IE normally.
    Locally in IE, if I do not allow a "security" file to open, the menu displays, arrows to submenus display, but no submenu displays.

    I am having this happen as well. When I allow Active X, my menu bar looks just fine, however, I do not want to publish a website where the viewer has to allow active X in order to use my subitems. Any fixes for this???


     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2007 11:16 PM   in reply to zrehtaeh
    Try to put this code at the start of the css

    /*
    hack for internet explorer cache
    */
    html {
    filter: expression(document.execCommand("BackgroundImageCache", false, true));
    }
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2007 2:00 AM   in reply to Bob Haslett
    Give it up. Spry menus just will not work in IE.
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2007 2:19 AM   in reply to zrehtaeh
    Hi zrehtaeh,

    that alert that pops-up in IE is just a security warning that alert you that you load js files directly from local machine.
    To avoid this you just have to define a web server for your page and do not load it from local. So if you'll have the menu publish on a website, this problem will not be present.

    Another way to avoid this if you still want to use files form local and you are also an DW user, you can Insert Mark of Web from Commands menu and the ActiveX alert should disappear.

    Diana
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 5, 2007 4:57 AM   in reply to NJMark
    Danny and NJ Mark,
    I experimented with the vertical iframe and found that if I set the position to fixed (the default is absolute), that the submenu then is where it belongs (to the right of the menu item). Now the crazy white box no longer appears over the submenu, but for 3 of 7 menu items with submenus, the crazy white box now displays to the left outside of the menu - and the word false still appears at the top left of the white box. This is in IE 7. Firefox is unaffected by these happenings.

    On subsequent web pages, I continue to have the same issue (using IE) whenever I create a submenu.

    People in my group who are reviewing this default5 page, and who have < IE7 are reporting a variety of crazy happenings, so as another poster commented – Spry just doesn’t seem to work with IE. That's too bad because it could be a great help.

    http://63.134.241.209/BeaCon_DW/default5.html
    Elsa
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 5, 2007 5:09 AM   in reply to Bob Haslett
    I made the mysterious white boxed disappear permanently by removing the background default gif in any of the properties for any of the CSS styles rules for the Spry Menu Bar Horizontal.css. Specifically, you must eliminate the gif and substitue a color in ul.MenuBarHorizontal ul a.MenuBarItemSubmenu and in ul.MenuBarHorizontal a.MenuBarItemSubmenuHover and
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover and ul.MenuBarHorizontal ul.a.MenuBarItem SubmenuHover,
    This is a really simple fix to get rid of the white box. You find these files by selecting your spry menu on your screen, then opening All in CSS styles, going down to properties under the styles for each of the above uls. Email me if this is too complicated.
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 5, 2007 1:28 PM   in reply to zrehtaeh
    HI Zrehtaeh,
    I tried what you suggested - to remove the .gif image - from every spry asset line.
    Still, no go - three menu items still display the white box in the top to left of the menu when a mouse is placed over those items (library, OHR, organization). Also check browser with the code as it now stands (just updated) yields an error of: <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

    The check browser test for the spry bar css code indicates an error - that the vertical frame "fixed" is not supported in IE. Yet if I revert to the default of "absolute", then the white box arrives back on top of the submenu.

    Elsa
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 5, 2007 1:43 PM   in reply to Beardie
    I had the same problem with the iframe being visible as well and tried setting it to "hidden" and it worked fine. Under the ul.MenuBarHorizontal iframe > Positioning > Visibility section, just change it to hidden and it may take care of the problem. Bear in mind that I am merely a novice at this stuff but it worked for me so far.

    However, I am still having issues with my positioning of my submenus in IE7. I managed to position the actual submenu where I want but it seems that instead of expanding one above the other, they seems to expand from left to right. To help understand, I want my submenu to expand into a single column with like 6 "rows" but as it currently stands, it expands to like 5 columns and 2 rows, but the positioning overall is fine. Any thoughts?

    http://www.themoore.net/Semicorp-demo2/index2.html

    The link above is just to illustrate my positioning problem....It still contains the iframe being visible, I just haven't uploaded my newest css file yet.

    Danny
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2007 12:26 AM   in reply to theMooreDotNet
    Ok well I just wanted to post that I got all of my stuff working the way I want it and thought that I should upload my files just in case someone could benefit from them. The only thing that I can recommend, that worked for me, is to create separate saved files as you progress towards finishing your nav bar. Sometimes you might make a change that wont effect the nav bar until a few more changes are made so by then you wont even know what went wrong. In this case, I just made several separate saved files of my progress so I can restore a good copy if I muck things up too much. Aside from that, I suggest you make one or two changes at a time, then preview them in several browsers each time so you can undo the changes if they have adverse effects.

    Final nav bar:
    http://www.themoore.net/Semicorp-demo3/MenuBarTest/menubar.html

    CSS/javascript/dependent files:
    Texthttp://themoore.net/Semicorp-demo3/MenuBarTest/SpryAssets/

    Good Luck,
    Danny
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2007 5:43 AM   in reply to theMooreDotNet
    Thank you Danny.
    The hint for how to get rid of the white box (wherever it may be and whatever word may be in it) - to set the vertical iframe to hidden - WORKS.

    The 2 columns you are getting for the menu probably have to do with the width setting in the MenuBarHorizontal ul and *li. I had that problem with my vertical menu when I reset the default 8 em to auto - at that point 2 columns appeared instead of one.

    So, maybe Spry may yet work with IE, once all the essential tweaks are understood.

    I had wanted each menu item to display the same background color when the mouse is hovering over it - but when the mouse is over a menu item with a submen, that item's color does not change. I have done every imaginable iteration on colors and cannot find the solution.


    Elsa
     
    |
    Mark as:
  • Currently Being Moderated
    Oct 3, 2007 9:23 AM   in reply to Beardie
    i must say, i have been searching and working on getting that box removed for hours, i mean hours!!!! thank you so much for posting it. i set it to hidden and NO MORE BOX! my boss will be very happy that i can move forward. This works, THANKS BEARDIE!

    ul.MenuBarVertical iframe
    {
    position: absolute;
    z-index: 1010;
    visibility: hidden;
    }
     
    |
    Mark as:
  • Currently Being Moderated
    May 29, 2008 10:55 AM   in reply to kinblas
    kinblas--

    I was wondering if you remember communicating with this guy about spry menus in IE? It sounded like you might be able to help on my problem as well... I have a page with a Horizontal spry menu that works great in every other browser but IE 6/7 - what happens is the menus work but it bumps down the images that are supposed to appear underneath it - see it here: http://www.junipersdesigns.com/GT_Temp/GT_Main3.html - if you roll over "menus" it's supposed to drop down OVER the lemonade image - it was happening in the other browsers until i fixed the z-index - that may be part of the solution but i don't know where that code would go to directly apply to IE....

    i hope you can help - i'm a mess right now!

    thanks in advance!
    juniper
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2009 12:35 PM   in reply to Bob Haslett
    I am having trouble with spry menu appearance in IE. When I click on drop down menus (only when I click the boxes which have drop down menus), I get little blank boxes little bit down fron the menu that states "false". Please, advise how can I get rid of those boxes?
    url to the site.
    http://www.newsshower.com/
    Thanks in advanced, Lela :O)
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2009 12:36 PM   in reply to Bob Haslett
    I am having trouble with spry menu appearance in IE. When I click on drop down menus (only when I click the boxes which have drop down menus), I get little blank boxes little bit down fron the menu that states "false". Please, advise how can I get rid of those boxes?
    url to the site.
    http://www.newsshower.com/
    Thanks in advanced, Lela :O)
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points