Website not rendering correctly in IE - Just cannot get it right. :(

Question

Hi all,

I have been trying to days now to get this website completed ... however, when viewing it in IE (compatibility mode) the header is all messed up. :(

The website is here: http://nageela.einfal.com/

This is actually the first design I've converted into a Wordpress theme, so it's been very challenging.

If anyone has any suggestions, I'd really appreciate it, I've grown so very frustrated with this! I'm not an IE user myself, though the client is it seems.

Thanks, Jennifer

Answer 1

Hi Jennifer

Your layout breaks mostly because of positioning issues in IE7 (and IE6). See the attached css, the lines I have changed is marked /*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
}