IE7 drops submenus miles away

**Peter_x** · 01-24-2008, 07:20 PM

1) Script Title: Anylink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem: I have built a menu bar combining the Indentmenu and Drop Down Menu CSS functions to achieve a menu whose main buttons appear indented when rolled over, and a drop-down menu appears if applicable. It works great in FF 2.0.0.11 with the submenus dropping right beneath the main menu options. However when I tried it in IE7, the submenus are shifted over to the right, and the offset increases as you roll right along the main menu. This means that slower users may find the submenu disappears before they can roll onto it.

This can be seen at http://www.hillcrestcarehome.com/

Does anyone know why IE7 should behave differently?

Thanks for any help you can give.

Peter.

**ddadmin** · 01-25-2008, 05:51 AM

Most of the positioning problems with AnyLink x" Menus can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:

Code:

   <!--1st anchor link and menu -->
                                                    
<div id="AboutHillcrestmenu" class="anylinkcss" style="color:#FFFFFF">

<a href="Care_types.html">Moving Into Hillcrest</a>

<a href="Facilities.html">Facilities</a>
<a href="Food_Nutrition.html">Food & Healthcare</a>
<a href="Activities.html">Social Activities</a></div>
 
<!--2nd anchor link and menu -->
                                                   
<div id="AboutUsmenu" class="anylinkcss" style="width: 180px; color: #FFFFFF;">

<a href="Ethos.html">Our Care Philosophy</a>
<a href="Management.html">Management</a>
<a href="Staff.html">Staff</a></div>

<!--3rd anchor link and menu -->
                                                   
<div id="Testimonialsmenu" class="anylinkcss" style="width: 180px; color: #FFFFFF;">

<a href="Client_views.html">Our Clients</a>
<a href="Official_views.html">Our Inspectors</a>
</div>

</body>

**Peter_x** · 01-25-2008, 01:48 PM

Thanks for the suggestion. Moved the code for the submenus to just above </body>. Unfortunately it didn't work. Submenus still appear way over to the right.
I've read through comments on several of the CSS menus on Dynamic Drive and IE seems to be a common problem, eg. SuckerTree.
Maybe I'll just opt for a different solution, can you suggest a dropdown menu that is foolproof with FF & IE7?

Thanks

Peter.

**ddadmin** · 01-25-2008, 09:35 PM

Actually, most of the problems with positioning have to do with what I mentioned above.

Looking at your page again though, I see the culprit. Your <body> tag is broken:

Code:

<body onload=<div id="Banner_container"><img src="Banner v2.jpg" alt="Hillcrest banner image" width="700" height="100" /></div>

It's completely mangled. Change that to just:

Code:

<body>

and the menu works properly in IE.

**Peter_x** · 01-25-2008, 10:16 PM

Yep, that's sorted it. Ironically I had spotted the mangled <body> tag, thought I'd fixed it but left out a '>' which meant the problem remained.
It's fine now.

Thanks a lot for your time on this.

Thread: IE7 drops submenus miles away

Thread Tools

Search Thread

IE7 drops submenus miles away

Bookmarks

Bookmarks

Posting Permissions