...

View Full Version : <OBJECT> overlapping fixed divs



DavideB
10-17-2007, 02:46 PM
I'm trying to include an OBJECT tag (or a IFRAME) in a page with a css layout made of a fixed header and footer and a full height content div.
The header and footer stay visible all the time while the content is scrollable.

I'm not able to understand why the OBJECT tag, inserted into the content DIV, occupies itsspace on the page, then enabling the scrollbar as expected, but overlaps the header or footer when scrolling up or down. I include the whole page code with embedded style. You won't be able to reach the OBJECT data="url" but the page shows the same behaviour, when encountering an error or not.

I'm using IE 7.


<!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: 74%/1.5 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
p {
margin: 1em 0;
}
img {
border: 0;
}
a {
color: #C0C0C0;
font-variant: normal;
text-decoration: underline;
font-style: normal;
}
a:hover {
color: #808080;
font-variant: normal;
text-decoration: none;
}
a:visited {
color: #A4A4A4;
font-variant: normal;
}
.quotation {
font-style: oblique;
padding-right: 5px;
padding-left: 10px;
border-left-style: double;
border-left-width: thin;
border-left-color: #C0C0C0;
}
.quotation a {
font-style: oblique;
}
#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: 600px;
width: 740px;
overflow: hidden;
z-index:2;
}
</style>
</head>

<body>

<div id="outermost-container">
<div id="header">
<div id="header-title">
<h1>Primo</h1>
<h3>Circolo</h3>
</div>
</div>
<div id="content-wrap">
<div id="content">
<p>76856rth sdgsdf arg e5g fv asdfv asdf asd</p>
<p>Loresdfg sdfgsdfg sdfg</p>
<p>asdf asdf asdfare5t rgevg45 wef dfv</p>
<p>This is the last line.</p>
<object type="text/html" id="included-page"

data="album/primopiano/index.html">
<p>it does not work</p>
</object>
</div>
</div>
<div id="footer">
<p>something here</p>
</div>
</div>

</body>

</html>

Any suggestion?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum