Сайт не отображается правильно в IE - просто не могу сделать это правильно. :(

Question

Я уже несколько дней пытаюсь завершить этот сайт ... однако при просмотре в IE (режим совместимости) заголовок все перепутался. (

Сайт здесь: http://nageela.einfal.com/

Это фактически первый дизайн, который я преобразовал в тему Wordpress, поэтому он был очень сложным.

Если у кого-нибудь есть какие-либо предложения, я буду очень признателен, я очень расстроился из-за этого! Я сам не пользователь IE, хотя кажется, что это клиент.

Спасибо, Дженнифер

Answer 1

Ваш макет ломается в основном из-за проблем с позиционированием в IE7 (и IE6). См. Прикрепленный CSS, строки, которые я изменил, помечены /*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
}