a new css height 100% issue [Archive]

mlegg

02-22-2011, 12:51 AM

I wanted to make another thread about this because this is on a different site than my other problem thread. http://tinyurl.com/4tbyhfn is the site in question now.

I used the height:100%; that you helped me fix my other site with but it didn't work for me now. :confused: Below is a screen shot of the blank space below the text and above the footer.

http://i53.tinypic.com/9ghn3o.png

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>

<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>The Jarvis Center of Portsmouth, NH</title>
<link rel="stylesheet" type="text/css" href="jarvis-styles.css">

<style type="text/css">
div.c2 {text-align: center}
img.c1 {border:0;width:88px;height:31px;padding:5px;}
li.c1 {border:none}
</style>


<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="engine/css/vlightbox2.css" type="text/css" />
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
<script src="engine/js/vlbdata.js" type="text/javascript"></script>


</head><body>
<
div id="mainPicture"></div>
<div id="container">
<div id="nav1">
<ul>
<li id="current" class="c1"><a href="index.html">Home</a></li>
<li><a href="amenities.html">Amenities</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="contact.html">Contact & Map</a></li>
</ul></div>

<div class="one">

<p>Elegant and affordable functions are always a success at the Jarvis
Center in Portsmouth, New Hampshire. The Jarvis Center has everything
you are looking for in a complete function center. From seating capacity
of 250 to 325 people, and one of the area's largest dance floors, to
plenty of parking and convenient access to Route One and Interstate 95,
the Jarvis Center can cater to events of all sizes.</p>

<table border="0" cellpadding="20">
<tr>
<th>
<div id="vlightbox1">
<a class="vlightbox1" href="images/Jarvis_room_Lg.jpg" title="Jarvis_room"><img src="images/jarvis_room.jpg" alt="Jarvis_room"/></a>
<a class="vlb" style="display:none" href="http://visuallightbox.com">jQuery Window Popup by VisualLightBox.com v4.7</a>
</div>
</th>
<th><p>The expansive picture windows are elegantly framed and draped,
provide the backdrop for a special wedding reception, rehearsal dinner,
corporate meeting or conference, large reception or any function you can
imagine. There is plenty of room for theater style conference set-ups,
stand-up receptions, or sit-down dinners. The Jarvis Center will make
the proper impression, no matter what your objective.</p>

Let the Jarvis Center host your next function or reception. We will
be happy to set up the room to your exact requirements. See for yourself
just how special the Jarvis Center can be for your next function. </p>

</th>
</tr>
</table>

<p>For an appointment and more information, please call (603) 436-2943.</p>

<div style="clear:both"></div>
</div></div>

<div id="footer">Copyright © The Jarvis Center | <a href="mailto:info@thejarviscenterportsmouth.com">E-Mail</a></div>
<div class="c2" style="margin:5px;"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88">
  <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></div>
</body></html>

CSS:

#mainPicture {
height:250px;
width:960px;
margin:auto;
background-image:url(images/Jarvis-Banner.gif);
}
html,body {
padding:0;
margin:0;
height:100%;
background-color:#990000;
background-position:center top; /* this positioning has been modified */
}
#container {
position:relative;
width:960px;
height:100%;
margin:auto;
font-family: andalus;
color:#990000;
font-weight: bold;
background-color:#FFFFFF;
}

div.one {
width:960px;
margin:auto;
padding:5px;
height:100%;
}
div.one a:link {
color :#00008B;
text-decoration:underline;
}
div.one a:visited {
color: #FF0000;
text-decoration : underline;
}

div.one a:hover {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

div.one a:active {
color : #FF0033;
background-color: #FFFFFF;
text-decoration: underline;
}

#nav1 {
background: transparent url(images/greek-key-maroon.jpg) repeat-x scroll left top;
height:40px;
margin:0 auto ;
width:960px;
text-align:center;
}

#nav1 ul {
display:table;
margin:0 auto;
padding:0;
list-style-type:none;
position:relative;
height:40px;
text-transform:uppercase;
font-size:13px;
font-family:Arial,sans-serif;
}

#nav1 ul li {
display:block;
float:left;
margin:0;
padding:0;
background:transparent url("images/hmenu.jpg") repeat-x top left;

}

#nav1 ul li a {
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:0px 20px ;
line-height:40px;
font-weight:bold;
}

#nav1 ul li a:hover {
color:#ffffff;
background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
}

iframe {padding: 20px; border:none; float: right;}

table a {
font-size:16px;
color:#000066;
text-decoration:underline;
}
table a:hover {
font-size:16px;
color:#fff;
background-color:#8B0000;
}

#footer {
width:960px;
margin:0 auto;
left:0;
bottom:0;
padding:5px 0;
font-family:sans-serif;
font-size:15px;
color:#990000;
text-align:center;
background-image:url(images/footer2.png);
}

#footer a:link {
color : #FF0000;
text-decoration:underline;
}

#footer a:visited {
color: #FF0000;
text-decoration : underline;
}

#footer a:hover {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

#footer a:active {
color : #FF0033;
background-color: #FFFFFF;
text-decoration: underline;
}