Advanced Search

Results 1 to 9 of 9

Thread: AnyLink CSS Menu IE Positional Problem

  1. #1
    Join Date
    Oct 2005
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default AnyLink CSS Menu IE Positional Problem

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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    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:

    Code:
       	  <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>
    DD Admin

  3. #3
    Join Date
    Oct 2005
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

    ??????

  4. #4
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    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:

    Code:
            <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>
    DD Admin

  5. The Following User Says Thank You to ddadmin For This Useful Post:

    masey (10-16-2008)

  6. #5
    Join Date
    Oct 2005
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Seems to have done the trick.

    Thanks a lot mate - much appreciated.

  7. #6
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Similar problem

    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

  8. #7
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    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:

    Code:
    menu.dropmenu.setcss({left:posx+'px', top:posy-10+'px', visibility:'visible'})
    Increae or decrease 10 as desired.
    DD Admin

  9. #8
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #9
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    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?
    DD Admin

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •