Background Image not showing up in IE8

Question

So I have a tiny header image that repeats on the x axis, but for some reason it won't show up in IE8. Anyone know a work around?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content='' name='description' />
<meta content='' name='keywords' />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />



<title>Book Site</title>









</head>
<body>
<div id="wrapper">

<div id="header">

    <div id="title">
    <span class="maintitle">Site Title Goes Here</span>
    <br />
    <span class="subtitle">Transitional Justice, Post-Conflict Reconstruction & Reconciliation in Rwanda and Beyond
    Phil Clark and Zachary D. Kaufman, editors</span>
    </div>
    <img class="thebook" src="images/thebook.png" />
    <span class="bookblurb">
    <span class="bookbuy">Buy the book</span>
    get it online
    <br />
    from Columbia,
    Hurst or your
    favorite reseller
    </span>

</div>

<div id="navbar">
    <ul>
        <li>HOME</li>
        <li>ABOUT THE BOOK</li>
        <li>AUTHORS</li>
        <li>NEWS & EVENTS</li>
        <li>KIGALI PUBLIC LIBRARY</li>
        <li>CONTACT US</li>
    </ul>
</div>

<div id="content">
<div id="blockone">
    <div id="polaroid">
    <img class="polaroid" src="images/polaroid.png" />
    <br />

    <span class="roidplace">Gisimba Memorial Centre</span>
    <br />
    <span class="roidname">Kigali, Rwanda</span>
    </div>


    <div id="textblockone">
    <h3>An incisive analysis of genocide and its aftermath</h3>
    <br />
    <span class="description">In After Genocide leading scholars and practitioners analyse the political, legal and regional impact of events in post-genocide Rwanda within the broader themes of transitional justice, reconstruction and reconciliation. Given the 
forthcoming fifteenth anniversary of the Rwandan genocide, and continued mass violence in Africa, especially in Darfur, the Democratic Republic of Congo (DRC) and northern Uganda, this volume is unquestionably of continuing relevance. </span>






    </div>

</div>


<div id="form">
    <div id="statement">
    This book should be labeled for the mature individual only. But for that mature individual it is of extreme interest. 
    It shows, far from any Manichean stereotyping, the many facets of having to try to live in an impossibly complex social 
    and human situation. Highly recommended. 
    <br /><br />
    <span class="author">-Grard Prunier</span> 
    <br /><span class="bookname">The Rwanda Crisis: History of a Genocide (Hurst, 1995)</span>
    </div>
    <div id="contactform">
<span class="contactus">Contact us for additional information and site updates</span>
<br />
<span class="theform">
<form class="forming">
Name:
<input type="text" name="firstname" />
<br />
Title:
<input type="text" name="title" />
<br />
Institution:
<input type="text" name="institution" />
<br />
Email:
<input type="text" name="email" />
<br />
Message:
<input type="text" name="message" class="message" />
</form> 
</span>


</div>
</div>







</div>

<div id="footer">
<p class="footernav">&copy; 2008 After Genocide   <span class="footerlinks">Sitemap  |  Terms  |  Privacy  |  Contact   </span>                                       

<span class="plug">Web design by <span class="avity">Avity</span>
</p>
</div>





</div>
</body>

</html>

----------------css-------------------

html, body {
    margin:0;
    padding:0;
    background-color:#fdffe3;
    font-family: Arial, Helvetica, sans-serif;
}




#wrapper {
    width:1020px;
    margin:0 auto;
}

/*begin header style*/

#header {
    background:url("images/headback.png")repeat-x;
    width:1020px;
    height:120px;
    font-family:arial;
    position:relative;
}

#title {
    width:565px;
    height:100px;
    float:left;
    margin:20px 0 0 100px;
}

.maintitle {
    font-size:40px;
}

.subtitle {
    font-size:13px;
}

.thebook {
    float:left;
    margin:10px 0 0 30px;
    border:2px solid #666666;


}

.bookblurb {
    float:left;
    width:110px;
    margin:15px 0 0 15px;
    font-size:13px;
}

.bookbuy {
    font-weight:bold;
    font-size:14px;
}
/*end header style*/

