IE8 Footer Issue

Question

Why is my footer not displaying full page width in IE8:

Display:

http://cl.ly/0J2Z0l1w3S1e0A3d3Q1V

HTML: <footer> content </footer

/*Reset */
html, body, #wrapper, #main h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset { padding: 0; margin: 0; }

/* Main CSS */
html, body,#wrapper{

    width:990px;
    height:100%;
    min-height:100%;
    margin: 0 auto;
}

#wrapper{
    position: absolute;
}
#header{
    position:relative z-index:500;
    background:url('../images/header.png');
    width:990px;
    height:220px;
}

/*Menu */
nav{
    float:left;
    width:190px;
    margin:0 0 0 0;
}

nav ul{
    float:left;
    margin:0;
    list-style:none;
    font-size:14px;
    width:190px;
}

nav li a{
    font-size:14px;
    color:#fff;
    line-height:25px; /*Text Hight On Button */
    text-decoration:none;
    text-indent:25px;
    display:block;
    width:190px;
    height:27px;
    background-image:url('../images/normal.png');
}

nav a:hover{
    background-image:url('../images/onclick.png');
}

/*Content */

#content{
    margin: 0 0 0 190px;
    background:url('../images/mainbg.png') no-repeat;
    width:815px;
    height:555px;
}

#content h1{
    margin: 5px 0 0 10px;
    font-family: 'Josefin Slab', arial, serif;
    font-size:24px;
}

#content p{
    margin:0 0 0 15px;
}

#content li{
    margin:0 0 0 35px;
}

.clear{
    clear:both;
    margin:0;
    padding:0;
}

footer{
    clear:both;
    overflow:hidden;
    bottom:0;
    background:url('../images/footer.png') no-repeat #000;
    width:100%;
    height:20px;
    border: 6px solid pink;
}

/* Misc*/

#metal{
    float:left;
    margin:160px 0 0 -190px;
    background:url('../images/metalnavbg.png');
    height:400px;
    width:190px;
}

/* Text Formatting */

#companyName{
    text-align:center;
    padding-top:45px;
    font-size:35px;
    color:#f0f0ef;
}

#companyQuote{
    text-align:center;
    font-size:18px;
    color:#a5a4a2;
}

/*Forms */

/*General*/

#validation{
    font-weight:bold;
    color:#ff0101;
}
.contactForm{
    width: 450px;
    height:425px;
    padding: 15px 25px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;
}

#validation{
    font-weight:bold;
    color:#ff0101;
}

.form{
    width: 400px;
    height:100%;
    padding: 15px 25px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;

}

.borderradius.form{
    width: 400px;
    height:100%;
    padding: 15px 25px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;
}

fieldset{
    border:none;
}

#formLayout{
    border:2px solid #000;
}

#formLayout label{
   clear:  both;
    display: block;
}

#formLayout input{
    font-size:12px;
    border: 2px solid #999;
    padding: 6px 8px;
    background-color: #fff;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
    color: #000;
    width: 250px;
}



#formLayout .small{
    color:#ff0101;
    display:block;
    font-size:11px;
    font-weight:bold;
    text-align:left;
    width:140px;
}

#formLayout textarea{
    width:250px;
}

#error{

    width:250px;
    height:20px;
    margin:-30px 0 0 270px;
    padding-bottom:10px;
}

#error p{
    color:#ff0101;
    text-align:left;
}

/* Specific Form Class's */

.login{
    width: 470px;
    height:250px;
    padding: 15px 25px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;

}

.login label{
    font-weight:bold;
}
.login .loginSubmit{
        margin-top:25px;
}
/*Gallery CSS */


#gallery{
    width:120px;
    margin-left:5px;
    display: inline;
}

#gallery .thumbnail{
    margin:0 auto;
    display:inline;
} 

#gallery img{
    margin:5px;
}

#sales{
    width:190px;
    height:195px;
    margin-left:15px;
    display:inline-block;
    border: 1px solid red;
}


#sales .location{
    float:left;
    text-align:center;
    font-weight:bold;
    margin-left:15px;
}

#sales .price{
    float:left;
    text-align:left;
    font-weight:bold;
    padding-left:5px;
    color:#ff0101;
}

Answer 1

If you're using <footer> (a fancy schmancy HTML5 tag) sometimes IE does not like it. This is how I've fixed issues like this. Add this to your <head>:

<script>document.createElement('footer');</script>

It may not be what's causing your issue, but I've notice when trying to use HTML5 tags, IE pretty much ignores them or renders them strangely.

Answer 2

Add display: block to your footer tag. In fact, all fancy schmancy HTML5 tags should be set up.

/* HTML5 block-level reset for enhanced structural tag support in older browsers */
header, footer, section, aside, nav, article, figure { display: block; padding: 0; margin: 0; }