Did you try to validate (http://validator.w3.org)? don't forget to validate your style sheet too.
XHTML requires lower case.
substitute:
<SCRIPT LANGUAGE="JavaScript">
with:
<script type="text/javaScript">
Missing ; in:
/* subtitle bar below the main header */
#hbar {
position: relative;
I made the chages and validated the document. Here's the code:
(Although I couldn't find a solution for your initial problem)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JetteMedia Design</title>
<script type="text/javaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=470,height=400,left = 462,top = 259');");
}
// End -->
</script>
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
/* styles for the column on the left */
#leftside {
position: absolute;
height: 800px;
top: 0px;
left: 0px;
width: 150px;
border-right-style: solid;
border-right-color: #ACCA6B;
border-right-width: 6px;
padding: 75px 0px 0px 0px;
background-image: url("images/leftbg.gif");
background-repeat: repeat-y;
text-align: center;
}
#leftside P {
font-size: 10px;
font-weight: normal;
font-family: Verdana, Helvetica, Sans-serif;
color: #CCCCCC;
}
#leftside h1 {
font-size: 10px;
font-weight: bold;
font-family: Verdana, Helvetica, Sans-serif;
color: #ACCA6B;
}
#middle {
position: relative;
top: -10px;
padding: 10px 30px 10px 30px;
margin-right: 0px;
margin-left: 156px;
border-top-color: #ACCA6B;
border-top-style: dotted;
border-top-width: 1px;
border-bottom-color: #ACCA6B;
border-bottom-style: dotted;
border-bottom-width: 1px;
background-color: #3C3C3C;
background-image: url("images/leftbg.gif");
}
#logo {
position: absolute;
top: 10px;
left: 35px;
}
#top {
position: relative;
top: 100px;
height: 200px;
margin-left:190px;
}
/* subtitle bar below the main header */
#hbar {
position: relative;
top: 0px;
margin-left: -40px;
margin-right: 0px;
padding: 0px 5px 0px 10px;
border-bottom-style: dotted;
border-bottom-color: #ACCA6B;
border-bottom-width: 1px;
border-top-style: dotted;
border-top-color: #ACCA6B;
border-top-width: 1px;
text-align: right;
}
#hbar p {
font-family: verdana, helvetica, sans-serif;
font-size: 11px;
color: #383636;
font-style: italic;
font-weight: normal;
}
/* SubBar below the main content box */
#subbar {
position: relative;
top: -10px;
margin-left: 156px;
margin-right: 0px;
padding: 0px 10px 3px 10px;
border-bottom-style: dotted;
border-bottom-color: #383636;
border-bottom-width: 1px;
text-align: right;
background-color: #ACCA6B;
}
.subtext {
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
color: #383636;
}
/* main header at the top */
#top h1 {
font-family: Verdana, Helvetica, sans-serif;
font-size: 20px;
color: #383636;
}
.h1green {
font-family: Verdana, Helvetica, sans-serif;
font-size: 20px;
color: #ACCA6B;
}
/* Styles for the slides */
.slide {
float: left;
width: 116px;
height: 104px;
background-image: url("images/slide.png");
background-repeat: no-repeat;
padding: 0px 10px 0px 10px;
}
.thumbnail {
position: relative;
left: 1px;
top: -5px;
}
.slidelink {
position: relative;
top: 73px;
left: 2px;
}
/* styles for the slide links */
.slide a:link {
font-family: verdana, helvetica, sans-serif;
font-size: 9px;
color: #2E2E2E;
text-decoration: none
}
.slide a:hover {
font-family: verdana, helvetica, sans-serif;
font-size: 9px;
color: #ACCA6B;
text-decoration: underline;
}
.slide a:active {
font-family: verdana, helvetica, sans-serif;
font-size: 9px;
color: #ACCA6B;
text-decoration: line-through;
}
.slide a:visited {
font-family: verdana, helvetica, sans-serif;
font-size: 9px;
color: #2E2E2E;
text-decoration: none;
}
/* clears for the body section */
.clearslides {
clear: left;
}
#clear {
clear: left;
}
#clearright {
clear: right;
}
/* styles for the news box */
#newsbox {
position: relative;
padding: 20px;
top: -10px;
width: 390px;
margin-left: 156px;
border-right-color: #383636;
border-right-style: dotted;
border-right-width: 1px;
border-bottom-color: #383636;
border-bottom-style: dotted;
border-bottom-width: 1px;
background-color: #EFEFEF;
}
#newsbox H1 {
font-family: Verdana, Helvetica, Sans-Serif;
font-size: 12px;
font-weight: bold;
color: #383636;
}
#newsbox P {
font-family: Verdana, Helvetica, Sans-Serif;
font-size: 11px;
font-weight: normal;
color: #383636;
}
</style>
</head>
<body>
<div id="leftside">
<div id="logo">
<img src="images/logo.png" alt="JetteMedia logo" />
</div>
<h1>jettemedia.com</h1>
<p>2445 E. 28th Ave<br />
Vancouver, BC<br />
V5R 1R5</p>
<p>604.992.6554<br />
phil[at]jettemedia.com
</p>
</div>
<div id="top">
<h1>* jette<span class="h1green">media</span> temporary portfolio</h1>
<div id="hbar">
<p>Welcome to the temporary design portfolio of Phillipe Jette.</p>
</div>
</div>
<div id="middle">
<div class="slide">
<div class="slidelink">
<a href="javascript:popUp('http://www.JetteMedia.com/aquarius.html')">Aquarius</a>
</div>
<div class="thumbnail">
<img src="thumbnails/aquarius.png" alt="Aquarius logo" />
</div>
</div>
<div class="slide">
<div class="slidelink">
<a href="#">testing</a>
</div>
</div>
<div class="slide">
<div class="slidelink">
<a href="#">testing</a>
</div>
</div>
<div class="slide">
<div class="slidelink">
<a href="#">testing</a>
</div>
</div>
<div class="slide">
<div class="slidelink">
<a href="#">testing</a>
</div>
</div>
<div class="clear">
</div>
<div class="slide">
<div class="slidelink">
<a href="#">testing</a>
</div>
</div>
<div class="slide">
<div class="slidelink">
<a href="#">testing</a>
</div>
</div>
<div class="slide">
<div class="slidelink">
<a href="#">testing</a>
</div>
</div>
<div class="slide">
<div class="slidelink">
<a href="#">testing</a>
</div>
</div>
<div class="slide">
<div class="slidelink">
<a href="#">testing</a>
</div>
</div>
<div id="clear">
</div>
</div>
<div id="subbar">
<span class="subtext">View Next Page >></span>
</div>
<div id="newsbox">
<h1>{November 27th, 2005}</h1>
<p>Here it is, my brand new, fully re-designed portfolio. This particular version is just a temporary fix, as I am working on a more “complete“ site utilizing the same style. The best part about this one is that it is <b>fully XHTML 1.1 and CSS2 compliant.</b> It's clearly a work in progress, so check back often.</p>
</div>
</body>
</html>
