close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Horizontal Menu with Dropdowns not working in IE7

Thread began 6/14/2010 10:06 pm by gregb440246884 | Last modified 6/20/2010 6:41 pm by gregb440246884 | 2440 views | 13 replies |

gregb440246884

Horizontal Menu with Dropdowns not working in IE7

I have a horizontal menu with dropdowns that isn't working properly in IE7. The menu and dropdowns display properly, however if you try to mouse over any of the dropdown items, the menu goes away!

Any help would be greatly appreciated!

Menu is here: www.gateslodge.com

Sign in to reply to this post

neilo

Hiya Greg,

The menus are working fine for me here - tested on IE6, IE7, IE8, Firefox.

I'm on Vista (not that that should make a difference!). Is there a particular page/menu item that isn't working that I could check? Weird - all seems good.

Sign in to reply to this post

gregb440246884

I have a separate computer set up with Windows XP and IE6 and 7. The dropdown menu items in IE7 disappear when the mouse hits the 'border' between the items.

I have received three emails from people that they are experiencing the same thing, and in all cases they have Windows XP and IE7 (I asked, and 2 of them are at work on company networks)

I also signed up for a trial at crossbrowsertesting.com, as you can connect to a live system for testing with them... In the Windows XP SP2 and IE7 environment, the same issue occurs... horizontal menu dropdowns disappear when you try to mouse over them.

Let me know if there is any further information I can provide to help find a solution...

Thanks!

Sign in to reply to this post

Jimmy Wu

I took a look at the site and don't see the menus disappearing when I mouse over them in IE8 or IE7.

Sign in to reply to this post

gregb440246884

Well, I'm not sure what to say... I have now verified for myself that the issue occurs in IE7 on both a Windows XP SP2, and a Vista machine!

I've also checked crossbrowsertesting.com, and the issue occurs in the same places as well.

I've also downloaded IE Tester (free at: HomePage) and if you check IE7, the same thing happens... the dropdowns in the horizontal menu disappear when you try to mouse over them!

If 'anyone' has any idea what is going on... I would greatly appreciate the assistance!

Thanks in advance!

Again, the website is www.gateslodge.com (check the dropdowns under Fly Shop, or Learn)

Sign in to reply to this post

neilo

Hi Greg,

That is a real mystery. I tried it again in Win XP IE6/7 - and both still OK here.

The only way I could see your problem was in the free IE tester you linked to; the IE7 tab showed the fault you described.

On that screen, the disappearing menu could be seen to vanish at the point the mouse leaves one menu item on its way to another (child) item, - but there is no gap whatsoever, so I can't think of a reason why the menu should vanish. Usually, even when there is a gap that causes this to (understandably) happen, if you 'twitch' the mouse/cursor fast enough to bridge the gap, it is will nearly always still be possible to keep the menu open - at least once in a while.

As well as the effect happening at the edge of the menu item, it also (coincidentally?) happens just as the mouse/cursor edges over the flash/swf display you have just under the menu.

If you have the site still in Dreamweaver, could you try duplicating the page, and upload the duplicate page without the flash swf on the page? I would like to rule out that coincidental connection.

If the menu now works OK in IE7 XPsp2, try changing the wmode parameters in the flash code (x2) from 'opaque' to 'transparent'.

As you can guess, I'm just fishing in the dark here - but am a bit intrigued to find out what the problem is!

Sign in to reply to this post

gregb440246884

First off, the error occurs on page that do not have any Flash on them at all... but just for the heck of it, I tried what you suggested and removed the Flash object from the home page. It didn't make any difference. I then changed the wmode to transparent, and again, that didn't make any difference.

I checked all of these in crossbrowsertesting.com and using IE Tester using IE7 on WinXP SP2 and Vista machines.

I've also received more emails today from people complaining that the dropdowns disappear for them... so now I'm getting nervous!

One person emailed me something interesting... they found that if the moused over a menu item and waited for the dropdown to appear, then RIGHT clicked (the cursor changes to a circle with a slash symbol) and moved the mouse down over the dropdown menu items, they could then release the right mouse button, and were able to left click to select the item.

