Resolved another height 100% problem [Archive]

mlegg

03-16-2011, 03:23 AM

So I made another site for my church and used a template from a previous site you helped me with. I have added Visual Slideshow to the bottom of the main/index page. The slideshow goes way down past the bottom footer. I did use the height:100%; in the container but apparently messed it up somehow. :confused:

the site: http://portsmouthgreekfestival.com/

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="language" content="english" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="google-site-verification" content=
"I4Ask6VXiDmcOHZoEGhMNu7K7mGb4VG28ZHmOGPF7SE" />

<title>Greek Festival Portsmouth</title>
<link rel="stylesheet" type="text/css" href="styles.css" />

<style type="text/css">
/*<![CDATA[*/
li.c1 {border:none}
/*]]>*/
</style>
<style type="text/css">

<style type="text/css">
/*<![CDATA[*/
div.c1 {clear:both}
/*]]>*/
</style>


<link rel="stylesheet" type="text/css" href="engine/css/slideshow.css" media="screen" />
<style type="text/css">.slideshow a#vlb{display:none}</style>
<script type="text/javascript" src="engine/js/mootools.js"></script>
<script type="text/javascript" src="engine/js/visualslideshow.js"></script>


</head>

<body>
<div id="container">
<div id="mainPicture"></div>
<div id="nav1">
<ul>
<li id="current" class="c1"><a href="index.html">Home</a></li>
<li><a href="program.html">Program Book</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="events.html">Schedule of Events</a></li>
<li><a href="directions.html">Directions</a></li>
</ul>
</div>
<div class="one">
<h3>The 2011 festival will be on Friday July 15 through July 17</h3>
<table>
<tr>
<td width="275px"><p><strong>Hours:</strong><br />
Friday 3:00 pm to 11:00 pm<br />
Saturday 11:00 pm to 11:00 pm<br />
Sunday 1:00 pm to 5:00 pm</p>
<p>Voluntary admission: $3.00 (children under 12 admitted free of charge)</p>
<p><strong>Dance to live Greek Music by Ellas</strong><br />
Friday and Saturday 6:30 pm to 11:00 pm and Sunday 1:30 to 6:00 pm</p>
<p><strong>D.J. by Meleti</strong><br />
Friday 5:30 - 6:30 pm, Saturday 12:00 - 6:30 pm, Sunday 1:00 - 6:30 pm</p>
<p>Greek Foods and specialties - Homemade Greek Pastries - Beer & Wine</p>
<p>Agora - Bakaliko and Gift Shop - Cafenion (Greek Coffee House) and more! (inside
the air conditioned Jarvis Hall)</p>
<p>Children's Activities - Friday evening - Saturday & Sunday</p>
</td>

<td width="675px">


<div id="show" class="slideshow">
<div class="slideshow-images">
<a href=""><img id="slide-0" src="data/images/greekfestivalcrowds.jpg" alt="GreekFestivalCrowds" title="GreekFestivalCrowds" /></a>
<a href=""><img id="slide-1" src="data/images/greekfestivalcrowds(2).jpg" alt="GreekFestivalCrowds(2)" title="GreekFestivalCrowds(2)" /></a>
<a href=""><img id="slide-2" src="data/images/greekfestivaldancing.jpg" alt="GreekFestivalDancing" title="GreekFestivalDancing" /></a>
<a href=""><img id="slide-3" src="data/images/greekfestivalentrance.jpg" alt="GreekFestivalEntrance" title="GreekFestivalEntrance" /></a>
<a href=""><img id="slide-4" src="data/images/greekfestivalfood.jpg" alt="GreekFestivalFood" title="GreekFestivalFood" /></a>
<a href=""><img id="slide-5" src="data/images/greekfestivalfood2.jpg" alt="GreekFestivalFood2" title="GreekFestivalFood2" /></a>
</div>
<div class="slideshow-thumbnails">
<ul>
<li><a href="#slide-0"><img src="data/thumbnails/greekfestivalcrowds.jpg" alt="GreekFestivalCrowds" /></a></li>
<li><a href="#slide-1"><img src="data/thumbnails/greekfestivalcrowds(2).jpg" alt="GreekFestivalCrowds(2)" /></a></li>
<li><a href="#slide-2"><img src="data/thumbnails/greekfestivaldancing.jpg" alt="GreekFestivalDancing" /></a></li>
<li><a href="#slide-3"><img src="data/thumbnails/greekfestivalentrance.jpg" alt="GreekFestivalEntrance" /></a></li>
<li><a href="#slide-4"><img src="data/thumbnails/greekfestivalfood.jpg" alt="GreekFestivalFood" /></a></li>
<li><a href="#slide-5"><img src="data/thumbnails/greekfestivalfood2.jpg" alt="GreekFestivalFood2" /></a></li>
</ul>
</div>
<a id="vlb" href="http://visualslideshow.com">DHTML Slideshow by VisualSlideshow.com v1.2</a>
</div>
</td>
</tr>
</table>

<div style="clear:both;">

<div class="c1"></div><br />
<div id="footer">
Copyright © PortsmouthGreekFestival.com
</div>
</div>
</body>
</html>

CSS:
html,body {
padding:0;
margin:0;
height:100%;
background-image:url(images/greekkey2.gif);
background-position:center top; /* this positioning has been modified */
}
#mainPicture {
height:250px;
width:960px;
background-image:url(images/GreekLogo.jpg);
}
#nav1 {
background: transparent url(images/footer.png) 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/footer.png") 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;
}
#container {
position:relative;
width:960px;
height:100%;
margin:auto;
font-family: sans-serif;color:navy;
background-color:#fff;
}
div.one {
padding: 15px;
min-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;
}
table a {
font-size:16px;
color:#000066;
text-decoration:underline;
}
table a:hover {
font-size:16px;
color:#fff;
background-color:#8B0000;
}

#footer {
position:absolute;
width:100%;
left:0;
bottom:0;
padding:5px 0;
font-family:sans-serif;
font-size:15px;
color:#036;
text-align:center;
background-image:url(images/footer.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;
}