31 Replies Latest reply: Feb 19, 2009 12:36 PM by Lela1234 RSS

    Spry menu problems with Internet explorer

    Bob Haslett Community Member
      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
        • 1. Re: Spry menu problems with Internet explorer
          Diana Ispas Community Member
          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
          • 2. Re: Spry menu problems with Internet explorer
            Bob Haslett Community Member
            Yes that would help, sorry its
            http://www.yorkbrew.demon.co.uk/

            Thanks
            • 3. Spry menu problems with Internet explorer
              kinblas Community Member
              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 ==--
              • 4. Re: Spry menu problems with Internet explorer
                Bob Haslett Community Member
                Hi Kin

                Thanks for taking time to look at this for me, but I'm afraid that this just makes things worse. All I get now are large blank white squares appearing below the menu bars with no indication of content. Any ideas?

                Bob
                • 5. Re: Spry menu problems with Internet explorer
                  Neil Eisenberg Community Member
                  Bob,
                  It looks fine in my IE7

                  Neil
                  • 6. Re: Spry menu problems with Internet explorer
                    kinblas Community Member
                    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 ==--
                    • 7. Re: Spry menu problems with Internet explorer
                      MissJada
                      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/
                      • 8. Re: Spry menu problems with Internet explorer
                        kinblas Community Member
                        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 ==--
                        • 9. Re: Spry menu problems with Internet explorer
                          Bob Haslett Community Member
                          Hi Kin

                          My appologies, I've checked the site this morning and it is working fine. It seems that changes seem to take a cople of hours to work through the network at wor. Very strange apparently some of my collegues have experienced this in the past. Noe the less thank you very much for your time and help, it appreciated.

                          Bob
                          • 10. Re: Spry menu problems with Internet explorer
                            carvm
                            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.
                            • 11. Re: Spry menu problems with Internet explorer
                              Marguerite07
                              I am also having a problem with Internet Explorer, the sub menu. Can anyone help me? http://arrivetransportation.com/temp/index.html tia!
                              • 12. Re: Spry menu problems with Internet explorer
                                theMooreDotNet
                                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
                                • 13. Re: Spry menu problems with Internet explorer
                                  NJMark
                                  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 :
                                  • 14. Re: Spry menu problems with Internet explorer
                                    theMooreDotNet Community Member
                                    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
                                    • 15. Re: Spry menu problems with Internet explorer
                                      Beardie
                                      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
                                      • 16. Re: Spry menu problems with Internet explorer
                                        cokiecook
                                        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
                                        • 17. Re: Spry menu problems with Internet explorer
                                          Beardie Community Member
                                          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
                                          • 18. Re: Spry menu problems with Internet explorer
                                            zrehtaeh
                                            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???


                                            • 19. Re: Spry menu problems with Internet explorer
                                              soorjorowa Community Member
                                              Try to put this code at the start of the css

                                              /*
                                              hack for internet explorer cache
                                              */
                                              html {
                                              filter: expression(document.execCommand("BackgroundImageCache", false, true));
                                              }
                                              • 20. Re: Spry menu problems with Internet explorer
                                                VMount Community Member
                                                Give it up. Spry menus just will not work in IE.
                                                • 21. Re: Spry menu problems with Internet explorer
                                                  Diana Ispas Community Member
                                                  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
                                                  • 22. Re: Spry menu problems with Internet explorer
                                                    Beardie Community Member
                                                    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
                                                    • 23. Re: Spry menu problems with Internet explorer
                                                      zrehtaeh Community Member
                                                      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.
                                                      • 24. Re: Spry menu problems with Internet explorer
                                                        Beardie Community Member
                                                        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
                                                        • 25. Re: Spry menu problems with Internet explorer
                                                          theMooreDotNet Community Member
                                                          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
                                                          • 26. Re: Spry menu problems with Internet explorer
                                                            theMooreDotNet Community Member
                                                            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
                                                            • 27. Re: Spry menu problems with Internet explorer
                                                              Beardie Community Member
                                                              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
                                                              • 28. Re: Spry menu problems with Internet explorer
                                                                teedorce
                                                                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;
                                                                }
                                                                • 29. Re: Spry menu problems with Internet explorer
                                                                  juniper412
                                                                  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
                                                                  • 30. Re: Spry menu problems with Internet explorer
                                                                    Lela1234
                                                                    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)
                                                                    • 31. Re: Spry menu problems with Internet explorer
                                                                      Lela1234 Community Member
                                                                      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)