Site ne s'affiche pas correctement dans IE - Juste ne peut pas le faire correctement. :(

Question

J'ai essayé de jours maintenant pour obtenir ce site terminé ... Cependant, lors de l'affichage dans IE (mode de compatibilité) l'en-tête est tout foiré :(

Le site est ici. http://nageela.einfal.com/

C'est en fait la première conception que je l'ai converti en un thème Wordpress, il a été très difficile.

Si quelqu'un a des suggestions, j'apprécierions vraiment, j'ai grandi tellement frustré par cette ! Je ne suis pas un utilisateur d'IE moi-même, bien que le client semble être le

Merci, Jennifer

Answer 1

Votre mise en page se brise principalement en raison de problèmes de positionnement dans IE7 (et IE6). Voir le css ci-joint, les lignes que j'ai changées sont marquées/* FIXED * /.

/* 
Theme Name: Camp Negeela 
Author: Mafiakitty Web Design & Development 
Author URI: http://www.mafiakitty.com/ 
Description: Custom Theme 
Version: 1.0 
Tags: custom, canada, mafiakitty, design, creative 
*/ 

* { 
margin: 0; 
padding: 0; 
outline: none; 
} 

a:link, a:visited, a:active { 
color: #630001; 
} 

a:hover { 
color: #134077; 
} 

html, body { 
height: 100%; 
} 

body { 
background-color: #f7921e; 
font-family: Verdana, Arial, Helvetica, san-serif; 
font-size: 12px; 
color: #666; 
line-height: 1.8; 
} 

.newcampers { 
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/campers.png); 
width: 518px; 
height: 19px; 
margin-left: 58px; 
cursor: default; 
top: 230px; 
position: absolute; 
} 

.bed { 
background-color: #e4e2d6; 
margin: 0 auto 0 auto; 
border-left: 1px solid #333333; 
border-right: 1px solid #333333; 
} 

#wrapper { 
position: relative; 
width: 960px; 
margin-left: auto; 
margin-right: auto; 
} 

.floatleft { 
float: left; 
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/left.png); 
margin-top: 0; 
width: 43px; 
height: 182px; 
margin-left: 1px; 
position: absolute; /* FIXED */ 
} 

.floatright { 
float: right; 
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/leaves-top.png); 
background-repeat: no-repeat; 
margin-top: 0; 
width: 488px; 
height: 334px; 
right: -10px; 
position: absolute; 
} 

.photo { 
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/photo.png) no-repeat; 
width: 275px; 
height: 263px; 
margin-right: 62px; 
margin-top: 50px; 
position: absolute; /* FIXED */ 
    right: 0; 
} 

.board { 
float: right; 
background: url(http://nageela.einfal.com/wp-content/themes/nageela//img/bg.png); 
margin-top: -10px; 
width: 379px; 
height: 500px; 
} 

.board div.video { 
float: right; 
background: url(http://nageela.einfal.com/wp-content/themes/nageela/video.png); 
background-repeat: no-repeat; 
width: 62px; 
height: 108px; 
margin-top: 207px; 
margin-right: 175px; 
} 

.board a { 
display: block; 
width: 100%; 
height: 100%; 
text-decoration: none; 
cursor: pointer; 
} 

.board div.free { 
float: right; 
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/free.png); 
background-repeat: no-repeat; 
width: 141px; 
height: 74px; 
margin-top: -215px; 
margin-right: 135px; 
} 

.board div.pic { 
float: right; 
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/pic.png); 
background-repeat: no-repeat; 
width: 61px; 
height: 13px; 
margin-top: 136px; 
margin-right: 272px; 
} 

.board div.sign { 
float: right; 
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/sign.png); 
background-repeat: no-repeat; 
width: 138px; 
height: 46px; 
margin-top: -203px; 
margin-right: 15px; 
} 

#header { 
height: 262px; 
background: #e4e2d6 url(http://nageela.einfal.com/wp-content/themes/nageela/img/hdbg.jpg); 
margin-top: 0; 
padding: 0; 
} 

/*FIXME*/ 
a.logo { 
width: 570px; 
height: 76px; 
margin-top: 37px; 
margin-left: 0px; 
background: url(http://nageela.einfal.com/wp-content/themes/nageela/img/logo.png); 
position: absolute; 
float: left; 
left: 55px; /* FIXED */ 
} 

a.logo span { 
display: none; 
} 

#content { 
width: 520px; 
float: left; 
margin-left: 24px; 
padding-top: 5px; 
clear: both; 
padding-left: 10px; 
/*margin-top: -52px; FIXED*/ 
    display: inline; 
} 

.post { 
width: 520px; 
margin-bottom: 50px; 
margin-top: 0px; 
} 

.post h2 a { 
color: #24446b; 
font-weight: normal; 
text-decoration: none; 
font-size: 24px; 
} 

.post span.post-info { 
color: #CCCCCC; 
font-size: 10px; 
padding-bottom: 10px; 
width: 560px; 
float: left; 
} 

.post p { 
line-height: 22px; 
margin-bottom: 10px; 
} 

