Link to home
Start Free TrialLog in
Avatar of cinchdesign
cinchdesign

asked on

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

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

Avatar of sscotti
sscotti
Flag of United States of America image

Do you have the js files that go with it or a place to get them?  Moo Tools?
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.

:-)
Avatar of cinchdesign
cinchdesign

ASKER

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.)
ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.

:-)
@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.
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.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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

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

:-)
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!