Needing helpful eyes to spot the problem!

Hi there…

I have designed a simple template for a site that I am building. Since I do not have enough content I am serving just individual pages on Face Book. So I have commented out the nav area. What is perplexing to me is that I cannot find what is causing a 50-75 px gap between my header and page. I may just be suffering temporary drain bramage. I cannot seem to see the problem. I need helpful eyes to spot what it is that I am missing.

Thanks for your support! Here is the code and link…

Site Link: http://www.newmanexpressions.com/sandbox/Billy/Articles/index.html

HTML


<!DOCTYPE html>
<html lang="en">
<head>

<title>New Man Expressions</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="robots" content="index, follow">
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css-main/styleSheet.css">
<link rel="stylesheet" type="text/css" href="css-main/Akiane/styleSheet.css">
<body>

<div id="container">

	<div id="header">
		<h1><a href="index.html" title="New Man Expressions">New Man Expressions<span>&nbsp;
		</span></a>
		</h1>
	<!-- "header" --></div>
	<div id="pageWrapper">
	
		<!-- <div id="navArea">
			<p id="instructions">Choose a selection to the right to open our media sharer or choose a topic. . .</p>
			<div id="topNav">
				
				<ul>
					<li><a class="vision" href="#"><span>Vision</span></a></li>
					<li><a class="stream" href="#"><span>Downloads</span></a></li>
					<li><a class="social" href="#"><span>Socialize</span></a></li>
					<li><a class="partner" href="#"><span>Partnership</span></a></li>
					<li><a class="tools" href="#"><span>Tools</span></a></li>
					<li><a class="mail" href="#"><span>E Mail Us</span></a></li>
				</ul>
			
	        </div>
	
			
				<ul id="navTab">
					<li><a href="#"><span>MEDIA</span></a></li>
					<li><a href="#"><span>SERVICES</span></a></li>
					
				</ul>
			
		
	    </div> -->
		
		<div id="page">
			
				
				<div id="intro1BoxTop"></div>
				
				<div id="intro1BoxContainer">
				
					<div id="AkianeProfile">
						<h2>Akiane</h2>
						
						<img id="profilePict" src="css-Main/Akiane/AkianePhoto.jpg" alt="Young Akiane" width="200" height="200" />
						
						<p>Inducted into the Richest Kids-Entrepreneurs of America, Kids Hall of Fame & World Council for Gifted and Talented Children</p>
						
						<a href ="#"><img id="galleryButton" src="css-Main/Akiane/gallaryButton.jpg" alt="See the Gallery of Akiane" width="200" height="65" /></a>
					
					</div>
					
					<div id="imageViewer">
					
						<span id="photoIcon"></span>
						
						<h3>Celebrated Images</h3>
						
						<iframe name="mainEvent" src="css-Main/Akiane/Prince.html" width="370" height="385" frameborder="0" scrolling="no" ALLOWTRANSPARENCY="true"></iframe>
						
						<span id="clickIcon"></span>
						
						<div id="thumbnailContainer">
							<a href ="css-Main/Akiane/Prince.html" target="mainEvent"><img class="thumbnails" src="css-Main/Akiane/thumbnail-1.jpg" alt="Prince of Peace" width="70" height="70" /></a>
							<a href ="css-Main/Akiane/Youth.html" target="mainEvent"><img class="thumbnails" src="css-Main/Akiane/thumbnail-2.jpg" alt="Prince of Peace" width="70" height="70" /></a>
							<a href ="css-Main/Akiane/Hand.html" target="mainEvent"><img class="thumbnails" src="css-Main/Akiane/thumbnail-3.jpg" alt="Prince of Peace" width="70" height="70" /></a>
							<a href ="css-Main/Akiane/Boy.html" target="mainEvent"><img class="thumbnails" src="css-Main/Akiane/thumbnail-4.jpg" alt="Prince of Peace" width="70" height="70" /></a>
							<a href ="css-Main/Akiane/Horse.html" target="mainEvent"><img class="thumbnails" src="css-Main/Akiane/thumbnail-5.jpg" alt="Prince of Peace" width="70" height="70" /></a>
						</div>

					</div>
					
					<div id="AkianeText">
						<h4>Child Prodigy Painter</h4>
						<p>Does the word child prodigy have real meaning these days? Many think that it's just extraordinary talent, almost hiding it's deeper more prophetic resonance.</p>
						<p>I have come across the path of a young woman with blossoming personality named Akiane. Many people have wondered at the beautiful expressions this young passionate child prodigy has painted.</p>
						<p>At the moment she entered this world her mother saw the very gentle yet vehement nature of creation while her water born baby grasped with delicate fingers her pulsing umbilical cord in the presence of her father. </p>
						<p>Akiane captures the essence of life with prophetic cue to unveiling the greater mysteries as she finds her identity in the Prince of Peace.</p>
					</div>
				</div>
				
				<div id="intro1BoxBottom"></div>
			
			<!-- "intro1BoxTop" --></div>
			
			
		<!-- "page" --></div>
		
	<!-- "pageWrapper"--></div>
	<div id="footer"></div>




