Solved

Extra Space at bottom of web page (after footer) in ALL browsers

Posted on 2009-01-09
3,068 Views
Last Modified: 2013-11-23
Hi,

I have a problem with my code and Im pretty sure I know where it is I just dont know how to fix it.

Originally, there was white space after my footer and I couldn't figure out where is was coming from. I looked in the CSS and noticed I had the background of my HTML set to white. I took that code out and the white became my body background image (still after footer) so I figured it was something in my Header section. It turns out it is an extra '};' in my "MULTIBOX EFFECT" script. When i take out the '};' (two lines before the </script>) the extra space vanishes and the page looks how I want it to look. The only problem is, then the script does not work.

How do I fix this issue? The script was downloaded off of the creators site and the script code that I have in the Header section is copied and pasted from his to mine just as the creator directed. I have even found other examples of this code working on other sites without extra space at the bottom of their pages.

(just in case, below is my HTML and CSS)

<!-- BEGIN HTML, this line not in original HTML, only here so viewer can see where code begins -->
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<link rel="stylesheet" href="css/newstyle.css" type="text/css" />

    

    <!--MULTIBOX-->

	<link rel="stylesheet" href="css/multiBox.css" />

    <script type="text/javascript" src="js/mootools-1.2.1-core-yc.js"></script>

    <script type="text/javascript" src="js/mootools-1.2-more-yc.js"></script>

    <script type="text/javascript" src="js/multiBox.js"></script>

    <script type="text/javascript" src="js/overlay.js"></script>
 

             <!-- MULTIBOX EFFECT -->

  <script type="text/javascript">

//call multiBox

window.addEvent('domready', function(){

	if($$('.mb').length > 0)//only triggered if 'mb' class found on page

	{

		var initMultiBox = new multiBox('mb', {

			descClassName: 'multiBoxDesc',//the class name of the description divs

			path: './Files/',//path to mp3 and flv players

			useOverlay: true,//use a semi-transparent background. default: false;

			maxWidth: false,//max width (set to false to disable)

			maxHeight: false,//max height (set to false to disable)

			addDownload: false,//do you want the files to be downloadable?

			pathToDownloadScript: './Scripts/forceDownload.asp',//if above is true, specify download script

			addRollover: false,//add rollover fade to each multibox link

			addOverlayIcon: false,//adds overlay icons to images within multibox links

			addChain: true,//cycle through all images fading them out then in

			recalcTop: true//subtract the height of controls panel from top position

		});

	};

});

</script>    

   
 

	

    <!-- SLIDE EFFECT -->

    <script type="text/javascript">

			window.addEvent("domready", function(){
 

				$$(".slideContainer").each(function(container){

					var mySlide = new Fx.Slide(container.getElement(".slide"), {duration: 800}).hide();

					container.getElement("div.less").addEvent("mouseout", function(e){

						new Event(e).stop();

						mySlide.slideOut();

						duration:Fx.Transitions.Bounce.easeOut;

					});

					container.getElement("a.more").addEvent("click", function(e){

						new Event(e).stop();

						mySlide.slideIn();

						duration:Fx.Transitions.Bounce.easeOut;

					});

				});

				

			

			});

			

		</script>

 

        <style type="text/css">

			

			.slideContainer {

				margin: 10px;

			}

			.slide {

				margin-top: 15px;

				background-image:url(images/transback-full.png);

				padding: 5px; 

			}

			

		</style>
 

	

    

    

    

    

   <title>NewWeb</title> 

</head>
 
 

<body>

<div id="head_bar">&nbsp;</div>
 

<!-- 'Title' Section -->
 
 
 

<div id="header_section">

	

	<div id="header_section_center">

    	

        <div id="logo">

        	<img src="images/paint1.png" alt="logo" />

    	</div>

		<div id="header_section_RTside">

    		<img src="images/toptitle1.png" style="padding-left:15px" alt="" />

   	  </div>

		

       

    </div>

    

</div>
 
 

    

    

    

