HTML / CSS Assistance

[webcrawler2050]

Evening,

I'm having some real issues with Joomla and it's templating system. Basically, I have a veyr large white gap under my footer (http://sheerclasscats.co.uk/index.php) and just cant find it - i've been looking at it for a few hours now, so a "second" set of eyes would go a miss.


The Template

<?php

if (!defined('e107_INIT')) { exit; }

// [multilanguage]

@include_once(e_THEME."Buzzness/languages/".e_LANGUAGE.".php");
@include_once(e_THEME."Buzzness/languages/English.php");

// [theme]
$themename = "Buzzness";
$themeversion = "1.0";
$themeauthor = "Design by:<a href='http://www.wearepc.co.uk'>MK5 Ltd</a>";
$themeemail = "http://www.wearepc.co.uk";
$themewebsite = "http://www.wearepc.co.uk";
$themedate = "10/09/2009";
$themeinfo = "";
define("STANDARDS_MODE", TRUE);
$xhtmlcompliant = false;
$csscompliant = false;
define("IMODE", "lite");
define("THEME_DISCLAIMER", "<br /><i>".LAN_THEME_1."</i>");

if(!defined("e_THEME")){ exit; }
$page=substr(strrchr($_SERVER['PHP_SELF'], "/"), 1);
define("e_PAGE", $page);

 

// [layout]

$layout = "_default";

$HEADER = "
<div id='wrapper'>
		<div id='header'>
			<h1><img src='".THEME."images/logo.jpg' width='556' height='130' alt='Maine coons Wiltshire'></h1>
		</div>
		<div id='headline'>
		<div id='photo'><div>
				<a href='/page.php?6'><img src='".THEME."images/top.jpg' width='250' height='116' alt='SheerClass'></a>
			</div>
			</div>
			<div id='search-news'>
				<h2>Search this site</h2>
				<form method='get' action='search.php'>
					<div><input type='text' name='q' value='' id='q' /></div>
					<div class='more'><input type='image' name='search' value='' src='".THEME."images/search.jpg'>
					<input type='hidden' name='r' value='0' /></div>
				</form>
				
				<h3 class='downcast'>MENU</h3>
				<div id='news-box'>
					<ul>
				  {SITELINKS}
				  </ul>
				</div>
			</div>
			<div class='clear'></div>
		</div>
		<div id='body'>
			<div id='body-left'>

";

$FOOTER = "
			</div>
			<div id='body-right'>
				{SETSTYLE=menu1}
				{MENU=1}
			</div>
			<div class='clear'></div>
		</div>
	</div>
	<div id='footer'>
<p><a href='page.php?7'>Maine Coon Cats</a> | <a href='page.php?6'>Maine Coon kittens for sale</a> | <a href='contact.php'>Maine Coons Wiltshire</a></p>
<p>Created by: <a href='http://www.wearepc.co.uk'>MK5 Limited</a> </p>
	</div>

";

$CUSTOMHEADER = "
<div id='wrapper'>
	<div id='header'>
<h1><img src='".THEME."images/logo.jpg' width='556' height='130' alt='Sheerclass'></h1>
		</div>
		<div id='headline'>
			<div id='photo'><div>
				<a href='/page.php?6'><img src='".THEME."images/top.jpg' width='250' height='116' alt='SheerClass'></a>
			</div></div>
			<div id='search-news'>
				<h2>Search this site</h2>
				<form method='get' action='search.php'>
					<div><input type='text' name='q' value='' id='q' /></div>
					<div class='more'><input type='image' name='search' value='' src='".THEME."images/search.jpg'>
					<input type='hidden' name='r' value='0' /></div>
				</form>
				
				<h3 class='downcast'>Menu</h3>
				<div id='news-box'>
					<ul>
				  {SITELINKS}
				  </ul>
				</div>
			</div>
			<div class='clear'></div>
		</div>
		<div id='body'>
			
";

$CUSTOMFOOTER = "

		</div>
	</div>
	<div id='footer'>
	<p><a href='page.php?7'>Maine Coon Cats</a> | <a href='page.php?6'>Maine Coon kittens for sale</a> | <a href='contact.php'>Maine Coons Wiltshire</a>
    <p>Created by: <a href='http://www.wearepc.co.uk'>MK5 Limited</a> </p>
	</div>

";

$CUSTOMPAGES = "comment.php upload.php pm.php?reply page.php forum.php forum_post.php forum_viewforum.php forum_viewtopic.php user.php submitnews.php download.php links.php stats.php usersettings.php signup.php";

$NEWSSTYLE = "
<h2><b>{NEWSTITLE}</b></h2>
<p class='smalltext'>{NEWSDATE=forum}</p>
<p>{NEWSBODY}<br />
{EXTENDED}</p>
<p align='left'>{NEWSCOMMENTS} | {NEWSCATEGORY}</p>
";

define("ICONSTYLE", "float: left; border:0");
define("COMMENTLINK", LAN_THEME_3);
define("COMMENTOFFSTRING", LAN_THEME_2);
define("PRE_EXTENDEDSTRING", "<br /><br />[ ");
define("EXTENDEDSTRING", LAN_THEME_4);
define("POST_EXTENDEDSTRING", " ]<br />");
define("TRACKBACKSTRING", LAN_THEME_5);
define("TRACKBACKBEFORESTRING", " | ");
define('ICONMAIL', 'email_16.png');
define('ICONPRINT', 'print_16.png');



// [linkstyle]

define('PRELINK', "");
define('POSTLINK', "");
define('LINKSTART', "<li><img src='".THEME."images/bullet2.gif'>&nbsp;&nbsp;");
define('LINKEND', "</li>");
define('LINKDISPLAY', 1);
define('LINKALIGN', "left");
define('LINKCLASS', "");

//	[tablestyle]
function tablestyle($caption, $text, $mode=""){
	global $style;
	if($style == "menu1"){
		echo "<div id='search-news'>
		<h3 class='downcast'>$caption</h3>
				<div id='news-box'>
				$text
				</div></div>";
}else if($style == "menu2"){
		echo "<h1>{$caption}&nbsp;&nbsp;</h1>
				</div>	
				<div class='post-footer'>{$text}
				</div>";
}else if($style == ""){
	echo "<h2><b>$caption</b></h2>
	<br />
	<p>$text</p>n";

	}
}


$COMMENTSTYLE = "
<div align='center'>
<table class='post-footer' style='width: 75%;'>
<tr>
<td style='width: 30%; vertical-align: top;'>
<p align='left'><span class='mediumtext'>{USERNAME}</span><br /><span class='smalltext'>{TIMEDATE}</span><br />{REPLY}<br /> {IPADDRESS}</td>
<td style='width: 70%; vertical-align: top;'>
<p align='left'><span class='mediumtext'>{COMMENT} {COMMENTEDIT}</span></td>
</tr>
</table>
</div><br />";


$CHATBOXSTYLE = "
<img src='".e_IMAGE."admin_images/chatbox_16.png' alt='' style='vertical-align: middle;' />
<b>{USERNAME}</b>
<div class='smalltext'>
{MESSAGE}
</div>
<br />";

?>

The Style Sheet

html, body, ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
img {
	border: 0;
}
a {
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.more {
	text-align: right;
}
.left {
	float: left;
}
.clear {
	clear: both;
}

body, h1, h3, form {
	font: 14px tahoma, arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #464545;
}

h2 {
	font: 16px tahoma, arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #464545;
}


body {
	background: url(images/header_bg.jpg) repeat-x;
	text-align: center;
}
#wrapper {
	text-align: left;
	margin: auto;
	width: 774px;
}


#header {
	height: 130px;
	position: absolute;
}
#header h1 {
	margin-top: 0px;
}
#header h1 img {
	display: block;
}
#nav {
	margin-top: 14px;
}
#nav img {
	float: left;
}

