Internet Explorer and CSS Menus

[Ian]

Hi,

I have implemented a CSS menu using version 2.0

Its a horizontal menu with dropdowns on certain items. In Firefox this all works perfectly, but in IE the dropdowns always dissapear before you get chance to move the mouse over the items.

Is this a bug?

Thanks
Ian

[webmaster359615]

I experience a similar occurrence. It is when the IE Zoom Level is set to a level higher that 100%. Hopefully this can be fixed.

[Ian]

Hi,

Thanks for taking the time to reply.

I have tried the different zoom levels and unfortunately its doing it no matter what the zoom is set to. As soon as you you move the mouse from the main area of the menu to access the area that has dropped down it the dropdown area just dissapears.

Thanks
Ian

[Ray Borduin]

Do you have a url of a page experiencing the problem? I'll take a look and see if I can spot what causes it.

[Ian]

Hi Ray,

Thanks for the reply.

Unfortunately the menu is in a protected area for the client.

What code would you need to see and I can paste it on the forum or email it to you?

Basically I have put the CSS Menu with a relative DIV TAG that sits across the top of the page (basically to house the menu).

All works great in Firefox, but in IE the menu dropdown just dissapears when you move off the top level item.

Best Regards,
Ian

[Ray Borduin]

Can you put a page with just the menu onto a public domain or area so that it can be browsed. I assume there is no content in the menu itself that is sensitive. If so you can even update it and only leave a couple of dummy links to demonstrate the problem.

[Ian]

Hi Ray,

Have to say I was impressed at how easy it was to recreate the menu on a new page as I had saved it as a preset!

Here it is:

http://www.newcastle-equestrian.co.uk/webassist.asp

The links all go to SA protected pages anyway, and some of the links may be incorrect as they are all relative and the page is out of the admin folder.

Thanks for your help as always.

Cheers
Ian

[Ray Borduin]

IE7 requires the height attribute to be set in the css to render properly. CSS Menu writer should add it, so perhaps you removed it:

ul#cssmw ul.level-1 > li > a {
height: 16px;

[Ian]

Thanks Ray,

No I hadn't edited the CSS created by CSSMW so maybe its a bug.

However, Yes, that sorts out that problem but causes another.

Now the width of auto appears to resize each individual drop down item to its automatic width, rather than have the resize to the largest item. It looks a mess.

For now I've set a fixed width which is far from ideal but it does appear that there is a fundamental issue with this and IE. I appreciate the IE is the gutter as far as compliant browsers go but we have to make sure sites work with it as the most popular browser!

Thanks
Ian

[Ray Borduin]

Luckily it does work properly with ie8, but since people are still using ie6 I won't hold my breath trying to wait for people to upgrade.

Unfortunately you may have to set a width to get it working properly in IE... or get it working in general if you have another level of menus.

[webmaster359615]

I also do not see the height property in the CSS.

One thing I noticed about Ian's example page linked to above, when I set the IE7 Zoom Level to higher or lower than 100%, all of the text on the dropdowns is lost for most of the menu. Ian, did you notice this?

[Ian]

Yes I did, I saw exactly that.

Some of the text looked like it started at the far right of the item wrapper.

Cheers
Ian

[Ian]

Luckily it does work properly with ie8, but since people are still using ie6 I won't hold my breath trying to wait for people to upgrade.


I'd rather them switch from IE6 to Firefox or Safari than move to IE8! ;-)

[joe159765]

I'm having the same problem but the height is set in my css. Any other ideas? Could it be z-index? (I'm not a css pro).

[Ray Borduin]

