Site fails in IE - Could use some help

Good afternoon,

I’ve been coding all day to get my new & fresh website running, using HTML, Javscript and CSS. Once again, though, my website seems to fail when you view it using Internet Explorer. All other browsers do work, though. I’m getting more and more desperate, so my question is if anyone could have a look at it. What am I doing wrong here…?

The site: Portfolio of Pieter Bron

CSS Source Code:

@charset "utf-8";
/* CSS Document */


img {
border:0px;
}

object
{
width:1200px; 
height:400px;

}

div#container {
text-align: left; 	
width:1200px;
	
margin-left:auto;
	
margin-right:auto;
	
clear:both;
	
}




div#header {
text-align:left; 	
position:absolute;
	
height:300px;
	
width:1200px;
	
top:0px;

}

div#bodytotal {
	height:500px;
	width:1200px;
	top:300px;
	position:absolute;
}

div#bodytop {
	height:50px;
	width:1200px;
	top:300px;
	position:absolute;

}

div#bodytext {
text-align: left; 	
top:50px;
position:absolute;
}

div#bodybottom {
	height:50px;
	width:1200px;
	top:450px;
	position:absolute;
	margin-left:50px;
	margin-top:7px;
} 

a {
text-decoration:none;
font-family:"Constantia",Calibri,seriff;
font-style:normal;
}

a:link {
	color:#FFF;
	 }
a:visited {
	color:#FFF;
	 }
a:hover {
	color:#CCC;
	 }
a:active {
	color:#CCC;
	 }

Index.html Source Code:

<html>

<head>
<meta http-equiv=“X-UA-Compatible” content=“IE=7” />
<script src=“BatmosphereAudioEmbed.js” type=“text/javascript”></script>
<title>Portfolio of Pieter Bron</title>

<link rel=“stylesheet” href=“Styles.css” type=“text/css” />

<script type=“text/javascript”>
//<![CDATA[
// written by: Coothead
function updateObjectIframeText(which){
document.getElementById(‘bodytext’).innerHTML = ‘<’+‘object id=“Text” name=“Text” type=“text/html” data="’+which.href+‘"><\/object>’;
}

//]]>
</script>

</head>

<body background=“BackgroundTest.png”>

<div id=“container”>

<div id=“header”>

		&lt;img src="HeaderTest.png" usemap="#NavigationHeader"&gt;

	&lt;map name="NavigationHeader"&gt;

	&lt;area shape="rect" coords="35,205,310,255" alt="Activites" href="activities.html" onClick="updateObjectIframeText(this); return false;" /&gt;
	&lt;area shape="rect" coords="320,205,595,255" alt="Growth" href="growth.html" onClick="updateObjectIframeText(this); return false;" /&gt;

	&lt;area shape="rect" coords="600,205,880,255" alt="Past/Future" href="pf.html" onClick="updateObjectIframeText(this); return false;" /&gt;

	&lt;area shape="rect" coords="885,205,1160,255" alt="Vision" href="vision.html" onClick="updateObjectIframeText(this); return false;" /&gt;

	&lt;area shape="rect" coords="45,145,130,175" alt="Home" href="home.html" onClick="updateObjectIframeText(this); return false;" /&gt;
	&lt;area shape="rect" coords="1035,145,1150,175" alt="Contact" href="contact.html" onClick="updateObjectIframeText(this); return false;" /&gt;

</map>

</div>
<div id=“bodytotal”>
<img src=“Body.png”>
<div id=“bodytop”>

</div>
<div id=“bodytext”>

<object id=“Text” name=“Text” type=“text/html” data=“home.html”></object>

</div>
<div id=“bodybottom”>
<font=“Constantia”><a href=“FirstTake.mp3” target=“_blank” onClick=“javascript:BatmoAudioPop(‘Vocoder Example’,this.href,‘1’);
return false”>Click me for relaxing music!</a></font>
</div>
</div>

</div>

</body>

</html>

CSS Source Code for Text in the Body part:

@charset “utf-8”;
/* CSS Document */

img {
border:0px;
}

div#BodyText {
text-align:left;
margin-left:50px;
margin-right:50px;
}

h1 {
font-size:18px;
color:#999;
font-family:“Constantia”,Cambria,serif;
}
h2 {
font-size:12px;
color:#999;
font-family:“Constantia”,Cambria,serif;
}
h3 {
font-size:12px;
color:#FFF;
font-family:“Constantia”,Calibri,seriff;
font-style:normal;
}
a {
text-decoration:none;
}

a:link {
color:#666;
}
a:visited {
color:#666;
}
a:hover {
color:#CCC;
}
a:active {
color:#CCC;
}

Thanks in advance! :slight_smile:

~Ciao

Try giving it a doctype

Thanks for the reply! I tried it, but it does not work… Is there any specific doctype you might want to suggest?

Try creating a conditional stylesheet for IE only (How To Create an IE-Only Stylesheet | CSS-Tricks).

Which version of IE are you viewing this in?

Firstly, get a better doctype, something like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Also, put this just after the <head> element:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

I also suggest you get rid of this line:

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

It forces IE to render the page in an old way, for which there’s no point IMO.

I use <!DOCTYPE html> but others will hate me for that. It will, however, cause you the least pain when running it through the validator

Once you’ve added the doctype run it through said validator and fix any problems, see if that solves your issue