[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