You would have to give a url to the page with the problem to see. (I'm not a css psychic)

[joe159765]

I was hoping you were phsycic
Here is the link currently. http://freedomfest.belowz.com/
I'm not sure when you'll get a chance to look at it so as of Saturday at 3:39am May 2, the submenu goes underneath other elements in the page which have no z-index set. This happens in IE (I'm currently testing with IE7) but is fine in Firefox, safari, and opera.

Thanks.


** So I just tried something else. I have a div below the menu. When it is set to relative, the submenu shows up underneath it. When I remove that, the submenu shows up over it. Unfortunately I need to have this set for the design.**

[joe159765]

Anyone help me?

[joe159765]

Man I can't get help from the support area or the forums.

[Justin Nemeth]

Try adding 'zoom: 1;' to the ul#cssmw css rule to see if that has any effect.

[jeff150879]

Ray,

I don't really want to be the guy who complains all the time, but the fact that I have purchased 17 extensions over the years from WebAssist makes me feel I have the right.

CSS Menuwriter 1 never worked properly in IE6. The same holds true for version 2. It works fine in all other browsers including IE versions 7 & 8. Although it's true that IE 6 is full of problems and anyone still using it should upgrade, I can't tell that to my client when his customers can't see the drop-down menus on a navigation bar I created with CSS Menuwriter.

This product should be compatible with at least 2 previous versions of all the popular browsers. Your product page claims "Output pages support Internet Explorer 6 – 7.x, Firefox 2.x, Safari 2, Opera 9."

You should not be making this claim if it's not true.

[bobrossi315677]

"Its a horizontal menu with dropdowns on certain items. In Firefox this all works perfectly, but in IE the dropdowns always dissapear before you get chance to move the mouse over the items."

I've got the exact same problem and a ticket into support a week ago with no answer. Problem is in both IE6 and 7 but not in IE8 and Firefox.

After going from the home page to other pages and then back, menu displays the phenomena shown above.

You can see it at www.carusello.com

[Ray Borduin]

I would play with the border and margin settings to see what fixes it. Usually setting the height will resolve the issue. I couldn't spot it looking at the code, but it is difficult without the files to debug.

[joe159765]

I'm really hoping this problem can be fixed. I'm not the only one with this issue. http://freedomfest.belowz.com this is my page. I will not touch it until I get another reply. Put your mouse over WELCOME in ie7.0 and then try and touch the submenus. They end up under the other headings below the menu. the headings below are DIVs. They are set to relative. If I remove the relative setting, then the submenus do not go below. But I need these set as relative. I'm HOPING someone has a solution for this. I tried dealing with all the z-index and even the suggested zoom feature but nothing has worked. The menu works fine in firefox and safari.

[Ray Borduin]

This particular problem appears to be some opacity settings.:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=67 )";

so it must be cascading down to the menu

opacity: .67;
filter: alpha(opacity=67);

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=67 )";

resetting those values in the menu div should do it

[joe159765]

How would it cascade down to the menu when that filter doesn't happen until after that? Also I have read more than one person having this same problem. But that doesn't make any sense to me, because the submenu is going behind that div. I will remove the opacity and tell you my results. Thanks for your suggestion.

[joe159765]

I removed every single call to that filter and it didn't make any difference at all. Any other thoughts?

[Ray Borduin]

I think the problem may be outlined in:

http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/

It appears you may be able to fix it by setting the z-index of the container for the menu if that is the case.

[joe159765]

Hi Ray,

I appreciate you continuing to figure this out. I have changed all the wrapper divs and such to zindex of 2. This did not fix it. In the example you gave me, the object that they are using is set to absolute. I don't have an issue when my divs that are covering the sub menu are set to absolute. But in my design they are relative and that is what is causing the problem.

[bobrossi315677]

As I've said elsewhere, CSS Menu Writer with SiteAssist Pro doesn't ever work correctly for me with IE6, I really think WebAssist needs to look at this compatability issue since about 19-20 % of people still use IE 6.

[Ray Borduin]

Please post a sample URL. The menus themselves are tested on IE6, but somtimes they must be placed properly in context to work properly. It is also common to not have the ie specific css or javascript referenced properly which causes IE6 issues.

[wetware]

. . . place the statements listed below in the "Header" of your page HTML (after the <link href> section for the original .css file in your eCart set-up will work). Name the CSS files whatever is pertinent/memorable for you. Your IE6 specific .css file should have the width, height, whatever descriptions that work in IE6. You only need those specific "div" listings that differ, not the entire website version. Do not re-name the "div". Keep the values that work in Firefox as the entries in the "main" .css file (generated by WebAssist). Upload the IE6 (and/or IE7) specific .css files to your site root & the Internet Explorer browsers in the world will "replace" the differing "div" values with the "IE specific" ones.

