Large Blank Space at bottom of website

1 Attachment(s)

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
Attachment 4842

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

Code:

<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

Code:

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

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.

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

Code:

<p>© 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 & 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?

Already tried it while I was fiddling with the footer ;)

it doesnt help.

you have the dropshadow CSS commented out

Code:

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

Quote:

Originally Posted by DarenDee

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.

Quote:

Originally Posted by Beverleyh

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!