/*begin navigation style*/

#navbar {
    margin:5px 0 0 0;
    height: 30px;
    width: 1020px;
    background-color: #3a3e30;


}

#navbar ul {


    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
    margin:0 0 0 140px;

}

#navbar ul li {
    list-style-type: none;
    display: inline;
    margin:0 40px 0 0;



}

/*end navigation style*/

/*begin content style*/

#content {
    width:775px;
    margin:0 auto;
}

#blockone {
    margin:25px 0 0 0;
}

#polaroid {
float:left;
width:230px;

}

.roidplace {
    font-weight:bold;
    font-size:11px;

}
.roidname {
    font-size:11px;
    margin:0 0 0 40px;
}

#textblockone {
    width:745px;
    margin:0 0 0 0;
    font-family: Arial, Helvetica, sans-serif;

}


.description {
    font-size:13px;

}

#form {
    background:url("images/formbackround.png") no-repeat;
    width:758px;
    height:231px;
    margin:80px 0 0 10px;
}

#statement {
    width:320px;
    margin:30px 0 0 30px;
    position:absolute;
    font-size:15px;
    font-style:italic;
    float:left;

}

.author {
    font-weight:bold;
    font-size:14;
}

.bookname {
    font-weight:bold;
    font-size:11px;
    color:#3f91ad;
}

#contactform {
    float:right;
    width:320px;
    margin:20px 30px 0 0;
}

.contactus {
    font-weight:bold;
    font-size:12px;
}

.theform {


}

.forming {

}

.message {
    height:50px;
}

#footer {
    width:1020px;
    height:65px;
    background-color:#dfdacc;
    margin:35px 0 0 0;
    font-size:13px;
    font-weight:bold;
}
.footernav {
    margin:30px 0 0 150px;
    position:absolute;
    width:1020px;

}

.footerlinks {
    margin:0 10px 0 10px;
    color:#0f77a9;
}

.plug {
    margin:0 0 0 175px;
}

.avity {
    color:#0f77a9;
}

Live site: http://cheapramen.com/testsite/

ZippyV · Accepted Answer · 2012-05-15T07:30:33.823

28

Try adding a space between ) and repeat-x.

edited May 15 '12 at 07:30

answered Mar 20 '10 at 00:00

ZippyV

12,540
3
37
52

10

HAH!It worked. IE will be the reason I have an ulcer in the near future. – Davey Mar 20 '10 at 00:13
Big Friggin KUDOS to you on this one.... missed the space and would have spent hours trying to figure it out.... Thanks! – Daniel Hunter Feb 01 '12 at 17:17
gah I hope I never forget this again – Justin Moore May 14 '12 at 21:36
@Chris22 I would guess that since the background property accepts multiple values, each value should be separated with a space. – ZippyV Aug 03 '12 at 17:29
Nooffensebutwhywouldn'tyouputaspacethereanyway?It'smorereadable. – Arrow Nov 20 '12 at 07:06
Readability aside, arguments need to be space-separated otherwise you are putting in a different value entirely. According to the w3c spec here: http://www.w3.org/TR/CSS21/about.html#shorthand - shorthand values can contain multiple VALUES. A value is a string of characters, and so therefore writing values without spaces is actually equivalent to one bigger value, which will parse out incorrectly. – dudewad Feb 06 '14 at 19:43
1

Continuing that comment, the definition of "value", which is higher on that same page here: http://www.w3.org/TR/CSS21/about.html#value-defs, actually states: "Note: In many cases, spaces will in fact be required between tokens in order to distinguish them from each other.".... makes sense, otherwise the browser won't know how to distinguish them from one another. – dudewad Feb 06 '14 at 19:46

score 2 · Answer 2 · edited Mar 18 '13 at 12:09

2

Correct code after adding space looks like this:

#header {
    background:url("images/headback.png") repeat-x;
    width:1020px;
    height:120px;
    font-family:arial;
    position:relative;
}

edited Mar 18 '13 at 12:09

levelnis

7,665
6
37
61

answered Jan 29 '12 at 20:33

Abdul Saboor

4,079
2
33
25

Background Image not showing up in IE8

2 Answers2

Linked