No replies
eelucid8
eelucid8's picture
Offline
Regular
Chicago
Last seen: 3 years 28 weeks ago
Chicago
Timezone: GMT-6
Joined: 2011-10-26
Posts: 18
Points: 28

Hi there,
I'm using a sticky-footer technique at:
www.roadstardesign.com/dojo
(html at bottom of page, but check the link to see what I'm talking about)

Now, it works fine as long as the page is fully vertically expanded and there is no scroll bar present. BUT... when there is a scroll, the header and the footer both shift one pixel to the left, leaving a tall vertical white line to the right of the header, and a shorter vertical white line to the right of the footer. It's so small the client probably wouldn't notice, but personally, I can't deal with it this way. The style sheet in question is located at:
roadstardesign.com/dojo/templates/heionkihakutemplate/css/template.css
(css at bottom of page)

I've spent hours trying all the permutations of changing the height of #nudge, changing the negative margin-top of #footer, and the padding-bottom of #container. Nothing seems to solve this problem.

Any thoughts from the peanut gallery? Thanks in advance,
Bill

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

<!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">
<head>
  <base href="http://www.roadstardesign.com/dojo/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="dayton martial arts, dayton bujinkan, bujinkan    budo taijutsu, striking, grappling, weapons use" />
  <meta name="generator" content="Joomla! 1.7 - Open Source Content Management" />
  <title>The Dojo - Dayton Bujinkan Dojo</title>
  <link href="/dojo/templates/heionkihakutemplate/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <script src="/dojo/media/system/js/core.js" type="text/javascript"></script>
  <script src="/dojo/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/dojo/media/system/js/caption.js" type="text/javascript"></script>
 
<link rel="stylesheet" href="/dojo/templates/heionkihakutemplate/css/template.css" type="text/css" />
 
<link rel="stylesheet" href="/dojo/templates/heionkihakutemplate/css/navigation.css" type="text/css" />
 
<link rel="stylesheet" href="/dojo/templates/heionkihakutemplate/css/components.css" type="text/css" /></head>
<body>
 
<div id="wrap">
<div id="topnav">
<div class="moduletable_menu">
 
<ul class="menu">
<li class="item-103 current active parent"><a href="/dojo/" >The Dojo</a></li><li class="item-107 parent"><a href="/dojo/index.php/adult-training" >Adult Training</a></li><li class="item-111 parent"><a href="/dojo/index.php/classes" >Classes</a></li><li class="item-115"><a href="/dojo/index.php/questions-and-answers" >FAQ</a></li><li class="item-116 parent"><a href="/dojo/index.php/seminars" >Seminars</a></li><li class="item-117"><a href="/dojo/index.php/training-photos" >Photos</a></li><li class="item-118 parent"><a href="/dojo/index.php/contact-the-dojo" >Contact</a></li><li class="item-120"><a href="/dojo/index.php/links" >Links</a></li></ul>
</div>
</div><!-- end topnav div -->
 
<div id="banner">
</div><!-- end banner div -->
 
<div id="container">
<div id="leftcolumn">
 
<div class="moduletable_menu">
 
<ul class="menu">
<li class="item-125"><a href="/dojo/index.php/the-dojo/latest-news" >Latest News</a></li><li class="item-104"><a href="/dojo/index.php/the-dojo/our-history" >Our History</a></li><li class="item-105"><a href="/dojo/index.php/the-dojo/budo-mentors" >Budo Mentors</a></li><li class="item-106"><a href="/dojo/index.php/the-dojo/bujinkan-guidelines" >Bujinkan Guidelines</a></li></ul>
</div>
<div id="imagerevolver">
<div class="moduletable">
<div class="random-image">
<img src="/dojo/images/random/quo6.png" alt="quo6.png" width="261" height="333" /></div>		
</div>
</div><!-- end imagerevolver div -->
</div><!-- end leftcolumn div -->
 
<div id="mainsection">
 
<div id="system-message-container">
</div>
 
<div class="item-page">
<h2>The Dojo</h2>
<p>Welcome to the Dayton Bujinkan Dojo Martial Arts School website. This website is designed to provide you with information about martial arts taught at the Dayton Bujinkan Dojo. Please use the link buttons above and on the left to navigate throughout this site.</p>
</div>
</div><!-- end mainsection -->
</div><!-- end container div -->
</div><!-- end wrap div -->
<div id="footer">
<div class="moduletable">
<div class="custom"  >
	&copy;2011 Dayton Bujinkan Dojo | Website by <a href="http://www.roadstardesign.com/" target="_blank">Roadstar</a></div>		</div>
			<div class="moduletable">
					 <a class="markupchooser" href="http://roadstardesign.com/dojo/?device=xhtml" rel="nofollow">Mobile</a><span class="markupchooser"> | </span><a class="markupchooser" href="http://roadstardesign.com/dojo/?device=desktop" rel="nofollow">Standard Version</a><span class="markupchooser"> | </span><a class="markupchooser" href="http://roadstardesign.com/dojo/?device=iphone" rel="nofollow">iPhone</a>		</div>
</div><!-- end footer div -->
</body>
</html>

And here is the related css file, template.css

.componentheading {
  font-size:20px;
  }
 
.contentheading {
  font-size:20px;
  color:#77aa35;
  padding-right: 15px;
  text-shadow:#333 4px 4px 4px;
  margin-right:15px;
}
 
.contentheading a {
}
 
* {
  margin: 0;
  padding: 0;
}
 
html {
  height: 100%;
}
 
a:link {color: #09097b; text-decoration: underline;}
a:visited {color: #09097b; text-decoration: underline;}
a:hover {color: #6262FF; text-decoration: underline;}
a:active {color: #6262FF; text-decoration: underline;}
 
p {
  margin-bottom: 1.3em;
  font-size: 14px;
}
 
h2 {
  font-size: 24px;
  color: #09097b;
  border-bottom: 1px solid;
  margin-bottom: 1.2em;
}
 
h3 {
   font-size: 16px;
   margin-bottom: 12px;
}
 
ul {
   list-style-type: circles;
   margin-left: 25px;
   font-size: 14px;
}
 
body {
  	background-image: url(../images/bk_dojo.jpg);
    background-position: center;
    background-repeat: repeat-y;
  	background-color: #f6f6f6;
  	height: 100%;
  	font-family: Georgia, "Times New Roman", Times, serif;
}
 
#wrap {
  min-height: 100%;
  min-width: 970px;
  background-image: url(../images/bk_main.jpg);
  background-repeat: repeat-y;
  background-position: center;
}
 
#topnav {
  width: 970px;
  height: 37px;
  background-image: url(../images/top_header.jpg);
  background-repeat: no-repeat;
  margin: 0 auto -7px auto;
  padding-top: 7px;
}
 
#banner {
  width: 970px;
  height: 296px;
  background-image: url(../images/logo_header.jpg);
  background-repeat: no-repeat;
  margin: 0 auto 0 auto;
}
 
 
 
#leftcolumn {
  width: 270px;
  height: 100%;
  color: #fff;
  float: left;
  padding: 15px;
}
 
#leftcolumn ul {
  margin-left: 30px;
}
 