#headline {
	padding-top: 145px;
}

#photo {
	float: left;
	width: 255px;
}
#photo div {
	border: 0px solid #FF66cc;
	padding: 1px;
}
#photo img {
	display: block;
}
#photo2 {
	float: right;
	width: 255px;
}
#photo div {
	border: 1px solid #FF66cc;
	padding: -5px;
}
#photo img {
	display: block
}

#search-news {
	float: right;
	width: 140px;
}
#search-news div {
	padding: 3px 0;
	margin: 0;
}
#search-news #q {
	width: 140px;
	border: 1px solid #2a2a2a;
}
#search-news .downcast {
	background: #FF66CC;
	border-top: 1px solid #000000;
	padding: 3px 4px 4px 4px;
	margin: 0px 0 0 0;
}
#search-news h3 {
	background: url(images/bullet_letter.gif) no-repeat;
	padding-left: 15px;
	font-weight: bold;
	margin: 1em 0 0.4em 0;
}
#search-news p {
	padding-left: 15px;
	padding-right: 2px;
	margin: 0.1em 0;
}
a {
	font-weight: bold;
	color: #464545;
}

#body {
	padding-top: -15em;
	text-align: justify;
}

#body-left {
	float: left;
	width: 408px;
}
#body-right {
	float: right;
	width: 281px;
}

