Anylink CSS Dropdown issue- Blank space at bottom of page

[jdharris]

1) Script Title: Anylink CSS Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/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

[jscheuer1]

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:


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

[jdharris]

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

[jscheuer1]

The main problem there is in this line:


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.

[decibel.places]

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.

[PaulB1974]

This worked perfectly for me to thank you SO much :o)


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.