<div id="mainbody"> 

    <div id="content">

    <div id="global_nav">

        <ul>

        	<li><a href="index.html">About Me</a></li>

            <li><a href="index.html">Blog</a></li>

            <li><a href="index.html">Projects</a></li>

            <li><a href="index.html">Home</a></li>        

        </ul>

        </div>
 
 

    <!--</div>--><!-- ENDS contentDIV-->

    <div class="clear"></div>

        <div class="see">

	

    <h2>Welcome to my online watercolor portfolio!</h2>

    <br />

    	<span>This is where you could introduce yourself and talk about the site. Explain how you got into paininting. What inspires you. Anything could go in this greeting section. Could explain how to navigate the site. See below.<br /><br />

        Please take a look at <a href="paintings.html">all my paintings</a>. To view larger images, click on the thumbnail. To view more information about the painting, click on the "Click Here" located next to the thumbnail. All paintings shown here are available for purchase.<br /><br />

        Also, dont forget to check on the nav bar on the right, it shows my recent blog posts as well as my current projects and some other quick links.<br /><br />

        Thanks for coming!</span>

	</div>

<div class="clear"></div>

<div class="see">

	<a href="images/northcountry-big.png" id="mb1" class="mb" title="Image Title 1 (jpg)"><img src="images/northcountry.png" alt="" /></a>

<div class="multiBoxDesc mb1 mbHidden">This is my descrition text 1. It can support html.</div>

    <h2>North Country</h2>

    <small class="date">Painted on (insert date here)</small><br /><br /><br /><br />

    <div class="slideContainer">

			<a href="#" class="more" style="text-decoration:none">Click here</a> to view information about the painting.

			<div class="slide">

				<div class="less" style="text-decoration:none">THis is where the info would go for the painting. Location, time, seaon, etc. LInk to maybe the actual picture or something similar to that. Then a link below to continue reading the story or view more pictures related to this painting, or a purchase page.</div>

			</div>

            </div>

</div>

<div class="clear"></div>
 

<div class="see">

	<a href="images/produce-big.png" id="mb2" class="mb" title="Image Title 1 (jpg)"><img src="images/produce.png" alt="" /></a>

<div class="multiBoxDesc mb2 mbHidden">This is my descrition text 1. It can support html.</div>

    <h2>Produce</h2>

    <small class="date">Painted on (insert date here)</small><br /><br /><br /><br />

    <div class="slideContainer">

			<a href="#" class="more" style="text-decoration:none">Click here</a> to view information about the painting.

			<div class="slide">

				<div class="less" style="text-decoration:none">THis is where the info would go for the painting. Location, time, seaon, etc. LInk to maybe the actual picture or something similar to that. Then a link below to continue reading the story or view more pictures related to this painting, or a purchase page.</div>

			</div>

            </div>

</div>

<div class="clear"></div>

    <div class="see">

<a href="images/memories-big.png" id="mb3" class="mb" title="Image Title 1 (jpg)"><img src="images/memories.png" alt="" /></a>

<div class="multiBoxDesc mb3 mbHidden">This is my descrition text 1. It can support html.</div>

    <h2>Memories of Lenape</h2>

    <small class="date">Painted on (insert date here)</small><br /><br /><br /><br />

	<div class="slideContainer">

			<a href="#" class="more" style="text-decoration:none">Click here</a> to view information about the painting.

			<div class="slide">

				<div class="less" style="text-decoration:none">THis is where the info would go for the painting. Location, time, seaon, etc. LInk to maybe the actual picture or something similar to that. Then a link below to continue reading the story or view more pictures related to this painting, or a purchase page.</div>

			</div>

            </div>

    </div><!-- ENDS 'see' -->

<div class="clear"></div>

<div class="see">

	<a href="images/bungalow-big.png" id="mb4" class="mb" title="Image Title 1 (jpg)"><img src="images/bungalow.png" alt="" /></a>

<div class="multiBoxDesc mb4 mbHidden">This is my descrition text 1. It can support html.</div>

    <h2>The Bungalow</h2>

    <small class="date">Painted on (insert date here)</small><br /><br /><br /><br /><br /><br />

    <div class="slideContainer">

			<a href="#" class="more" style="text-decoration:none">Click here</a> to view information about the painting.

			<div class="slide">

				<div class="less" style="text-decoration:none">THis is where the info would go for the painting. Location, time, seaon, etc. LInk to maybe the actual picture or something similar to that. Then a link below to continue reading the story or view more pictures related to this painting, or a purchase page.</div>

			</div>

            </div>