<!--[if LTE IE 6]>
<link href="IE6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

<!--[if IE 7]>
<link href="IE7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

Also, I believe that there's a technique called "sticky hovering" that basically encloses the flyout unordered list (ul) with a "div". Then that "div" can be padded to make it easier to access (or harder to miss) on hover/rollover. The CSS looks something like this:
ul div {
position: ?;
left: ?;
width: ?;
padding: ?;
background-image: ?;
}
I believe that a "nonsense" bkgd. image is needed to get around another IE bug . . .

[Ray Borduin]

I already anwered it in that thread too... please start new incidents and only post once to help keep the forum clean so I don't have to answer the same questions over and over again.

[rich381949]

Hi,

I have implemented a CSS menu using version 2.0

Its a horizontal menu with dropdowns on certain items. In Firefox this all works perfectly, but in IE the dropdowns always dissapear before you get chance to move the mouse over the items.

Is this a bug?

Thanks
Ian


After reading all of the posts in this thread (and having spent over $1000.00 for Webassist Software myself), I share the frustrations of its users. It seems that all we (the users) are doing is providing "our" sites to try to show the problem and then being told to try this or that to fix it ourselves.
I have another suggestion - perhaps Webassst could use their very own brand new "Power Store 2" Demo which they are trying to sell to everyone to see the "EXACT" problem everyone is talking about! Now that they themselves are showing this "bug" to everyone worldwide, perhaps they will use some of the money all of us have already given them and pay someone on their staff to actually fix the problem.
Webassist - the ball is in your court - your "action" (not words) will help all of us users understand your interpretation of the phrase "Customer Support"!

[Ray Borduin]

What is the issue you are describing? Certainly our demo is a perfect url to use if it demonstrates the problem.

This user's problem was that they had forgotten to upload the necessary .css file to the server. I had to look at his site to reproduce because there was no other way to see what might not have been uploaded.

Which problem are you referring to? Please open a new incident since it doesn't appear to apply to this issue.

[rich381949]

What is the issue you are describing? Certainly our demo is a perfect url to use if it demonstrates the problem.

This user's problem was that they had forgotten to upload the necessary .css file to the server. I had to look at his site to reproduce because there was no other way to see what might not have been uploaded.

Which problem are you referring to? Please open a new incident since it doesn't appear to apply to this issue.

Sorry Ray - I thought that by including the quote that started this thread to begin with the issue would be clear. Let me try again -

Using IE 7: Go to the Power Store 2 Demo - On the "Main Page" move your mouse to the "Products" or "Support" button on the Horizontal Menu so the "Dropdown" submenu appears - now try (at a normal speed) to select anything in the submenu before it "dissappears".
I have now tried this well over 100 times on three different machines of my own and have asked 5 of my clients in different locations of North America to do the same - the end results are that everyone has seen the exact same problem - 99% of the time the "Dropdown" submenu will "disappear" before you can get to it to select an item.

Two notes of interest:
1. If you are really really fast moving the mouse you might actually get to the submenu before it disappears.
2. This behavior appears to only be present on the "Main Page" of the Power Store 2 Demo.

One other note: The Power Store 2 software that I just downloaded last week exhibits exactly the same problem.

If this is not the problem that started this thread to begin with then, by all means, let's start a new one so we can get this problem fixed once and for all! From a developers point of view - none of my clients would accept a website from me or anyone else with a main menu bar that behaves in this manner.

I sincerely hope this helps.

[Ray Borduin]

Sorry for the confusion. It is always better to start a new thread and be specific what you are referring to. This thread has a whopping 36 posts, so it can be hard to follow.

I was able to reproduce the problem on our demo site with ie7. It is a bug, and now that it is reported it will be corrected shortly... we should have a fix in the next day or two.

[Dani Chankhour]

Hi,

In regard to the IE 7 issue with the menu on the index page. The reason for this issue is because when you hover over the second level of the menu, you are now outside the menu container and you looses focus and that is why the second level disappears unless you do it quickly. And the reason you looses focus is if you compare the home page to the other pages you will see that all other pages have a taller menu container which contains the shadow image under the menu and that is why this only occurs on the index page.

