As the title states the 1px solid black border on my container ends where the footer starts. I double checked the HTML and the footer is inside the container so tha'ts not the issue. I tried placing a border on the left and right of the footer, but it doesn't line up right and looks weird. I think the issue is somewhere in here since I copied and pasted from one of my old sites as well as one place online to try to cover all the browser hacks and to make the footer sticky.

Code:
html, body {
    height: 100%;
}


body {
    margin: 0;
    padding: 0;
	background-color: #e7d7c5;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img, fieldset {
    border: none;
}
iframe{position:absolute;bottom:0}
/*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
body:before {/*Opera min-height 100% Fix*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/*eliminate need for inner non clearing element*/
}
#wrapper:after,  /* #wrapper:after for IE8 min-height:100% Fix*/
#container:after { /* #container:after for Float Containment */
    clear:both;
    content:"";
    display:block;
    height:1%;/*fix IE8 min-height:100% bug*/
    font-size:0;
}

*+html body div#_atssh{
position:relative!important;
float:left;
margin-right:-100%;
}

#container {
    width: 960px;
    min-height: 100%;
    margin: 0 auto 0;
    background-image: url(../images/IMG_BG.jpg);
	border: 1px solid black;
	height: auto !important;
	height: 100%;
	margin: 0 auto -232px;
}

.footer, .push {
	height: 232px;
}

* html #container {height:100%;} /*min-height for IE6*/