Results 1 to 8 of 8

Thread: Large Blank Space at bottom of website

  1. #1
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Large Blank Space at bottom of website

    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
    Click image for larger version. 

Name:	12-4-2012 11-10-54 AM.jpg 
Views:	99 
Size:	89.2 KB 
ID:	4842

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 415 Times in 409 Posts

    Default

    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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    594
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

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

    Code:
    <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?
    Last edited by keyboard; 12-05-2012 at 08:16 PM. Reason: Format: Code Tags [code][/code]
    Thanks,

    Bud

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    Already tried it while I was fiddling with the footer

    it doesnt help.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 415 Times in 409 Posts

    Default

    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;
    }
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    Quote Originally Posted by DarenDee View Post
    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  8. #8
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    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!

Similar Threads

  1. AnyLink: Extra space appear at the bottom of website
    By Kylie in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 08-12-2012, 06:52 AM
  2. blank space at bottom of pages using Anylink CSS menu with drop-down divs
    By JBwebdes in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-02-2011, 05:10 PM
  3. Anylink CSS Dropdown issue- Blank space at bottom of page
    By jdharris in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-11-2009, 03:32 AM
  4. blank space around object
    By Johnnymushio in forum HTML
    Replies: 2
    Last Post: 11-11-2007, 06:15 AM
  5. Large white space on the right.
    By SawnDiddle in forum CSS
    Replies: 6
    Last Post: 06-13-2007, 08:17 PM

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
  •