.post div.cats { 
border-top: 1px solid #ececec; 
padding-top: 10px; 
} 

#sidebar { 
width: 379px; 
float: right; 
margin-right: 0px; 
} 

#footer { 
clear: both; 
width: 960px; 
height: 350px; 
background: #e4e2d6 url(http://nageela.einfal.com/wp-content/themes/nageela/img/footer.jpg); 
margin-bottom: 0px; 
padding: 0px; 
margin-left: 0px; 
} 

/* 
    .comments template styles 
*/ 

.comments { 
float: left; 
padding: 0; 
} 

.comments input[type=text], textarea { 
width: 350px; 
} 

textarea { 
width: 450px; 
} 

.comments fieldset { 
padding: 20px; 
border: 1px solid #CCC; 
margin: 10px 0 20px 0; 
} 

.comments p { 
padding: 0 0 10px 0; 
} 

.comments h2 { 
padding: 0 0 15px 0; 
} 

.aligncenter, div.aligncenter { 
display: block; 
margin-left: auto; 
margin-right: auto; 
} 

.alignleft { 
float: left; 
} 

.alignright { 
float: right; 
} 

img.avatar { 
float: right; 
} 

.newspaper { 
float: right; 
background: url(img/newspaper.png) bottom; 
background-repeat: no-repeat; 
width: 382px; 
height: 350px; 
padding-bottom: 0px; 
margin: 0px; 
} 

.inner { 
width: 382px; 
height: 300px; 
text-align: center; 
margin-bottom: 0px; 
padding-bottom: 0px; 
} 

#dropmenu, #dropmenu ul { 
top: -80px; 
list-style-type: none; 
list-style-position: outside; 
position: relative; 
line-height: 1.5em; 
z-index: 200; 
width: 100%; 
font-weight: bold; 
} 

#dropmenu { 
position: absolute; 
top: 180px; 
} 

#dropmenu a { 
display: block; 
padding: 0.25em 1em; 
color: #f7921e; 
text-decoration: none; 
} 

#dropmenu a:hover { 
background: #711a19; 
color: #fff; 
} 

#dropmenu li { 
float: left; 
position: relative; 
} 

#dropmenu ul { 
position: absolute; 
display: none; 
width: 12em; 
top: 1.9em; 
left: -1px; 
} 

#dropmenu ul a { 
border-left: 1px solid #c8c8c8; 
background: #10253a; 
} 

#dropmenu li ul { 
border-top: 1px solid #c8c8c8; 
width: 14.1em; 
} 

#dropmenu li ul a { 
width: 12em; 
height: auto; 
float: left; 
border-bottom: 1px solid #c8c8c8; 
} 

#dropmenu ul ul { 
top: auto; 
} 

#dropmenu li ul ul { 
left: 12em; 
margin: 0px 0 0 10px; 
} 

#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul { 
display: none; 
} 

#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul { 
display: block; 
} 

#contact-area { 
width: 300px; 
margin-left: 320px; 
float: right; 
position: absolute; 
bottom: 40px; 
} 

#contact-area input, #contact-area textarea { 
background-color: #61502c; 
padding: 1px; 
width: 125px; 
font-family: Helvetica, sans-serif; 
font-size: 1.2em; 
margin: 5px 0px 5px 0px; 
border: 2px solid #61502c; 
color: #372d24; 
} 

#contact-area textarea { 
height: 90px; 
} 

#contact-area textarea:focus, #contact-area input:focus { 
border: 2px solid #630001; 
} 

#contact-area input.submit-button { 
width: 61px; 
height: 13px; 
float: right; 
background: url(img/submit.png) 0 0 no-repeat; 
border: 0px; 
cursor: pointer; 
text-indent: -9999px; 
} 

label { 
float: left; 
text-align: right; 
margin-right: 15px; 
width: 100px; 
padding-top: 5px; 
font-size: 1.2em; 
color: #e4e2d6; 
} 

#contact-area .formin { 
background: url(img/form.png); 
width: 137px; 
height: 37px; 
position: absolute; 
top: -53px; 
left: 50px; 
} 

.contactin { 
background: url(img/contact.png); 
width: 270px; 
height: 39px; 
position: absolute; 
top: -54px; 
margin-left: -258px; 
} 

.contactin p { 
float: left; 
margin: 18%; 
border: 0px ; 
width: 80%; 
display: inline; 
font-family: Helvetica, sans-serif; 
font-size: 1.2em; 
line-height: 2.2; 
color: #ffffff; 
} 

.contactin a:link { 
color: #f6d60b; 
} 

/* rotator in-page placement */ 
    div#rotator { 
height: 245px; 
position: absolute; /* FIXED */ 
    left: 640px; /* FIXED */ 
    top: 65px; /* FIXED */ 
} 

/* rotator image style */ 
    div#rotator ul li img { 
border: 1px solid #ccc; 
padding: 4px; 
background: #FFF; 
} 

/* rotator css */ 
    div#rotator ul li { 
float: right; 
position: absolute; 
list-style: none; 
} 

    div#rotator ul li.show { 
z-index: 500 
}