</div>

<div class="clear"></div>

<div class="see">

	<a href="images/dinning-big.png" id="mb5" class="mb" title="Image Title 1 (jpg)"><img src="images/dinning.png" alt="" /></a>

<div class="multiBoxDesc mb5 mbHidden">This is my descrition text 1. It can support html.</div>

    <h2>Dinning Out</h2>

    <small class="date">Painted on (insert date here)</small><br /><br /><br /><br />

    <div class="slideContainer">

			<a href="#" class="more" style="text-decoration:none">Click here</a> to view information about the painting.

			<div class="slide">

				<div class="less" style="text-decoration:none">THis is where the info would go for the painting. Location, time, seaon, etc. LInk to maybe the actual picture or something similar to that. Then a link below to continue reading the story or view more pictures related to this painting, or a purchase page.</div>

			</div>

            </div>

</div>

<div class="clear"></div>

<div class="see">

	<a href="images/community-big.png" id="mb6" class="mb" title="Image Title 1 (jpg)"><img src="images/community.png" alt="" /></a>

<div class="multiBoxDesc mb6 mbHidden">This is my descrition text 1. It can support html.</div>

    <h2>Community Table</h2>

    <small class="date">Painted on (insert date here)</small><br /><br /><br /><br /><br /><br /><br /><br />

    <div class="slideContainer">

			<a href="#" class="more" style="text-decoration:none">Click here</a> to view information about the painting.

			<div class="slide">

				<div class="less" style="text-decoration:none">THis is where the info would go for the painting. Location, time, seaon, etc. LInk to maybe the actual picture or something similar to that. Then a link below to continue reading the story or view more pictures related to this painting, or a purchase page.</div>

			</div>

            </div>

</div>

<div class="clear"></div>

	<div class="clear"></div>

    </div><!-- ENDS content -->

    
 

    

    

    <div id="sidebar">

	<div class="lv_Caption" id="sidebar_content">

    	<h3>About Me</h3><br />

        <p class="about_me">This is where you could introduce yourself and greet people. After, this sidebar could contain anything else. See example below.</p>

        <br />

        <div class="clear"></div>

        <h3>Recent Blog Entries</h3><br />

        <p>Could list recent blog entries here</p>

        <div class="clear"></div><br />

        <h3>Current Projects</h3><br />

        <p>Could list current projects here</p>

        <div class="clear"></div><br />

        <h3>Favorite Links</h3><br />

        <ul>

        	<li><a href="none.html">Best Scenic Shots</a></li>

            <li><a href="none.html">Tips and Tricks</a></li>

            <li><a href="none.html">Something Else</a></li>

        </ul>

    </div>

</div>

<div class="clear"></div>

    <div id="spacerContent_bottom"></div>

    </div>

    <div class="clear"></div>

    

    

    <!-- Sart Footer -->

<div id="foot_bar">&nbsp;</div>

<!-- End Footer -->
 
 

	
 

    

    
 

</body>

</html>
 
 
 
 

/* CSS BEGINS HERE, this line not in original CSS, only here so viewer can see where code begins */
 

@charset "utf-8";

/* CSS Document */
 

body 

{

font: 16px/150% Arial, Helvetica, sans-serif;

	color:	#5c8a92;

	font-weight: bold;

	background-color:#23404d;

	background:url(../images/woodback.png);

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

	margin-left: 0px;

	height: auto;

}
 

/* TO SEE WHITE SPACE APPLY THIS, OTHERWISE, JUST EXTRA SPACE VISIBLE

html{background-color:	#ffffff;} 

*/
 

a, a:visited{

	text-decoration:		none;

	font-weight:			bold;

	color:				#558d97;

}
 

#head_bar{
 

	display:			block;

	height:				auto;

	width:				100%;

	background:			#0e1720 repeat-x center;

	border-bottom:			#23404d 1px solid;

}
 

#header_section{ 											/* Paper-like section */
 

	display:			block;

	width:				100%;

	height:				396px;

	background-image:url(../images/pix.png);

}
 