And since this only happen on IE 7, we can add an IE conditional statement to fix this issue. On the index page, please go to the end of line 54 and press enter and paste the following code there:

<!--[if lte IE 7]>
<style>
#outerWrapper #navWrapper {
padding-bottom:22px;
}
</style>
<![endif]-->


I will do further debugging to find a fix without changing the look and feel of the home page. Meanwhile, please use the fix above.

[rich381949]

Hi,

In regard to the IE 7 issue with the menu on the index page. The reason for this issue is because when you hover over the second level of the menu, you are now outside the menu container and you looses focus and that is why the second level disappears unless you do it quickly. And the reason you looses focus is if you compare the home page to the other pages you will see that all other pages have a taller menu container which contains the shadow image under the menu and that is why this only occurs on the index page.

And since this only happen on IE 7, we can add an IE conditional statement to fix this issue. On the index page, please go to the end of line 54 and press enter and paste the following code there:

<!--[if lte IE 7]>
<style>
#outerWrapper #navWrapper {
padding-bottom:22px;
}
</style>
<![endif]-->


I will do further debugging to find a fix without changing the look and feel of the home page. Meanwhile, please use the fix above.

Hi Dani,

Thanks for digging into this. I am sad to say that the conditional statement "fix" for the problem just treats a "symptom" of the real problem for this page, in this configuration, at a zoom level of 100%. If you increase the zoom level of IE 7 to 150%, 200%, or 400% you will discover that the "real problem" still exists - all you've done is cover it up on this page at a zoom level of 100%.
I have done more research since my last post:

I have looked at more than a dozen websites "known" to be using Webassist Horizontal Menus with dropdowns (many which have been provided by users in this forum). So far I have seen this problem on every site - even the sites that appear to work at a zoom level of 100% will unmask this problem at zoom levels from 150-400% depending on the site!

I have also created a webpage myself in DW which has NOTHING on it but a Horizontal Menu created with CSS Menu Writer (v2.01) with just the "default" settings it has "built-in".
This ALSO has the exact same problem!

I also tested the "out of the box" Power Store 1 - it also appears to work at a zoom level of 100% but like everything else it too fails at higher zoom levels.

One final note - at first I thought this problem was only on the "Main Page" of Power Store 2 - I was wrong. Like every other page I have looked at, if you increase the zoom level enough, the "real problem" will unmask itself and stick its ugly head out at you!

I believe this problem has existed for sometime and is beginning to look like it is deep in the core of CSS Menu Writer - I think we have just been treating "symptoms" on everyones individual page configurations instead of fixing the underlying "real" or core problem.

I hope all of my research will help you in your debugging - I'm afraid that Menu Writer and anything written with it (including both versions of Power Store) is useless to me as a site developer until this bug is actually discovered and "fixed" instead of just being covered up by treating all of the symptoms on all of the pages it creates.

Thanks (from all of us).

[Justin Nemeth]

In some versions of IE (mainly IE6 and IE7), the CSS needs to be updated to work correctly in some cases. This is a bug with those versions of IE, and all we can really do is use conditional statements to fix it.

As for the zooming issues, your point is taken. However, I am not sure zooming a pixel based layout is going to look perfect on a lot of sites out there. Using % or ems based units scale better than px based units. Those units are not a fixed size, thus they are designed to be more dynamic in their rendering.

Testing out the zoom level in a few browsers, it appears the entire page is zoomed and the overall page structure is kept intact for me. Is it possible that IE7 is zooming the text only? That could be why the containers are losing their structure and you are seeing issues.

[jonas398360]

I just started reading this thread today. It doesn't look like there's a solution here. The ie7 culprit seems to be setting position: absolute, or position: relative on a div containing the webassist generated menu. I tried two levels of divs trying to isolate the menu and still the hover activated bit of menu would flow under anything else down the page when using css position rules.

Had to remove any css position rules from the div where my generated menu lived. Then position using negative margins. I have a wrapper div around the div that contains the generated menu. I then position the menu from there as necessary. As long as "position:" rules do not target the webassit menu piece, this works.

Good luck.