Sticky Footer Gap below ???

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;
}

Select allOpen in new window

gapfooter.jpg