2010-03-19 10 views
9

그래서 x 축에서 반복되는 작은 헤더 이미지가 있습니다. 그러나 IE8에서는 표시되지 않습니다. 누구든지 주위에서 일하는 것을 알고 있습니까?배경 이미지가 IE8에 나타나지 않습니다.

<!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; 
} 

라이브 사이트 : http://cheapramen.com/testsite/

답변

28

)와 repeat-x 사이에 공백을 추가하십시오. 공간을 추가 한 후

+10

HAH 그것은했다. IE는 가까운 장래에 궤양을 가지게 될 것입니다. – Davey

+0

Heh, 정말 멋지다. :) – zokibtmkd

+0

Big Friggin 이걸로 KUDOS에게 .... 공간을 놓치고 그걸 알아 내려고 노력했을거야 .... 고마워! –

2

올바른 코드는 다음과 같습니다!

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