IE8 Rendering problems

[Jennifer420]

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
}

[HTMLBasicTutor]

You have 8 errors according to the W3C validator.

I'm seeing the same as your client in IE7 so it's not a IE8 specific problem.

There are also errors in you CSS file according to the W3C CSS validator.

Correct the errors first then work on the problem left.

[Jennifer420]

Thanks ... I see there are a few errors, but I'm having a hard time trying to fix them as I can't find some of the issues listed within the files! Wordpress has proven to be very challenging ~`

[Jennifer420]

Hi,

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

[HTMLBasicTutor]

Originally Posted by Jennifer420

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

There is no slash at the end of the DOCTYPE declaration. Also, your example above needs a space between " and ".

Originally Posted by Jennifer420

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

There is no slash at the end of the HTML tag nor quotes.

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

[Jennifer420]

Hi there ~`

Thanks again ... I've done as you suggested - yet seeing additional errors.

This is what I'm seeing now when validating: http://validator.w3.org/check?uri=+h...Inline&group=0
Problem is finding the files to edit!

I do hope this will fix the rendering issues with IE once fixed ~`

Jennifer

[HTMLBasicTutor]

Compare your head.php file with the one that came with Wordpress (one of the default themes).

Fixing these problems won't necessarily fix your IE issses but it does eliminate coding issues leaving browser specific issues.

You also have a lot of stuff in the head section. Can't you move this to your external stylesheet and an external javascript file?

[Jennifer420]

Hi,

I've tried doing the comparing thing, etc. but still not fixed ... seems to look fine in IE as long as it's not in compatibility view, but I just don't know what else to do with this besides recoding

Thanks for you suggestions ~

[HTMLBasicTutor]

This line is wrong:

<link rel="stylesheet" href="http://nageela.einfal.com/wp-content/plugins/gwolle-gb/frontend/style.css" type="text/css">

Look at your other links like this to see the solution.

Fix one problem shown in the W3C validator results at a time. Sometimes fixing one problem gets rid of a whole pile (or rest) of errors.

[abajan]

Originally Posted by web

What is wrong with it?

I’m guessing the missing a space and slash before the closing “>” is the problem. You might get away with that in HTML but not XHTML (at least not the strict version).

Thus:

<link rel="stylesheet" href="http://nageela.einfal.com/wp-content/plugins/gwolle-gb/frontend/style.css" type="text/css">

Should be:

<link rel="stylesheet" href="http://nageela.einfal.com/wp-content/plugins/gwolle-gb/frontend/style.css" type="text/css" />

[Jennifer420]

Hi all,

Thank you so much again for taking the time out to help ... I really appreciate it. I hope that gradually I actually get this fixed however. So frustrating.

I removed the css width declaration from the header and see that the header is up where it yes, yet not the width it should be and such, as are a few other elements. I've fixed the slash issue for the stylesheet mentioned above as well. But ...
That was actually coming from a plug-in.

If you' have a look here, you'll see how it's rendering in IE currently. Not good.

Should I simply consider re-coding that entire section do you think?

Jennifer

[Jennifer420]

Not additional suggestions? Likely not huh ... not much else to try I don't think ~` Looks liek I may have to do some re-coding.

[HTMLBasicTutor]

Where did you get this line from?

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

1. It isn't written for XHTML
2. It doesn't look like the meta tag for forcing IE8 to view the page as IE7.

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />