a new css height 100% issue

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

Below is a screen shot of the blank space below the text and above the footer.

HTML:

HTML Code:

<!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"><!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6styles.css"><![endif]-->

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

<!-- Start visuallightbox.com HEAD section -->
 <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>
<!-- End visuallightbox.com HEAD section -->

</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><!-- Start visuallightbox.com BODY section id=1 -->
<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>
<!-- End visuallightbox.com BODY section --></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">   
       &nbsp; <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></div>
</body></html>

CSS:

Code:

#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;
}

**coothead** · 02-22-2011, 11:48 AM

Hi there mlegg,

if you don't want that white space then remove the highlighted attribute here...

Code:


#container {
    position:relative;
    width:960px;
    height:100%;
    margin:auto;
    font-family: andalus; 
    color:#990000;
    font-weight: bold;
    background-color:#FFFFFF;
 }

coothead

Thread: a new css height 100% issue

Thread Tools

Search Thread

a new css height 100% issue

Bookmarks

Bookmarks

Posting Permissions