#body-left ul.plussbullets {
	margin-top: 45px;
	margin-left: 120px;
	padding: 0;
	font-weight: bold;
}
#body-left ul.plussbullets li {
	background: top left url(images/bullet_plus.gif) no-repeat;
	margin: 0 0 10px 0;
	padding: 0 0 0 25px;
}

#body h2, #body p {
	margin: 0.3em 0;
}

#body-right p {
	margin-right: 2em;
}

#body a.green {
	color: #00d2ff;
	font-weight: bold;
	text-decoration: underline;
}

#footer {
	color: #fff;
        link: #fff;
	background: #FF66cc;
	padding: 0px 0 0px 0;
	margin-top: 1em;
	font-weight: bold;
        font-color: #fff;
}
#footer p {
	margin: 0;
	padding: 0;
}

/* core styles */

.indent{ 
	margin: 15px;
 	padding: 0 0 0 42px;  	
  	background: #FAFAFA url(images/quote.gif) no-repeat 5px 10px !important; 
	background-position: 8px 10px;
	border: 1px solid #f2f2f2; 
	border-left: 3px solid #EC981F;  
	font-size: 9px;
}

.smalltext {
	font: 10px verdana, tahoma, arial, helvetica, sans-serif;
	color:#000;
}

body > .smalltext {
	font: 9px verdana, tahoma, arial, helvetica, sans-serif;
	color:#fff;
}

.smallblacktext {
	font: normal 7pt verdana, tahoma, arial, helvetica, sans-serif;
	color:#000;
}

.defaulttext {
	font: 11px verdana, tahoma, arial, helvetica, sans-serif;
	color:#000;
}

.mediumtext {
	font: 11px verdana, tahoma, arial, helvetica, sans-serif;
	color:#000;
}

.captiontext {
	font: 14px verdana, tahoma, arial, helvetica, sans-serif;
	color:#000;
}

.button{
	font-size: 11px;
	margin: 1px 0 0 0;
	color: #494949;
	background: white;
	border-top: 1px solid #D4D2CF;
	border-left: 1px solid #D4D2CF;
	border-bottom: 1px solid #868686;
	border-right: 1px solid #868686;
}

.tbox{
	font-size: 11px;
	margin: 1px 0 0 0;
	color: #494949;
	background: white;
	border-top: 1px solid #868686;
	border-left: 1px solid #868686;
	border-bottom: 1px solid #D4D2CF;
	border-right: 1px solid #D4D2CF;
}

.tbox .chatbox{
	font-size: 11px;
	margin: 1px 0 0 0;
	color: #494949;
	background: white;
	border-top: 1px solid #868686;
	border-left: 1px solid #868686;
	border-bottom: 1px solid #D4D2CF;
	border-right: 1px solid #D4D2CF;
	width: 90%;
}

.chatbox{
	width:160px;
}

.helpbox {
	border: 0px;
	background-color: transparent;
	color:#000;
	font: 9px tahoma, verdana, arial, helvetica, sans-serif;
}

.nextprev{

	color: #000;
	font: normal 9px verdana, tahoma, arial, helvetica, sans-serif;
	text-align:center;
	padding : 2px;

}

.np{

	color: #000;
	font: 9px verdana, tahoma, arial, helvetica, sans-serif;
	text-align:center;
	padding : 2px;
}

.spacer{
	padding: 2px 0px 2px 0px;
}

.border {
	border: #000 1px solid;
}

.bodytable {
	padding: 0px;
	font: 10px verdana, tahoma, arial, helvetica, sans-serif;
	color: #000;
}
table {
	margin-left: auto;
	margin-right: auto;
}

[Strzelecki]

You need to do something like:

html, body {
  height:100%;
}
/*  Add this to #wrapper */
#wrapper {
  height:100%;
  min-height:100%;
}
/* fix for IE */
html>body #wrapper {
  height:auto;
  min-height:auto
}
*/ then modify the footer*/
#footer {
  position:absolute;
  width:100%;
  bottom:0;
}

This will get the footer to 'stick' to the bottom of the viewpoint or browser window depending on the page content.
You can't 'find' what you're looking for as the whitespace isn't caused by an element, it just where the bottom of the document (body) ends. It the common 100% height problem.

[v0id]

http://www.cssstickyfooter.com/