#header_section_center {										/* Centerize section */
 

	display:			block;

	padding:			0 0 0 0;

	width:				950px;

	height:				396px;

	margin-left:auto;

	margin-right:auto;

/*

	background: url(../images/headerback2.png);

*/

}
 

#header_section_RTside{
 

	display:			block;

	float:				right;

	width:				291px;

	padding:			105px 36px 40px 0;	

	margin:				0 115px 0 0;

	height:94px;

	background:url(../images/transback-47.png);

}
 

#logo {															/* Section for top logo */

	display:			block;

	float:				left;

	height:				200px;

	width:				466px;

	padding:			0 0 26px 0;

	margin:				-15px 0 0 -90px;

	position:			relative;

}
 
 

#mainbody{

	display:			block;

	margin:				0 auto;

	height:				auto;

	width:				1007px;

	background-image:url(../images/pix.png);

}
 
 
 

.see{

	display: block;

	margin:				25px 0 0 65px;

	width:				625px;

	background-image:url(../images/transback-47.png);

	min-height:			220px;

	height:auto;

	font-weight:		normal;

	padding:			20px;

	position:			relative;

}
 

#content{

	display:			block;

	float:				left;

	width:				700px;

	height:				auto;

	margin:				0 0 0 65px;

}
 

#global_nav {

	

	position:			relative;

	float: 				right;

	height: 			45px; 

	width: 				450px;

	margin: 			-50px 0 0 130px;
 

}
 

/* BELOW IS CLASSES UNDER THE global_nav TO BE USED WITH PAGE NAVIGATION - BOTH HIGH AND LOW */
 

#global_nav ul {

	padding: 			0;

	margin: 			15px 0 0 0;

}
 
 
 

#global_nav ul li {

	float: 				right;

	list-style: 			none;

}
 
 
 

#global_nav ul li a, #global_nav ul li a:visited{
 

	z-index: 			10;

	display: 			block;

	float: 				left;

	height: 			36px;

	overflow: 			hidden;

	color:				#d7eaee;

	font-size:			22px;

	position: 			relative;

	padding:			0 15px 6px 15px;
 

}
 
 
 

#global_nav ul li a:hover{
 

color:				#fefefe;
 

}
 

/* END OF global_nav ITEMS */
 
 

.clear { 														/* Clears all other floats */

	clear:				both;

}
 
 

#spacerContent_top {

	display:			block;

	margin:				0 auto 0 38px;

	height: 55px;

	width:				1000px;

	background-image:url(../images/pix.png);

	background-repeat:no-repeat;
 

}
 

#spacerContent_bottom {

	display:			block;

	min-height: 250px;

	width:				1000px;

	margin: 0 0 0 37px;

	background-image:url(../images/pix.png);

	background-repeat: no-repeat;

}
 
 

/*HORIZONTAL VERTICAL MootTools Stuff */
 
 

h3.section {

	margin-top: 1em;

}
 

#vertical_slide, #horizontal_slide {

	background: #D0C8C8;

	color: #8A7575;

	padding: 10px;

	border: 5px solid #F3F1F1;

	font-weight: bold;

}
 

div.marginbottom {

	/* Since the Fx.Slide element resets margins, we set a margin on the above element */

	margin-bottom: 10px;

}
 

/* MOUSEENTER mooTools Stuff */
 

div.floated {

	width: 400px;

	float: left;

	margin-left: 1em;

}
 

div#myElement {

	width: 100px;

	height: 100px;

	border: 1px solid black;

	background-color: #f9f9f9;

	float: left;

}
 

div#myOtherElement {

	width: 200px;

	height: 20px;

	overflow: hidden;

	border: 1px solid black;

	background-color: #f9f9f9;

}
 

div#myOtherElement span, div#myOtherElement a {

	display: block;

	padding: 0 3px;

}
 
 

div#myOtherElement a:hover {

	background: #f5f5f5;

}
 
 

/* SIDEBAR STUFF */
 

#sidebar{

	float:				right;

	display:			block;

	width:				225px;

	height:				auto;

	display:			inline;

	margin: -35px -30px 0 0;

	background-image:url(../images/transback-67.png);

}
 
 

