Geek Answers Handbook

Error in IE8

Why doesn't my footer display full page width in IE8:

Screen:

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

.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;
}
+5
source share
4 answers

I fixed this problem by placing my footer divleft

0
source

If you use <footer>(HTML5 fancy trick), IE doesn't like it. This is how I fixed such issues. Add this to your <head>:

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

This may not be what causes the problems, but I noticed that when trying to use HTML5 tags, IE pretty much ignores them or makes them weird.

+5
source

: .   , HTML- hmancy.

/* 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; }
+4

Download Modernizr and put this script in the head of the HTML site. Basically this script will register all HTML5 elements for the browser. Consequently, IE will not break up more unknown elements.

0
source

More articles:


All Articles