Forum Moderators: open
I am having a frustrating time trying to get a simple page layout to work with standards compliance. It works in IE6 'quirks mode' but breaks as soon as I add a DOCTYPE declaration.
All I want is a page that has a title bar across the top and 'Content' (e.g. a 100% x 100% iframe with a vertical scroll bar) in the remaining space. The title bar must hug its content (expand to accommodate what ever is in it), the 'Content' must fill the entire remaining space and the layout must resize correctly with the page.
I would appreciate a general solution to this problem, and it doesn't have to use a table.
The html code is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Test</title>
</head>
<body style='margin:0px; padding:0px; height:100%; width='100%'>
<table border='0' cellspacing='0' cellpadding='0' style='height:100%; width:100%;'>
<tr style='height:1px;'>
<td>
Top
</td>
</tr>
<tr>
<td>
Content
</td>
</tr>
</table>
</body>
</html>
breaks as soon as I add a DOCTYPE
It breaks how? Do any of the details in this thread help:
[webmasterworld.com...]
The formatting breaks in that the top row no longer hugs its content. the page is now divided almost equally across the middle. In fact I think the top row is slightly bigger.
So it's the <tr style='height:1px'> that has completely changed its behaviour.
I'm not arguing whether the 'broken' behaviour is right or wrong, It's just that I can't find a new way to achieve my desired layout.
I don't want to remain in IE6 'quirks' mode because I would like my page to format consistently across browsers.
If I understand you correctly you want two parts to the page:
1. Top Section - fluid in height to hold whatever content is there exactly.
Things are much easier if you have a constant size (height anyway) for this Top Content, but the flexibility is another thing altogether.
A height of 1 pixel could not be enough to show even 1 line of text, even though it "works in quirks".
2. Bottom Section - an iframe that fluidly fills the remaining height of the window
CONVENTIONAL FRAMESET?
If the top section is stable in height, then a conventional frameset page (rather than an iframe) will do this for you very neatly. But if the top needs to accomodate a different height on different pages, a frameset does not offer such flexibility.
SIMPLEST CASE
I've been playing with the most basic mark-up I could think of:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body><p>Top Content</p>
<iframe src="content.html" style="width:100%;height:100%;"></iframe></body>
</html>
The big issue, again is the fluid height for the iframe. Percentages here are not working the way you would intuitively think/hope. No height at all defaults to about 6 lines of text. 100% extends below the window. In fact, on IE6, even height:1% extends below the visible window. Now that is just wrong!
This most basic mark-up is rendered quite inconsistently cross-browser. But it's where I would start to understand the various behaviors and look for a solid solution.
Also, if you are willing to use javascript, you could find the client.availHeight and that would give you a value (in pixels) that you can apply to the height (probably using a percentage of that value). Still, it's not going to be exactly what you ask for - so apparently simple and direct - and it won't really accomodate fluidity for the Top Content. And IE is not anywhere near to standard behavior. That really would make life a lot easier - so what else is new?
In short, I'm stumped right now.
The reason the height:1px works in quirks mode is that it is treated as a minimum height and that cell content isn't cropped unless you specifically request it.
I am afraid that for my application the top section cannot be a fixed height (Trust me on this. Until of course I give in and put up with an uglier user interface).
I know, however, that if you want any chance of getting
height:100%;htmlbody<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
html, body {height:100%;}
body {margin:0;padding:0;background:#ccc;}
table {width:100%;height:100%;border:0;}
#toprow {height:1em;}
#contentrow {height:100%;}
#top {background:#ffc;}
#content {background:#cff;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr id="toprow">
<td id="top">
Top<br>top<br>top<br>top
</td>
</tr>
<tr id="contentrow">
<td id="content">
content
</td>
</tr>
</table>
</body>
</html>Background colors are for identifying the different elements: you shouldn't see any gray (the
bodyStill working on it, but feel free to expand on the above.
Ref: 10.5 Content height: the 'height' property [w3.org]
If the height of the containing block is not specified explicitly* (i.e., it depends on content height), the value is interpreted like 'auto'.
*- And "explicitly" doesn't mean a percentage value, but a pixel (or other fixed) value.
