Large Blank Space at bottom of website

[DarenDee]

I'm using the Anylink CSS menu on a web site. I have 4 drop-down menus on each site page. Each drop-down menu is created using a set of div tags. THE PROBLEM: There is a large blank space at the bottom of my site. Another forum told me that hidden elements within the css are creating this large blank space at the bottom. Also, in another thread on this site a suggestion was made to change the javascript:
"I used this js today and it's being a very fast and useful solution (thanks a lot to the creator), btw i encountered same problem described in this thread...
i've managed to resolve it changing:

//document.body.appendChild(menu.dropmenu) //move drop down div to end of page
//document.body.appendChild(menu.shadow)

with

document.getElementById('contenuti').appendChild(menu.dropmenu) //move drop down div to end of page
document.getElementById('contenuti').appendChild(menu.shadow) "

When I made this change (above), the blank space went away, but my dropdown menus stopped working.

Also, I have not removed the shadow DIV from the css.

Any suggestions?

My website is www.microcentertech.com

[vwphillips]

not the problem you are referring to but an error on this line

<input type="submit" class="gobutton" value="Go" onFocus="this.value=''" onKeyPress="return taLimit(this)" onKeyUp="return taCount(this,'myCounter')"> </form>

found the line with the problem

setupmenu:function(targetclass, anchorobj, pos){
	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
	var relattr=anchorobj.getAttribute("rel")
	var dropmenuid=relattr.replace(/\[(\w+)\]/, '')
	var menu=this.menusmap[targetclass+pos]={
		id: targetclass+pos,
		anchorobj: anchorobj,
		dropmenu: document.getElementById(dropmenuid),
		revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click")? "click" : "mouseover",
		orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",
		shadow: document.createElement("div")
	}
	menu.anchorobj._internalID=targetclass+pos
	menu.anchorobj._isanchor=true
	menu.dropmenu._internalID=targetclass+pos
	menu.shadow._internalID=targetclass+pos
	menu.shadow.className="anylinkshadow"
    document.body.appendChild(menu.dropmenu)//move drop down div to end of page
	document.body.appendChild(menu.shadow)
	menu.dropmenu.setcss=this.setcss
	menu.shadow.setcss=this.setcss
//	menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
	this.setopacity(menu.shadow, this.effects.shadow.opacity)
	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOVER event for anchor, dropmenu, shadow
		var menu=anylinkcssmenu.menusmap[this._internalID]
		if (this._isanchor && menu.revealtype=="mouseover" && !anylinkcssmenu.isContained(this, e)){ //event for anchor
			anylinkcssmenu.showmenu(menu.id)
			anylinkcssmenu.addState(this, "add")
		}
		else if (typeof this._isanchor=="undefined"){ //event for drop down menu and shadow
			clearTimeout(menu.hidetimer)
		}
	}, "mouseover")
	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow
		if (!anylinkcssmenu.isContained(this, e)){
			var menu=anylinkcssmenu.menusmap[this._internalID]
			menu.hidetimer=setTimeout(function(){
				anylinkcssmenu.addState(menu.anchorobj, "remove")
				anylinkcssmenu.hidemenu(menu.id)
			}, anylinkcssmenu.effects.delayhide)
		}
	}, "mouseout")
	this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu
		var menu=anylinkcssmenu.menusmap[this._internalID]
		if ( this._isanchor && menu.revealtype=="click"){
			if (menu.dropmenu.style.visibility=="visible")
				anylinkcssmenu.hidemenu(menu.id)
			else{
				anylinkcssmenu.addState(this, "add")
				anylinkcssmenu.showmenu(menu.id)
			}
			if (e.preventDefault)
				e.preventDefault()
			return false
		}
		else
			menu.hidetimer=setTimeout(function(){anylinkcssmenu.hidemenu(menu.id)}, anylinkcssmenu.effects.delayhide)
	}, "click")
},

will try and find out why later

[Beverleyh]

I don't think the script is causing the issue here - I believe it's the HTML.

I downloaded your page and did what I normally do when troubleshooting, which is to hive off logical blocks of HTML to see what happen with certain elements removed.

If you delete, or just simply move the whole "footer" div, the problem goes away. Now I'm not saying that the "footer" HTML or its CSS is actually to blame - I pasted it around into several other locations and it doesn't cause the gap when it's placed higher up the HTML, only when it's in your original position.

So based on this observation, I would guess that the gap is down to mismatched div tags or something along those lines - maybe there's one open somewhere? Or one missing? You have quite a lot going on in your source code so it's not something that I can easily spot but I'd suggest validating your code here: http://validator.w3.org/

You might need to rebuild your HTML again from scratch until you find the missing/extra tags, but starting from the outside elements and work inwards is the easiest way to do it. Go line by line if you have to but remember to always manipulate/move the blocks that are 'complete' - with the correct start and end tags.

It's not going to be quick but I've been in this position a few times, and rebuilding pages is the surest way to pinpoint the glitch.

It's probably going to help to indent your code too - at least while you test - as it allows you to visually hone in on 'complete' code blocks more easily.

Hope this helps.

[ajfmrf]

When I source your page a closing p tag appears to be misplaced.It could be causing an issue?

<p>&copy; Copyright
				 <script type="text/javascript">
				var copyrightyear = new Date();
				document.write(copyrightyear.getFullYear());
		  </script> Micro Electronics, Inc. | <a href="http://www.microcenter.com/customer_support/copyrights_trademarks.html" target="_blank">Copyright &amp; Trademark</a> | <a href="http://www.microcenter.com/customer_support/privacy_policy.html" target="_blank">Privacy Policy</a> | <a href="http://www.microcentertech.com/sitemap.html">Sitemap</a> | <a href="http://www.microcentertech.com/help.html" >Help</a>		<br/> <br/>

				<table width="180px" cellspacing="2" cellpadding="2" border="0" align="center">
						<tr>
							<td width="50px">CONNECT&raquo</td><td><a href="http://www.facebook.com/#!/MicroCenter" target="_blank" style="text-decoration:none;"><img alt="Facebook" height="20" src="http://www.microcentertech.com/images/facbook_icon25.gif" width="20" border="0"></td><td><a href="http://twitter.com/MicroCenterTech" target="_blank" style="text-decoration:none;"><img alt="Twitter" height="20" src="http://www.microcentertech.com/images/twittericon25.gif" width="20" border="0"></a></td><td><a href="http://plus.google.com/111911699251687389812" target="_blank" style="text-decoration:none;"><img alt="Google Plus" height="20" src="http://ssl.gstatic.com/images/icons/gplus-32.png" width="20" border="0"></a></td><td><a href="http://microcentertechsupport.blogspot.com/feeds/posts/default" target="_blank" style="text-decoration:none;"><img alt="RSS" height="20" src="http://www.microcentertech.com/images/rss_icon25.gif" width="20" border="0"></td>
						</tr>
					</table></p>

Try placing the closing tag before the table and see if it fixes the issue?

[Beverleyh]

Already tried it while I was fiddling with the footer

it doesnt help.

[vwphillips]

you have the dropshadow CSS commented out

.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: black;
visibility: hidden;
}

[Beverleyh]

Also, I have not removed the shadow DIV from the css.

LOL - I didnt think to check that based on DarenDee statement. But, yes, that is what's causing the problem.

[DarenDee]

LOL - I didnt think to check that based on DarenDee statement. But, yes, that is what's causing the problem.

Woah! That worked to remove the space! It did however add the dropshadow, which is unwanted. But I'd rather have that than the space.

Thank you very much everyone for your replies!