Sto cercando di realizzare un semplice layout CSS con due DIV, testata e piede, che rimangono in posizione fissa, lasciando scorrere il contenuto del DIV centrale. Tutto bene fin quando ho provato ad inserire un <OBJECT> per includere una pagina, in alternativa ad un IFRAME.

Impostando l'altezza dell'elemento <OBJECT> la pagina si allunga appropriatamente, facendo comparire la scrollbar ove opportuno. Il problema è che scrollando la pagina, mentre tutto il contenuto del DIV centrale scorre al di sotto di testata e piede, il tag <OBJECT> scorrendo si sovrappone ai DIV fixed di testata e piede.

Includo la pagina di esempio con lo stile completo, il problema si presenta sempre, che la pagina contenuta in <OBJECT> sia raggiungibile o meno, quindi dovrebbe essere riproducibile. Io utilizzo IE 7.0.

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>A test</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	height: 100%; ;
	overflow: auto;
}
html > body #outermost-container {
	height: 100%;
}
#outermost-container {
	width: 760px;
	margin: 0 auto;
}
#header {
	width: 760px;
	height: 6em;
}
html > body #header {
	position: fixed;
	z-index: 10;
}
html > body #content-wrap {
	height: 100%;/* 100 % height */
}
html > body #content {
	padding: 9em 1em;
	z-index: 0;
}
#footer {
	width: 760px;
	height: 3em;
}
html > body #footer {
	position: fixed;
	bottom: 0;
	z-index: 10;
}
/* style */
html, body {
	background: #000000;
	background-color: #000000;
	color: #A4A4A4;
}
#content-wrap, #content {
	background: #333333;
}
#footer {
	text-align: center;
}
#header, #footer {
	color: #FFFFCC;
	background: #CC9900;
	background-color: #CC9900;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #FFCC00;
	border-bottom-style: solid;
	border-bottom-width: 5px;
	border-bottom-color: #FFCC00;
	font-family: Arial, Helvetica, sans-serif;
}
body {
	font: 76%/1.5 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
p {
	margin: 1em 0;
}
img {
	border: 0;
}
#header-title {
	margin-top: 1em;
}
#header h1 {
	color: #FFFFCC;
}
#header h2, #header h3 {
	color: #FFFFCC;
}
#header h1, #header h2, #header h3 {
	font-weight: normal;
	text-transform: none;
	display: inline;
}
#header h1 {
	margin-left: 10%;
}
#header h3 {
	margin-top: 5%;
	margin-left: 5%;
}
#included-page {
	border: 0;
	height: 500px;
	width: 740px;
}
</style>
</head>

<body>

<div id="outermost-container">
	<div id="header">
		<div id="header-title">
			<h1>Title</h1>
			<h3>Subtitle</h3>
		</div>
	</div>
	<div id="content-wrap">
		<div id="content">
			

dsome text</p>
			<div>
			<object type="text/html" id="included-page" data="album/primopiano/index.html">
				

Oops! That didn&#39;t work...</p> 
			</object></div>
		</div>
	</div>
	<div id="footer">
		

something here</p>
	</div>
</div>

</body>

</html>
Non sono in grado di capire il motivo di questo comportamento e come evitarlo. Grazie per i vostri suggerimenti.