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.
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*/