Skip navigation

Spry Framework for Ajax (READ ONLY)

Bob Haslett

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

2520 Views 31 Replies Latest reply: Lela1234, Feb 19, 2009 12:36 PM

Replies

Currently Being Moderated

1. Diana Ispas,

Jul 30, 2007 6:49 AM in reply to Bob Haslett

Report

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

2. Bob Haslett,

Jul 30, 2007 8:04 AM in reply to Diana Ispas

Report

Yes that would help, sorry its
http://www.yorkbrew.demon.co.uk/

Thanks

|
Mark as:
Currently Being Moderated

3. kinblas,

Jul 30, 2007 9:56 AM in reply to Bob Haslett

Report

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

4. Bob Haslett,

Jul 30, 2007 11:27 AM in reply to kinblas

Report

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

|
Mark as:
Currently Being Moderated

5. Neil Eisenberg,

Jul 30, 2007 12:51 PM in reply to Bob Haslett

Report

Bob,
It looks fine in my IE7

Neil

|
Mark as:
Currently Being Moderated

6. kinblas,

Jul 30, 2007 1:21 PM in reply to Bob Haslett

Report

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

7. MissJada,

Jul 30, 2007 1:27 PM in reply to Bob Haslett

Report

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

8. kinblas,

Jul 30, 2007 1:31 PM in reply to Bob Haslett

Report

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

9. Bob Haslett,

Jul 31, 2007 1:08 AM in reply to kinblas

Report

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

|
Mark as:
Currently Being Moderated

10. carvm,

Aug 10, 2007 7:37 PM in reply to kinblas

Report

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

11. Marguerite07,

Aug 29, 2007 12:35 PM in reply to carvm

Report

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

12. theMooreDotNet,

Aug 29, 2007 6:26 PM in reply to Marguerite07

Report

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

13. NJMark,

Aug 29, 2007 9:13 PM in reply to Bob Haslett

Report

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

14. theMooreDotNet,

Aug 29, 2007 11:17 PM in reply to NJMark

Report

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

15. Beardie,

Sep 1, 2007 6:21 AM in reply to theMooreDotNet

Report

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

16. cokiecook,

Sep 2, 2007 6:06 AM in reply to Bob Haslett

Report

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

17. Beardie,

Sep 2, 2007 6:21 AM in reply to Bob Haslett

Report

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

18. zrehtaeh,

Sep 3, 2007 8:10 PM in reply to Bob Haslett

Report

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

19. soorjorowa,

Sep 3, 2007 11:16 PM in reply to zrehtaeh

Report

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

20. VMount,

Sep 4, 2007 2:00 AM in reply to Bob Haslett

Report

Give it up. Spry menus just will not work in IE.

|
Mark as:
Currently Being Moderated

21. Diana Ispas,

Sep 4, 2007 2:19 AM in reply to zrehtaeh

Report

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

22. Beardie,

Sep 5, 2007 4:57 AM in reply to NJMark

Report

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

23. zrehtaeh,

Sep 5, 2007 5:09 AM in reply to Bob Haslett

Report

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

24. Beardie,

Sep 5, 2007 1:28 PM in reply to zrehtaeh

Report

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

25. theMooreDotNet,

Sep 5, 2007 1:43 PM in reply to Beardie

Report

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

26. theMooreDotNet,

Sep 6, 2007 12:26 AM in reply to theMooreDotNet

Report

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

27. Beardie,

Sep 6, 2007 5:43 AM in reply to theMooreDotNet

Report

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

28. teedorce,

Oct 3, 2007 9:23 AM in reply to Beardie

Report

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

29. juniper412,

May 29, 2008 10:55 AM in reply to kinblas

Report

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

30. Lela1234,

Feb 19, 2009 12:35 PM in reply to Bob Haslett

Report

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

31. Lela1234,

Feb 19, 2009 12:36 PM in reply to Bob Haslett

Report

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:

Forum guidelines

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