AnyLink CSS Menu IE Positional Problem

[masey]

1) Script Title: AnyLink CSS Menu

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

3) Describe problem:

I've managed to get the script to work no problems on Firefox 2.0 on a site I am working on:

http://www.milorihomes.com/index.php

But when I go to test it in IE 7.0 (*spit* ) the menu items appear out of position.

Anyone know what the go is here???

[ddadmin]

Most of the positioning problems with the drop down 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, so for example the following:

   	  <div id="customer" class="anylinkcss" style="margin: 90px 0px 0px 526px; width: 120px;">

				<a href="customer/overview.php">Overview</a>
				<a href="customer/testimonials.php">Testimonials</a>

	  </div>


   	  <div id="development" class="anylinkcss" style="margin: 90px 0px 0px 287px; width: 140px;">

				<a href="development/mona.php">Mona</a>
				<a href="development/canyonHeights.php">Canyon Heights</a>
				<a href="development/theGardens.php">The Gardens</a>

	  </div>


   	  <div id="services" class="anylinkcss" style="margin: 90px 0px 0px 205px; width: 270px;">

				<a href="services/development.php">Property Development</a>
				<a href="services/managementRes.php">Project Management (Residential)</a>
				<a href="services/managementComm.php">Project Management (Commercial)</a>

	  </div>


</body>

[masey]

I gave that a go, but didn't seem to make a difference.

So what I've done now is take out the extra margins I was putting in to make the script work properly in FF before:

<div id="development" class="anylinkcss" style="margin: 90px 0px 0px 287px; width: 140px;">

Oddly, once I do that, it now works fine in IE7 but not in FF2.

I've gone right back to the start and done it from scratch again... but still no joy...

??????

[ddadmin]

Ok, keep the changes you've made thus far, but also move the onmouseover events from your main menu items' A element to inner IMG instead:

        <a href="http://www.milorihomes.com/customer/index.php" onclick="return clickreturnvalue()"><img src="client_files/nav_customer.gif" alt="Customer Care" class="navItem" width="132" height="90"  onmouseover="dropdownmenu(this, event, 'customer')"></a>
        
        <a href="http://www.milorihomes.com/blog/index.php"><img src="client_files/nav_blog.gif" alt="Blog" class="navItem" width="53" height="90"></a>
         
        <a href="http://www.milorihomes.com/development/index.php" onclick="return clickreturnvalue()" ><img src="client_files/nav_dev.gif" alt="Development Projects" class="navItem" width="186" height="90" onmouseover="dropdownmenu(this, event, 'development')"></a>
        
        <a href="http://www.milorihomes.com/services/index.php" onclick="return clickreturnvalue()" ><img src="client_files/nav_services.gif" alt="Services" class="navItem" width="83" height="90" onmouseover="dropdownmenu(this, event, 'services')"></a>

[masey]

Seems to have done the trick.

Thanks a lot mate - much appreciated.

[Jmccormick]

I have a site that I'm working on & trying to use the anylink code for.

the site is:http://www.blueprintsdogstudio.com/index2.php & you can easily see my spacing issue on there in the top menu. There is only one menu option that we need to add the drop down for. Could you please PLEASE help me figure out what I did wrong?

thanks!
Jesse

[ddadmin]

Jmccormick, the menu does seem to be dropping down in the correct location vertically; the gap you see is simply part of the tab image:



Now, if you want to manually decrease the vertical offset of the menu relative to the anchor link, inside anylinkcssmenu.js, try adding the code in red to the below line:

menu.dropmenu.setcss({left:posx+'px', top:posy-10+'px', visibility:'visible'})

Increae or decrease 10 as desired.

[Jmccormick]

I tried that & still have the gap on the left & right of the image. I believe the gap below the menu is a code error, but want to resolve the left/right gaps first, to make sure it wasn't a spacing issue caused by that.

[ddadmin]

Hmm can you elaborate what you mean by gap on the left and right of the image? With respect to the drop down menu? Also, does the problem only occur in a particular version of IE, such as IE7?