Results 1 to 6 of 6

Thread: Anylink CSS Dropdown issue- Blank space at bottom of page

  1. #1
    Join Date
    May 2008
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Anylink CSS Dropdown issue- Blank space at bottom of page

    1) Script Title: Anylink CSS Menu

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

    3) Describe problem: I have been successful in adding the dropdown menu to my site but have been wrestling with a few issues. at first, i included the anylinkmenu (mine are named: theorylinks, and serviceslinks) divs inside the main navigation div (nav). on mouseover, the links were displaying far right of the respective nav button. so, on other advise from the forum, i placed the anylinkmenu divs (theorylinks, and serviceslinks) outside any divs and just before </body>. this solved that problem, but now i have blank space at the bottom of the displayed page, just below the footer. when i mouseover the services nav button, the space goes away. i'm thinking this has something to do with where i've put these anylinkmenu divs, but am stumped as to where else to put them or how to adjust the css. any ideas? i'm including a link to the site. all supporting files are there... http://www.jason-harris.com/sfcess/index.html

    thanks,
    jason

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    OK, this script is a little old and doesn't quite conform to standards. Without really fixing that (for the most part it doesn't affect the performance of the script), you should be able to take care of the issue you mention by adding to the stylesheet here:

    Code:
    .anylinkcss
    {
      position: absolute;
      visibility: hidden;
      z-index: 100;
      background: #cc0033;
      width: auto;
      border: 1px solid #000000;
      font-size: 90%;
      text-transform: lowercase;
      top:-2000px;
      left:-2000px;
    }
    If that doesn't work out for you, I will tell you what you need to do to get the script to conform to standards.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    jdharris (05-08-2008)

  4. #3
    Join Date
    May 2008
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    thank you john. that certainly fixed the problem. out of my own curiosity, if you're still willing, i would like to hear what you have to say about getting the script to conform to standards.

    jason

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    The main problem there is in this line:

    Code:
    function showhide(obj, e, visible, hidden){
    if (ie5||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }
    It should be:

    dropmenuobj.style.left=dropmenuobj.style.top="-500px"

    That's because all positions and dimensions in standards mode are strings with units specified, not raw numbers as is directed by that line in its original form.

    I didn't get too deep into that, and perhaps shouldn't even have mentioned it, because the more I looked at the situation on your page, the more it appeared that although strict error reporting was having a problem with that line, it wasn't - as far as I could tell - having anything to do with your issue. It wouldn't hurt to fix it though. It might even fix another issue or issues that haven't become obvious yet.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    jdharris (05-09-2008)

  7. #5
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow use display property instead of visibility

    I had a similar problem with both anylinkmenu scripts, css and js.

    I corrected it by replacing visibility with display in the css and js files

    visibility: hidden => display: none
    visibility: visible => display: inline

    this seems to work, since the visibility property will still render the menu divs as hidden, but display: none will not add them so there is no "extra" space.

    Otherwise, it is a very useful menu script and easy to customize.

  8. #6
    Join Date
    Aug 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This worked perfectly for me to thank you SO much )

    Quote Originally Posted by decibel.places View Post
    I had a similar problem with both anylinkmenu scripts, css and js.

    I corrected it by replacing visibility with display in the css and js files

    visibility: hidden => display: none
    visibility: visible => display: inline

    this seems to work, since the visibility property will still render the menu divs as hidden, but display: none will not add them so there is no "extra" space.

    Otherwise, it is a very useful menu script and easy to customize.

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
  •