troubleshooting Question

CSS Gap Problem in Web Page Layout

Avatar of popcornguy
popcornguy asked on
Web DevelopmentCSSHTML
15 Comments1 Solution650 ViewsLast Modified:
I am trying to figure out a way to remove the gap between my nav bar and my top header image. There is also a strip of white at the bottom of the page, possibly related, but I'm not sure.

Attached below is the CSS, HTML and here is a link to the page

http://www.iwebit.net/meninhd/index2.html

------CSS------
<style> 
"utf-8";
/* CSS Document */
 
/* RESETS & BASIC PAGE SETUP */
* { margin:0; padding:0; }
 
body {
	font: 62-5% Arial, Helvetica, sans-serif, sans-serif;
	background-repeat: repeat;
	background-position: left top;
	background:url(http://www.iwebit.net/meninhd/images/new-bg.jpg) top left repeat;
	 
}
html { overflow-y: scroll; }
 
ul { list-style: none inside; }
p { font-size: 1.1em; line-height:1.1em; margin-bottom: 1.1em; }
	p.metadata { background-color:#99CCCC; padding:3px; }
a {outline:none; }
a img {border:none; 
}
 
h1 {
  	font-family:Georgia, serif;
	font-size:1.8em;
	font-weight:normal;
	color:#993366;
}	
 
/* END RESET */
 
/* TOOLBOX */
.floatleft {float:left; }
.floatright {float:right; }
.clear {clear:both; }
 
/* END TOOLBOX */
 
/* STRUCTURE AND STUFF */
 
#container {margin:0 auto; width:955px;}
 
#page-wrap {
	width:955px;
	margin: 0 auto;
	background: url(http://www.iwebit.net/meninhd/images/content-bg.jpg) repeat-y;
	position: relative;
	clear: both;
}
 
 	#main-content {
	font-family:Arial, Helvetica, sans-serif;
	font-size:9pt;
	padding:30px 40px 30px 40px;
	}
	
	#sidebar { 
	width: 190px;
	float:right;
	padding:0 20px 0 20px;
	
}	
	
	#articlearea {
	width:610 px;
	float:left;
}
	
 
 
ul#nav {
position: relative; 
margin:0;
padding:0;
width: 955px;
}
 
ul#nav li {
display:inline;
}
 
ul#nav li a {
display:block;
height:171 px;
text-indent: -9999px;
float:left;
height:57px;
}
 
	ul#nav li.home a {
	width: 121px;
	background:url(http://www.iwebit.net/meninhd/images/nav-home.jpg) bottom center no-repeat;
 
	}
 
	ul#nav li.calendar a {
	width: 135px;
	background:url(http://www.iwebit.net/meninhd/images/nav-calendar.jpg) bottom center no-repeat;
 
	}
 
	ul#nav li.vision a {
	width: 99px;
	background:url(http://www.iwebit.net/meninhd/images/nav-vision.jpg) bottom center no-repeat;
 
	}
 
	ul#nav li.committee a {
	width: 165px;
	background:url(http://www.iwebit.net/meninhd/images/nav-committee.jpg) bottom center no-repeat;
 
	}
 
	ul#nav li.contact a {
	width: 129px;
	background:url(http://www.iwebit.net/meninhd/images/nav-contact.jpg) bottom center no-repeat;
 
	}
 
	ul#nav li.connect a {
	width: 126px;
	background:url(http://www.iwebit.net/meninhd/images/nav-connect.jpg) bottom center no-repeat;
 
	}
 
	ul#nav li.conference a {
	width: 180px;
	background:url(http://www.iwebit.net/meninhd/images/nav-conference.jpg) bottom center no-repeat;
 
	}
 
	#nav li a:hover {
	background-position: center center !important;
	}
 
#footer { 
  min-height: 48px; 
  background:url(http://www.iwebit.net/meninhd/images/footer-bg.jpg) no-repeat;
}
 
.contentHead {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000066;
}
 	
	
/* END STRUCTURE  */
 
------HTML------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Men In His Design</title>
<link href="style/meninhdStyle.css" rel="stylesheet" type="text/css" />
</style>
</head>
 
<body topmargin="0">
	
  <div id="container">
  
  	<div id="page-wrap">
    
    <img src="http://www.iwebit.net/meninhd/images/header.jpg" width="955" height="200" alt="Men In His Design Header"></p>
    
    	<ul id="nav">
    
   		  <li class="home"><a href="#">home</a></li>
 
        	<li class="calendar"><a href="#">calendar</a></li>
        	<li class="vision"><a href="#">vision</a></li>
        	<li class="committee"><a href="#">committee</a></li>
        	<li class="contact"><a href="#">contact</a></li>
        	<li class="connect"><a href="#">connect</a></li>
        	<li class="conference"><a href="#">conference</a></li>
 
    
   	</ul>
    
    <div id="main-content">
    	<div id="article-area">
    <h1>Next Conference: Featuring Stu Weber</h1>
    <p class="metadata">Date: April 23rd-25th Location: Woodleaf Conference Center</p>
    
    <div id="events">
        
        </div>
    
    
    <div id="sidebar">
        <img src="images/event1.jpg" alt="Father/Son Camping Trip" border="1">
    	</div>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada mollis dictum. Phasellus sit amet libero lorem, in eleifend orci. Proin molestie ligula at urna viverra porta a bibendum turpis. Duis id cursus risus. Quisque eu adipiscing leo. Nam eget elit nec ante pretium interdum sed vitae sapien. Fusce diam sapien, condimentum non elementum eget, feugiat sed metus. Morbi egestas enim ac libero elementum non vehicula felis tristique. Nam eu ultricies ante. Donec quis ipsum et magna egestas accumsan. Nunc volutpat enim quis magna viverra hendrerit. Pellentesque ac enim nec magna scelerisque eleifend ut sed mi. Nunc ac volutpat sapien. Cras dignissim, turpis non tincidunt porttitor, nisi leo. </p>
   	  </div>
 
        <div id="events">
        
        </div>
        
    
    </div>
    <div class="clear"></div>
 
	<div id="footer">
    </div>
 
</div>
</div>
 
</body>
</html>
-------END --------
ASKER CERTIFIED SOLUTION
frankky

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 15 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 15 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros