Vic
09-13-2006, 03:38 AM
I am trying to create a section on page comprising of a header beneath which is a scrollable section for the body of the text. Example is shown below.
The problem is I want to to be standards-compliant AND to fit within my designated <div> dimensions. Whilst my example is working, it has one major flaw - see how my second <div> has a height: 100%? Well in the standards mode this is interpreted as the height of the parent <div>, NOT the height of the row (which should be 100% - 22px, which is the height of the table - 100% - less height of the first row - 22px).
This problem is easy to overcome in FireFox - instead of tables use <div> whereas the second div would have style 'POSITION: absolute; TOP: 22px; LEFT: 0px; RIGHT: 0px; BOTTOM: 0px; OVERFLOW: auto'. Unfortunately this does not work in IE.
Can anyone recommend a solution that works in IE and in FF?
Thanks a lot in advance...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<div style='POSITION: absolute; TOP: 100px; LEFT: 100px; WIDTH: 500px; HEIGHT: 300px; BORDER: 1px solid red'>
<table cellpadding=0 cellspacing=0 style='WIDTH: 100%; HEIGHT: 100%'>
<tr><td style='HEIGHT: 22px; BACKGROUND: red'>Heading</td></tr>
<tr><td style='HEIGHT: 100%'><div style='OVERFLOW: auto; HEIGHT: 100%'>First<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Last</div></td></tr>
</table>
</div>
</body>
</html>
The problem is I want to to be standards-compliant AND to fit within my designated <div> dimensions. Whilst my example is working, it has one major flaw - see how my second <div> has a height: 100%? Well in the standards mode this is interpreted as the height of the parent <div>, NOT the height of the row (which should be 100% - 22px, which is the height of the table - 100% - less height of the first row - 22px).
This problem is easy to overcome in FireFox - instead of tables use <div> whereas the second div would have style 'POSITION: absolute; TOP: 22px; LEFT: 0px; RIGHT: 0px; BOTTOM: 0px; OVERFLOW: auto'. Unfortunately this does not work in IE.
Can anyone recommend a solution that works in IE and in FF?
Thanks a lot in advance...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<div style='POSITION: absolute; TOP: 100px; LEFT: 100px; WIDTH: 500px; HEIGHT: 300px; BORDER: 1px solid red'>
<table cellpadding=0 cellspacing=0 style='WIDTH: 100%; HEIGHT: 100%'>
<tr><td style='HEIGHT: 22px; BACKGROUND: red'>Heading</td></tr>
<tr><td style='HEIGHT: 100%'><div style='OVERFLOW: auto; HEIGHT: 100%'>First<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Element<br>Last</div></td></tr>
</table>
</div>
</body>
</html>