#sidebar_content{

	display:			block;

	width:				181px;

	height:				auto;

	padding: 25px 25px 35px 20px;
 

}
 
 

#sidebar_content ul{

	margin:				0 0 20px 15px;
 

}
 

#sidebar_content h3{

	margin:				16px 0 0 0;

	font-size:18px;

}
 

#sidebar_content a, #sidebar_content a:visited{

	border-bottom:			1px dotted #24758a;

	text-decoration:		none;

	font-weight:			bold;

	color:				#c1e2e8;

	font-size:16px;

}
 

#sidebar_content a:hover{

	color:				#daf1f5;

	border-bottom:			1px dotted #509cb0;

}
 

#sidebar_content p.about_me{

	text-align:			left;

}
 

#sidebar_content p.about_me a{

	float:				right;

	display:			block;

	font-weight:			normal;

}
 

#sidebar_content p {

	color: #6298a1;

	font-size:16px;
 

}
 
 

/* MISC STUFF */

.cool {

	PADDING-RIGHT: 12px;

	PADDING-LEFT: 12px;

	FONT-SIZE: 12px;

	BACKGROUND: #f8f8f8;

	PADDING-BOTTOM: 12px;

	MARGIN: auto;

	VERTICAL-ALIGN: middle;

	COLOR: #666;

	LINE-HEIGHT: 48px;

	PADDING-TOP: 12px;

	TEXT-DECORATION: none

}

.cool:hover {

	BACKGROUND: none transparent scroll repeat 0% 0%;

	COLOR: #000

}
 
 

small {

	font-style:			italic;

	font-size:			12px;

	line-height: 			1.5em;

	font-weight:			bold;

	color:				#83b2ba;

}
 
 
 
 
 
 

/* BELOW IS PASTE FROM OLDER STYLESHEET - some not used */
 
 

/*

background-color:#23404d; --- color

*/
 

/*original font color: 83b2ba,   688e94*/
 

/* General */

a.read-more, a.read-more:visited{
 

	color:				#486571; /*#9fd689, 405b66, 1f9bcd, 32474f, 385059*/

	display:			block;

	font-size:			18px;

	letter-spacing:			-0.04em;

	width:				131px;

	text-align:			center;

	height:				63px;

	padding:			15px 12px 11px 0;

	margin:				10px 0 20px 0;

	float:				right;

	clear:				both;

	background-image:url(../images/readmoreback-newblue4.png);

	background-repeat: no-repeat;

}
 
 
 
 

/* DIV IDs */
 
 
 

#foot_bar{
 

	display:			block;

	height:				auto;

	width:				100%;

	background:			#0e1720 repeat-x center; 
 

}
 

#top_header_center{
 

	display:			block;

	width:				950px;

	height:				65px;

	margin:				0 auto;

	background:			#0e1720;

}
 

#global_nav2 {										/* Used for top of page navigation */
 

	position:			relative;

	float:				right; 

	height: 			36px; 

	width: 				600px; 

	padding: 			14px 0 0 0; 

	margin: 			0; 

} 
 
 
 
 

	

/*

position:			relative;
 

float:				right; 
 

height: 			45px; 
 

width: 				450px;
 

margin: 			140px -275px 0 0;
 

background-image:url(../../images/transback-47.png);
 
 

} */
 
 

#header_section_border {

	display:			block;

	margin:				0 auto;

	width:				1000px;

	background-image:url(../images/pix.png)
 

}
 
 

/* DIV CLASSES - USED (CALLED) MORE THAN ONCE VS ids ONLY CALLED ONCE */
 

.entry img{

	padding:			6px;

	border:				#d9e7eb 1px solid;

	background:			#fff;

	max-width:			550px;
 

}
 
 
 

.info_old1 {															/* Section for paintings / descriptions */

	float:				left;

	width:				518px;

	display:			block;

	min-height:			220px;

	margin:				20px 22px 0 35px;

	font-weight:		normal;

	padding:			20px;

	position:			relative;
 

}
 

.info_top {															/* Section for paintings / descriptions */

	float:				left;

	width:				518px;

	display:			block;

	min-height:			220px;

	margin:				-120px 22px 0 35px;

	font-weight:		normal;

	padding:			20px;

	position:			relative;
 

}
 

.info small.date_added, .info_top small.date_added{

	display:			block;

	background: 		url('images/b07V12_small_bk.jpg') no-repeat top center;

	padding:			8px;

	margin:				8px 0 8px 230px;

}
 

.info p.tags{

	display:			block;

	width:				541px;

	padding:			8px;

	margin:				8px 0 8px 0;
 

}
 

.info h2, .info_top h2 {											/* Font used for title of Paintings */

	font-size: 			1.8em;

	color:				#1f2d3d;		

	margin: 			0 0 2px 0;

	padding: 			6px 0 3px 0;

	line-height:			28px;
 

}
 

.info small.date, .info_top small.date{									/* Font used for date of Paintings */

	display:			block;

	padding:			8px;

	margin:				8px 0 8px 230px;

}
 
 

.leftThumb {

	border: 7px solid #405b66;

	float:				left;

	margin:				5px 15px 5px 0;

}
 

.alignleft{

	float:				left;

	margin:				5px 15px 5px 0;
 

}
 
 
 
 
 

/* CORRECTIONS */
 

.info{

	float:				left;

	width:				600px;

	display:			block;

	min-height:			220px;

	margin:				20px 22px 0 15px;

	font-weight:		normal;

	padding:			20px;

	position:			relative;

}
 
 
 

/* TEST 2 */
 

#listholder{

	display:			block;

	float:				left;

	width:				746px;

	height:				auto;

	margin:				0 0 0 50px;

	background-image:url(../images/shadowedpaper-745.png);

}
 

#beef{

	display:			block;

	margin:				0 auto;

	height:				auto;

	width:				1000px;

}
 

.paintlist{

	float:				left;

	width:				600px;

	display:			block;

	min-height:			220px;

	margin:				20px 22px 0 30px;

	font-weight:		normal;

	padding:			20px;

	position:			relative;

}
 
 

#container_sbar{

	float:				right;

	display:			block;

	width:				200px;

	height:				auto;

	display:			inline;

	margin: 0 3px 0 0;

	background-image:url(../images/transback-47.png);

}
 

#sbarMeat{

	display:			block;

	width:				150px;

	height:				auto;

	background-image:url(../images/transback-47.png);

}
 
 

#NEWcontent{

	display:			block;

	float:				left;

	width:				746px;

	height:				auto;

	margin:				0 0 0 65px;

	background-image:url(../images/pix.png);
 

}

Open in new window

0
Question by:cinchdesign
    11 Comments
     
    LVL 5

    Expert Comment

    by:sscotti
    Do you have the js files that go with it or a place to get them?  Moo Tools?
    0
     
    LVL 9

    Expert Comment

    by:knonie
    While running your HTML and CSS, I can't see any extra space after footer. The bottom-most area of the page is footer bar, i.e. a thin bar in dark-blue color.

    Since I'm running that page without actual JS files, so perhaps, I'm not able to see what you see at your end.

    If possible, attach the HTML, CSS, and JS files, or simply, upload that page somewhere online for us to view.

    :-)
    0
     

    Author Comment

    by:cinchdesign
    Sorry about that. Didnt think you would need any other code/file (wasnt thinking)

    Ive uploaded the site to FreeWebTown.com. The address is:

    http://www.freewebtown.com/cinchdesign/newweb/index.html

    Please note that I havent uploaded the pictures and I have changed the newstyle.css code for html to

    html {background-color: #ffffff;}

    so that you can see the extra space past the footer (which is the dark blue line at the bottom)

    Thanks for your help. Please let me know if you need anything else. (My response will be quicker, sorry, I was away over the weekend.)
    0
     
    LVL 42

    Accepted Solution

    by:
    It's caused by the #OverlayContainer element. It's given a very large height in the "position" function in the "overlay.js" file. It seems that window.getScrollSize().y is returning a number larger than it should.
    0
     
    LVL 9

    Expert Comment

    by:knonie
    Somewhere near the end of your HTML code,

    Below:
    <!-- End Footer -->
    there's a div having "height" value of 3811px.

    If you decrease this value, like to 300px, that problem is gone.

    I didn't observe any other disturbance in page structure due to this, so I assume it is safe to do this change.

    :-)
    0
     

    Author Comment

    by:cinchdesign
    @Kravimir, how would i go about fixing this issue? The overlay.js is not mine, and other people who have used it dont seem to have a problem.

    It may seem like knonie has an easier fix (at least for me...)

    @knonie: Where is this div that has the height of 3811px? What div did you change to 300px?  I know you said it was below the <!-- End Footer--> but I cant seem to find it. Was it in the newstyle.css file or the HTML fille or another file?

    Thanks for the help.
    0
     
    LVL 42

    Expert Comment

    by:David S.
    knonie and I are talking about the same thing.

    The way to fix this would involve a whole lot of debugging work to find out what's really causing this.
    0
     
    LVL 9

    Assisted Solution

    by:knonie
    That height is 3811 in my case, and my be different at your end.

    I'm sorry, now I realized that you cannot change it directly, because that code is not present in your HTML.
    [It only appears in your source if you save your page from browser]

    The div I mentioned is generated by the script written in overlay.js, as mentioned by Kravimir.

    As you said that many people use this file without this error, means, there might be some other right way to apply overlay effect to your page. You might have done some mistake while applying this on your site.

    Please refer to the site from where you got this script, apply it on your test page, and see if that blank-space error is still there on new page.

    :-)
    0
     

    Author Comment

    by:cinchdesign
    You both are definitely correct. I changed the 'true' value to 'false' in the useOverlay within the multibox effect (see code below) and the page looked as designed. However, I lose that function, which I would like to have.

     What I dont get, is that how a site like:

    http://files.psandl.com/psl/promo/

    can use the same multibox effect without any problems with the page layout. Looking at the source code it looks like they are the same files.

    I tired downloading the overlay from the above mentioned site but it still didnt work and caused the extra space.

    Any advice on getting the overlay to work? (im not good with java so I dont think I'd be able to re-write it) Or should I just disable that feature?




    <!-- MULTIBOX EFFECT -->
    
    <script type="text/javascript">
    
    //call multiBox
    
    window.addEvent('domready', function(){
    
    if($$('.mb').length > 0)//only triggered if 'mb' class found on page
    
    {
    
    var initMultiBox = new multiBox('mb', {
    
    descClassName: 'multiBoxDesc',//the class name of the description divs
    
    path: './Files/',//path to mp3 and flv players
    
    useOverlay: false,//use a semi-transparent background. default: false;
    
    maxWidth: false,//max width (set to false to disable)
    
    maxHeight: false,//max height (set to false to disable)
    
    addDownload: false,//do you want the files to be downloadable?
    
    pathToDownloadScript: './Scripts/forceDownload.asp',//if above is true, specify download script
    
    addRollover: false,//add rollover fade to each multibox link
    
    addOverlayIcon: false,//adds overlay icons to images within multibox links
    
    addChain: true,//cycle through all images fading them out then in
    
    recalcTop: true//subtract the height of controls panel from top position
    
    });
    
    };
    
    });
    
    </script> 
    

    Open in new window

    0
     
    LVL 9

    Expert Comment

    by:knonie
    After spending around 2 hours on your script, and the site you sent, I wasn't able to figure out...

    Then I thought of creating a new test page from the original script by the author, and I got that from this link:
    http://www.phatfusion.net/multibox/

    And to tell you the most interesting thing of the day, just look at the bottom of that page...
    **That blank space is even present there on author's page...**
    :-D :-D :-D

    Means, there are still some minor tweaks that people do to eliminate this extra space...

    Perhaps, we should notify author of that script about it. His email is written in overlay.js

    Or, look for some other script for your site...

    :-)
    0
     

    Author Comment

    by:cinchdesign
    Ok. Thanks for your help. Both of you.

    For now until I can find something more stable Ill just disable the overlay script.

    Thanks again!
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    This video teaches viewers about errors in exception handling.
    This tutorial will introduce the viewer to VisualVM for the Java platform application. This video explains an example program and covers the Overview, Monitor, and Heap Dump tabs.

    680 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    33 Experts available now in Live!

    Get 1:1 Help Now