Hi all - back again ...

Hi,

Sorry ... I've been searching for a solution to this everywhere, but can't seem to fix it for myself. >:|

My last design http://nageela.einfal.com/ doesn't want to render correctly in IE8 it seems. (According to the client.)

For me, when I view it - the only problem I have is in the footer ...

However, when he views it, he sees this: http://nageela.einfal.com/explorernageela.jpg

Any help with this would be greatly appreciated ... this is a design - turned into a Wordpress theme (my first!) so I've found it to be very challenging!

Thanks,

Jennifer

My css is as follows:

/*  

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(img/campers.png); width:518px; height: 19px; margin-left:58px; cursor: 

hand; top: 230px;position: absolute; }



.bed {background-color: #e4e2d6; width: 960px; margin: 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(img/left.png); margin-top: 0;
width:43px; height: 182px;
margin-left: 1px;
}
.floatright
{
float: right;
background: url(img/leaves-top.png); background-repeat: no-repeat; margin-top: 0;
width:488px; height: 334px;
right:-10px;
position:absolute;
}

.photo
{
float:right;
display:inline;
background: url(img/photo.png) no-repeat; 
width:275px; height: 263px; 
margin-right: 62px;
margin-top:50px;
}

.board
{
float: right;
background:  url(img/bg.png); margin-top: -10px;
width:379px; height: 500px;
}

.board div.video { float:right;background:url(img/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(img/free.png); background-repeat: 

no-repeat;width:141px; 
height:74px; margin-top:-215px; margin-right:135px;} 

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


.board div.sign { float:right;background:url(img/sign.png); background-repeat: 

no-repeat;width:138px; 
height:46px; margin-top:-203px; margin-right:15px;} 

#header { width: 960px; height: 262px; background: #e4e2d6 url(img/hdbg.jpg); }

a.logo { width: 570px; height: 76px; margin-top: 37px; margin-left: 0px; background: 

url(img/logo.png);  position: absolute; float: left;
   
 }

a.logo span { display: none; }


#content { width: 520px; float: left; 
margin-left: 24px; padding-top: 5px;
clear: both;
padding-left:10px;
margin-top: -52px;
    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(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; }



#cdisplay { list-style-type: none; padding: 0; margin: 0; }



    #cdisplay li { padding: 10px;  margin-bottom: 10px; width: 560px; }

    

    #cdisplay li.first {  background: #f9f9f9; border-bottom: #CCC 1px solid; }

    

    #cdisplay li.second {  background: #f6f6f6; border-bottom: #dedede 1px solid; }



.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 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); repeat: no-repeat;
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;
    margin-right: -14px;
margin-top:65px;
float:right;
}
/* 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
}

Well, the first thing you need to do is VALIDATE your html, you have errors in there that would cause odd things to happen, especially with the more standards-compliant browsers.

This is a biggie:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"

That tag is not properly closed!

Thank you ... Ive just validated the css, however - I'm having issues finding the correct files to edit via Wordpress! Lol

I have just looked at your site in both IE8 and Firefox 3.5.2 and on a quick look couldn't detect any differences.

You say you have a problem with the footer, I didn't see a this in either browser.

Next question - are you specifying compatibility mode for IE 8 ? That makes it render like IE7.

Hi Lady,

Thanks for taking the time to help me ... all seems to be validating now, however - I'm still getting errors (4) within these:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>" />

I've tried moving the "/" at the end as well as placing a semicolon between the quotations within the first one, etc - but I'm not able to fix it properly. Only results in additional errors ... any idea what the problem may be?

Thanks

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>" />

You have to get that php thing OUT of that html tag. It will not validate and I don't believe it even belongs there (I don't do PHP).

Hi Lady,

Thank you ... I've removed that as well. I've tried comparing files to a default wordpress theme, etc. But still nothing.

The websites it fine in IE when NOT in compatibility view ... wish there was a way to force it being off when people viewed it.

Thanks again

Yes its messed up in IE7 surprise, surprise.

I'm not going to troubleshoot it tonight but just looking at it quickly it appears you have 3 things going on.

Absolute positioning
Not Clearing a float (probably .floatright)
No PNG fix for transparency in the graphics.

IE7 Screencap

IE8 has a good built in html/css edit tool, Hit F12 key while in IE8. (thanks wayfarer07 )

Thanks Geek, going to try that now and see what happens. Will also check on the above declarations and see if I can figure anything out.

Will let you know if I've any luck. My, this is frustrating!

I'm seeing the same (still) as you do when viewing on IE.

It's all going crazy, I am glad to see this problem have been solved, but I also think IE8 is not as great as Firefox, cos' a lot of websites can't display as perfect as what in designers' mind!

Hi davidyxf,

Hasn't been solved as of yet I just can't seem to fix it no matter what I try - have you any suggestions?