2 replies [Last post]
allison7860
allison7860's picture
Offline
newbie
WA
Last seen: 6 years 9 weeks ago
WA
Timezone: GMT-7
Joined: 2013-09-07
Posts: 2
Points: 3

I've been stressing out why my coding has a gap between the content and the footer.. please look and give feedback!! Thanks -allison

http://www.allisons-help.com/tables1.html

Here is the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="HTML, Help, Tutorials, CSS, Javascript, Java, Website">
<meta name="description" content="Step by step on how to create your own website, learning HTML, CSS, Javascript, Java, and lots more. Also other fun tutorials on how to create your template.">
<meta name="author" content="Allison Powell">
<title>Allison's Help ~ Tables</title>
   <link href="Ahcss2.css" rel="stylesheet" />
</head>
 
<body>
   <div id="pagewrapper">
 
      <div id="header">
         <img src="http://www.allisons-help.com/allisonshelplogo.png" width="599px" height="104px">
 
		 <div id="nav">
		<ul><b>[</b>
		<li><a href="http://www.allisons-help.com/" title="Allison's Help">Home</a> <b>|</b></li>
		<li><a href="http://www.allisons-help.com/learn.html">Learn</a> <b>|</b></li>
		<li><a href="http://www.allisons-help.com/Goods/">Goods</a> <b>|</b></li>
		<li><a href="http://www.allisons-help.com/site.html">Site</a> <b>|</b></li>
		<li><a href="http://www.allisons-help.com/sitemap.html">Map</a> </li>
		<b>]</b>
		</ul>
         </div>  <!-- end of nav -->
		  </div>  <!-- end of header -->
 
 
      <div id="content">
       <div id="content2">
	   <div class="text">
	  <h1>Html</h1>
<h2>Tables</h2>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
 
 
 
</div> <!-- end of test -->
 
		<div id="footer">
 
 
</div> <!-- end of content2 -->
</div>  <!-- end of content -->
</div> <!-- end of footer -->
</div>  <!-- end of pagewrapper -->
 
</body>
</html>

Here is the css:

body    {font-family: 'Palatino Linotype', 'Times New Roman', serif;
       font-size: 14pt;
       background-color:#E3DEF3;
       color:#000000;
       padding:0;
	   margin:10px auto;
	   width:599px;}
 
 
	   a:link{text-decoration:underline; color:#aaa;}
	   a:visited{text-decoration:underline; color:#aaa;}
	   a:hover{text-decoration:underline; color:#aaa; background-color:#E3DEF3;}
 
 
	   #header{border-top:4px #000 dotted;}
 
	   #nav {background-color:#7092BE;
	   padding:4px;
	   text-align:center;
	   margin-top:-.50em;
	   border:1px #7092BE;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;}
 
		#pagewrapper {margin:0 auto; 
		height:100%;}
 
	   #content{background-image:url('http://www.allisons-help.com/allisonshelpcontenttop.png'); width:599px; 
	   height:173px;
	   	   border:1px #7092BE;
	   }
	   #content2 {
	   top:168px; 
	   width:599px;
	   position: absolute;}
 
	   .text {background-image:url('http://www.allisons-help.com/allisonshelpcontentmid.png');
	   margin-top:10px;   
	   padding-top:10px; 
	   padding-left:20px; 
	   padding-right:20px; 
	   line-height:16px;}
 
	   #footer {background-image:url('http://www.allisons-help.com/allisonshelpcontentbottom.png');
	   width:599px;
	   height:96px;
	   left:-2px;
		text-align:center;
		position: absolute;}
 
 
 
	   #nav a:link {color:#fff; }
 
	   #nav ul {margin:0;
                 padding:0;
				 list-style:none;}
 
	#nav li {display:inline;
				  margin:.50em;
                  padding:0;}
 
 
				  p {font-family: 'Palatino Linotype', 'Times New Roman', serif; font-size:14pt; color:#424242; padding:0px; margin-top:0px; }
 
b {font-family: 'Palatino Linotype', 'Times New Roman', serif; font-size:14pt; color:#8336b7; }
 
ul {font-family: 'Palatino Linotype', 'Times New Roman', serif; font-size:14pt; color:#424242; }
 
 
 
h1 {font-family: 'Palatino Linotype', 'Times New Roman', serif; color:#8336b7; letter-spacing:8px; text-align: center; padding:0px; margin:.5em; background-color:#7092BE; }
h2 {font-family: 'Palatino Linotype', 'Times New Roman', serif; color:#ddd; padding:0px; margin:3px; border-top-style:dotted; border-color:#e63a9f; }
h3 {font-family: 'Palatino Linotype', 'Times New Roman', serif; color:#8336b7; padding:0px; margin:0px; }
h4 {font-family: 'Palatino Linotype', 'Times New Roman', serif; color:#9BFAAE; padding:0px; margin:0px; background-color:#9bbac8; border-bottom-style:dotted; border-color:#e63a9f; }
 
.hexcolors {
  width:500px;
  font-family:Georgia; 
  color:#aaa;
  font-size:18px;
  text-align:center;
  letter-spacing:2px;
  background-color:#000;
  margin-left: auto;
  margin-right: auto;
}
 
.hexcolors th {
  background-color:#2a2a2a;
 
}
.hexcolors tr {
  margin:0px;
  padding:10px;
  border:#000;

allison7860
allison7860's picture
Offline
newbie
WA
Last seen: 6 years 9 weeks ago
WA
Timezone: GMT-7
Joined: 2013-09-07
Posts: 2
Points: 3

uhh try this link

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 50 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Multiple spacing issues

The spacing you're asking about is probably due to a top margin on the footer p element. Other spacing issues are due to using absolute positioning (a no-no for major layout elements) and an un-sane line height,e.g. .text {line-height: 16px;}.

Using fixed heights to support your background images for color and border is another opportunity for spacing error.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.