[thelist] DocType Height and overflow problem
Gauthier@PlacidSound
gauthier at placidsound.com
Sat Sep 7 11:40:00 CDT 2002
Hi, here is a simple thing I'm unable to do without removing the doctype of
my layout test:
I need to have the interface layout displayable all arround my contents, my
contents must stay in a overflowed element that scale to the client window's
size
here is the XHTML code I've writed:
===============================================
<html>
<head>
<title></title>
<style>
body
{
margin: 0px;
padding: 0px;
}
#interface
{
height: 100%;
border:1px solid #000;
width: 100%;
}
#interface-Header,#interface-Footer
{
height: 100px;
}
#interface-Menu
{
width: 110px;
}
#interface-Content
{
height: 100%;
}
#interface-Content div
{
overflow: scroll;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table id="interface">
<tr>
<td colspan="3" id="interface-Header">Header</td>
</tr>
<tr>
<td id="interface-Menu">menu</td>
<td id="interface-Content">
<div>
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
</div>
</td>
<td id="interface-Menu">menu</td>
</tr>
<tr>
<td colspan="3" id="interface-Footer">footer</td>
</tr>
</table>
</body>
</html>
===============================================
My problem is that the height is not interpreted the same way if I put the
correct doctype at the top of the code
replacement doctype:
===============================================
<!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" xml:lang="en" lang="en">
===============================================
Does anyone know how to obtain the same effect with XHTML/CSS compliant
code, working identic with ie5 and mozilla1
Thanks alot for any hint!
Gauthier
More information about the thelist
mailing list