I've got an issue where the sticky footer appears to be adding spacing above it, im not sure what is causing this, ive tried a few different sticky footer methods and all seem to have the same issue. It must be something wrong with the markup?
here is the site: http://www.adamtoms.co.uk/
Appreciate any help!
Kind Regards, Adam
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mk1/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mk1/css/general.css" type="text/css" />
</head>
<div id="wrap">
<div id="main">
<div id="container">
<body>
<div id="header" >
<div id="headleft">
<jdoc:include type="modules" name="logo" />
</div>
<div id="headright">
<div id="navr">
<div id="nav">
<jdoc:include type="modules" name="menu" />
</div>
</div>
</div>
</div>
<div id="breadcrumb">
<jdoc:include type="module" name="breadcrumb" />
</div><br />
<div id="content">
<jdoc:include type="component" name="content" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="slider" />
</div>
<div id="leftrightmain">
<div id="midleft">
<jdoc:include type="modules" name="left" />
</div>
<div id="midright">
<jdoc:include type="modules" name="right" /></div>
</div>
</body>
</div>
</div>
</div>
<footer>
<div id="footer"><jdoc:include type="modules" name="footer" />
<jdoc:include type="module" name="debug" />
</footer></div>
</html>
The following line in system.css on line 9 is causing your problem...
#main {
overflow: auto;
padding-bottom: 250px;
}
Make it this:
#main {
overflow: auto;
}
I suggest you look into learning how to use a debugging tool like chromes developer tools or firebug for firefox. This was very easy to find using chromes dev tools, when looking at HTML and hovering your mouse over an element. It highlights the element itself blue, any padding green and any margin orange. I highlighted over your footer first and saw now green or orange above the blue highlight indicating it wasn't your footer that had the problem. So I moved up and I found the div with ID main had a big block of green as I hovered over it indicating a large amount of padding. I looked at the CSS rules after clicking that div, saw padding: 250px, and unchecked it, and your problem was solved.
EDIT:
As NoLiver92 found below... You definite a -250px margin-top but then you reset it with margin 0 auto...
#footer {
position: relative;
background-image:url('../images/bg_footer1.png');
margin-top: -250px; /* negative value of footer height */
height: 250px;
clear:both;
width: auto;
margin: 0 auto;}
Make it this instead:
#footer {
position: relative;
background-image:url('../images/bg_footer1.png');
height: 250px;
clear:both;
width: auto;
margin: -250px auto 0 auto;}/* negative value of footer height */