<!-- "container" --></div>
</body>
</html>

CSS

* { margin:0; padding:0;}


body {background: #000;
	font:normal 85%/120% arial, verdana, helvetica, sans-serif;
	color:#333;
}

#container {width:995px;}

#header {background:url(header.png) 1px -20px  no-repeat;
	height:54px;
	width:995px;
	position:relative;
}

h1 {font-size:150%;
	padding-top:20px;
}

h1 a {text-decoration:none;
	cursor:pointer;
	color:#ccc;
}

h1 span {display:block;
	background:url(header.png) 1px -20px no-repeat;
	width:995px;
	height:54px;
	position:absolute; top:0; left:0;
}


#pageWrapper{background:url(pageBG.gif) repeat-y 0 0;

}


#navArea{background:url(navBar.gif) repeat-x right bottom;
    width:969px;
	height:107px;
	margin-left:12px;
}

#instructions{display:block; float:left; padding:20px 0 0 20px;}

#topNav {width:328px;
	height:38px;
	list-style:none;
	float:right;
	margin-right:10px;
	background:transparent;
	padding-top: 9px;
}
#topNav  li {display:inline;
	float:left;
}

#topNav  a {background:url(navIcons.gif) no-repeat 0 0;
	display:block;
	width:48px;
	height:38px;
	vertical-align:middle;
	text-decoration:none;
	color:#333;
}

#topNav  a.vision {background-position:0 0;}


#topNav  a.stream {background-position: -40px 0;}


#topNav  a.social {background-position:-82px 0;}


#topNav  a.partner {background-position:-125px 0;}

#topNav  a.tools{background-position:-173px 0;}

#topNav  a.mail {background-position:-221px 0;}





/* DISPLAY TEXT TO Left OF ICONS */
#topNav a span {display: none;}
#topNav a:hover span {display: block;
	position: absolute;
	top:75px;
	left:550px;
	z-index:100;
	font-weight:bold;
}

#topNav a:hover span.instructions {display: block;
	position: absolute;
	top:75px;
	left:200px;
	z-index:100;
	font-weight:bold;
}


#navTab{
	width:700px;
    height:59px;
    line-height:normal;
	padding:1px 0 0 21px;
	clear:both;
}


#navTab li {display:inline;}

#navTab li a {
    float:left;
    text-decoration:none;
}

#navTab li a span {
    float:left;
    display:block;
    width:148px;
    background:url(navTab.gif) no-repeat left top;
	padding:15px 0px 17px 0px;
    text-align: center;
    font-size:125%;
	font-weight:bold;
    color:#FFF;}

#navTab li a:hover span {background-position:0 -59px;}




#page{width:969px;
	height:777px;
	margin-left:12px;
	}
	
#footer {background:url(footer.gif)no-repeat top left;
	width: 995px;
	height:55px;
}

If I’ve understood what you’re asking, then the problem seems to be caused by the margin-top: 50px on the empty div <div id=“intro1BoxTop”></div>. :slight_smile:

Thanks again man. I was looking at that for the longest time and I got it fixed. I have not dug into my code in a while and it is hard to readjusted. Thanks again.