IE7 drops submenus miles away [Archive]

View Full Version : 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/dynamicindex1/dropmenuindex.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:



<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>



<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>



<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:

<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:

<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.