#leftcolumn li {
  list-style-image:url(../images/budo_button.png);
  padding-bottom: 3px;
}
 
#imagerevolver {margin-top: 75px;}
 
#mainsection {
  margin: 0 0 0 300px;
  width: 640px;
  height: 100%;
  color: #000;
  text-align: left;
  padding: 15px;
}
 
#container {
  width: 970px;
  margin: 0 auto 0 auto;
  overflow: auto;
  padding-bottom: 37px;
}
 
#footer {
  position: relative;
  width: 970px;
  height: 37px;
  background-image: url(../images/footer.jpg);
  background-repeat: repeat-y;
  color: #fff;
  margin: -41px auto 0 auto;
  clear: both;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding-top: 4px;
}
 
#nudge {
  height: 37px;
  clear: both;
}
 
#footer a:link {color: #fff; text-decoration: underline;}
#footer a:visited {color: #fff; text-decoration: underline;}
#footer a:hover {color: #66668c; text-decoration: underline;}
#footer a:active {color: #66668c; text-decoration: underline;}
 
 
 
.imgleft {
  float: left;
  margin: 0 10px 5px 0;
  border: 2px #09097b solid;
}
 
.imgright {
  float: right;
  margin: 0 0 5px 10px;
  border: 2px #09097b solid;
}
 
.article-info-term {
  display: none;
}
 
.create {
  font-size: 10px;
}
 
.items-more ol {
  list-style-type: disc;
  margin-left: 20px;
}
 
.adultsched {
   margin-left: 125px;
}