[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Sticky Footer Gap below ???

Posted on 2012-08-21
6
Medium Priority
?
492 Views
Last Modified: 2012-08-21
After experimenting with like a dozen methods of creating a sticky footer, I finally found the CSS combination which makes it actually do what a sticky footer should do. It moves to the bottom of the content if the viewport is full of content and stays at the bottom of browser viewport when the content is too short to fill up the viewport.

So I'm happy with that, but now I have this annoying 7-10px gap at the bottom of the footer that I can't seem to get rid of.  It doesn't matter which browser I view it in.

I've attached a pic of the issue as well as my primary CSS file which addresses the DIV arrangements.

@charset "utf-8";
/* CSS Document */
html, body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#411821;
	max-height:100%;
}
#bgimg {
	width: 100%;
	height: auto;
	left: 0px;
	top: 0px;
	z-index:1;
	/* this tells the bkg layer to allow divs overlaid */
	position:relative;
	background-color: #bd8240;
}
#hdrtitle {
	width: 100%;
	height: auto;
	top: 15px;
	z-index:2;
	/* this tells the bkg layer to allow divs overlaid */
position:absolute;
}
.navmnu {
z-index:100;
postion:absolute;
bottom:10%;
left:30%;
}
img.bg {
	width: 100%;
	}
img.but {
	width:90%;
	height:auto;
	border-radius:15px;
	border:white 7px solid;
	}
img.side {
	width:100%;
	height:auto;
	border:black 1px solid;
}
.wrap {
	position:relative;
	margin:0 auto;
    width:100%;
	display:block;
	min-height:100%;
}

#header {
	width:100%;
	float:left;
	margin-top:70px;
	background-image:url(../../images/hdrmnubkg.png);
}
/* when using the STICKY FOOTER make sure it is OUTSIDE the container DIV and has a zero margin */
#footer {
	position:relative;
	margin:0 auto;
	height:85px;
	border-top:medium solid #bd8240;
	background-color:#bababa;
	width:100%;
	clear:both;
}

#hdrmnu {
margin-top :-20px\9; /* IE8 and below */
border-bottom: #2d1810 thick solid;
}

Open in new window

gapfooter.jpg
0
Comment
Question by:day6
  • 3
  • 2
6 Comments
 
LVL 14

Expert Comment

by:EMB01
ID: 38316524
Do you have a live version?  I can play with the code in firebug and get it to work for you.
0
 
LVL 1

Author Comment

by:day6
ID: 38316537
0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38316539
The problem is here in the first cell of the table in the footer - image height is set to 81px which is causing the issue - either reduce that or make your footer height 91px

<img width="81" height="81" alt="Restoration Lutheran Church" src="../images/ftlogo.gif">

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 1

Author Comment

by:day6
ID: 38316558
@julianH

If you notice my CSS above, the footer is 85px. I don't know what you mean? Plus, the gap is below the DIV itself, not within the DIV. The table is only as high as the div it's contained in.
0
 
LVL 1

Author Comment

by:day6
ID: 38316573
Nevermind, you're right. The cell spacing in the table forced it outside the footer height parameters. I increased it to 90px height in the CSS and it solved it. Thank you.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38316674
you are welcome
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month18 days, 6 hours left to enroll

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question