I tried this, and it does work, but I also noticed something interesting... If you did this, you had to end up DIRECTLY on the TEXT of the menu item. If you let go of the right mouse button, or if you moved the regular cursor even slightly off of the TEXT, the menu disappears. So, at least this tells me that it's not just a 'border' issue. The problem is that IE7 (at least for me and an increasing number of others) isn't 'seeing' the background behind the dropdown menu items.

My next course of action (unless someone has a better suggestion), is to remove the background 'image' for the menu items that I'm using, and just use a solid color.

I'll post my results as soon as I am able... although it may not be until tomorrow night...

In the meantime, if anyone has ANY other suggestions, I'm all ears!!

Sign in to reply to this post

gregb440246884

Made a new discovery, although I'm still not sure what the solution is...

I created a test page at test2.php and if you use IE Tester to view it you'll easily see what is happening. I moved the horizontal navigation up just a bit from it's 'normal' location at the bottom of the header.

Now, if you mouse over any dropdown item that is within the 'bounds' of the header div, everything is ok... but as soon as you mouse over a menu item that is outside of the header div, the menu disappears!!

I have the Menu Writer menu within an absolutely positioned div that is then contained within a relatively positioned header div... is there some weird IE7 bug rendering bug that doesn't like this?? And why does it work on some IE7 machines, and not others??

Anyone have any ideas on a solution??

Sign in to reply to this post

neilo

Hi Greg,

Ta for listing the steps you took, and thus providing the clue, which was in the fact that the menus only stayed open when hovering over the text; so, if I may be so bold, EURIKA - I have it.

It should have ocurred to me earlier - IE7 is very fussy about having to have heights/widths stated in exact units (not %, not 'auto') There was nothing defined in the CSS to tell IE7 that there was actually a menu item there - apart from the text (which it saw because it was defined in the CSS) - as there was no width and height for the Level-1 menu items. They were effectively invisible to IE7.

In your final pages, check which stylesheet is being referred to, (in the test2.php page it is 'cssmw1' - see the line : <ul class="level-0" id="cssmw1"> )

and either change the menu.css for that page's menu (CSSMenuWriter/cssmw1/menu.css) Line 107-ish onwards:

ul#cssmw1 ul.level-1 > li > a, ul#cssmw1 ul.level-1 > li > a:link {
background-color: #f0b478;
background-image: url("../cssmw1_images/topNavDropdown.jpg");
background-repeat:repeat-y; /* Add this line */
border-bottom: solid 1px #f0b478;
border-right-style: solid; /* Remove this line */
color: #644b32;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .7em;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-decoration: none;
width: auto; /* Change this to width:150px; */
height: 15px; /* Add this line */
outline-style: none;
}

or change the appropriate IE conditional statement in the head tags to include IE7 (currently all lte IE6) :

<!--[if lte IE 7]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw1/menu_ie.css");
</style>

<![endif]-->
and change the menu.css for that page's menu (CSSMenuWriter/cssmw1/menu_ie.css) Line 107-ish onwards (same as before) :

Line 107

ul#cssmw1 ul.level-1 > li > a, ul#cssmw1 ul.level-1 > li > a:link {
background-color: #f0b478;
background-image: url("../cssmw1_images/topNavDropdown.jpg");
background-repeat:repeat-y; /* Add this line */
border-bottom: solid 1px #f0b478;
border-right-style: solid; /* Remove this line */
color: #644b32;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .7em;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-decoration: none;
width: auto; /* Change this to width:150px; */
height: 15px; /* Add this line */
outline-style: none;
}

That will sort it.

Sign in to reply to this post

gregb440246884

Thanks neilo! I'll try implementing the changes later today when I'm back at my home office. Although, I'm still curious... any idea why the menu works for some people using IE7 and not others?? It seems to me that it would be all or nothing if it was related to the IE7 rendering engine...

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...