- From: Kris Vanderwater <kris@meridian-ds.com>
- Date: Fri, 09 Sep 2005 11:52:33 -0500
- CC: www-style@w3.org
Bruno,
Let's look at this again. 100% of the content of the page MUST be
visible at all times yes?
The footer must ALWAYS show, but can't use frames.
the header and navbar should show also.
The content NEVER exceeds the remaining space? And when it's too small
MUST take up the remaining space?
I can't image it NEVER taking more space then you have, but we can
address that later.
Is this right?
Kris
Bruno Melloni wrote:
> Hello, I need help in finding a CSS standard-compliant solution. Desperately.
>
> We have a web application that *>must<-- be made to fit in the visible portion of the browser window (without browser scrolling) and without frames. There are portions (header, left menu, footer) that are fixed sized and are allowed to "collapse" to minimum size. But there are portions (the main body and often pieces of it) that need to get 100% of the remaining visible space. The footer must always be visible.
>
> As typical J2EE developers that have used CSS for years, with most of our knowledge coming from simple online tutorials, and online references, but having never really studied CSS from front to back we used the following "intuitive" approach:
>
> 1) We used nested tables for the layout with CSS' "height: 100%" for the "chain" of nested items that needed to get 100%.
>
> 2) We used DIVs with "height:100%; overflow: auto" to make sure that we used all of the space and no more than that, in the situations where we needed an internal scrollbar.
>
> The code worked in IE (we later discovered that it was because we were running in quirks mode) but not in Firefox/Mozilla or even in IE in standards-compliant mode. In standard-compliant mode the application will properly expand to use all the space, but will not limit itself to the size of the window (as if the DIV overflow wasn't there).
>
> We have been looking for a standards-compliant solution for a year. We received many suggestions, but none worked. We arestuck with a non-Windows application that will only run as it was intended in a Windows browser!!!
>
> Is there a way to make our approach work?
>
> If not, is there an alternative approach to achieve the exact look-and-feel behavior that we are currently getting with IE?
>
> I hope someone can help.
>
> Bruno
>
> *-----------------------------------
> The following is a sample HTML/CSS that can be used to see the desired behavior (in IE) and the unwanted behavior (in standards-compliant mode, or Mozilla-based browser in default quirk mode). The difference is in the bottom of the browser window, and the (internal) scrollbar in the right.
>
> <html>
> <HEAD>
> <STYLE type="text/css">
> BODY {
> margin: 0;
> padding: 0;
> color: #575529;
> background-color: #CDCD9C;
> font-family: Century Gothic, Copperplate Gothic Light, Arial, Helvetica, sans-serif;
> font-size: 9pt;
> text-decoration: none;
> }
> A {
> /*color: #575529;*/
> color: #8C4600;
> text-decoration: none;
> }
> A:hover {
> color: #562429;
> text-decoration: none;
> }
> DIV {
> width: 100%;
> height: 100%;
> overflow: auto;
> /*
> position: absolute;
> max-width: 100%
> min-height:100%;
> max-height: 100%
> top: 0;
> bottom: 0;
> */
> }
> UL.none {
> list-style-type: none;
> }
> .maxw {
> width: 100%;
> max-width: 100%
> }
> .maxh {
> height: 100%;
> max-height: 100%;
> }
> .maxwh {
> width: 100%;
> height: 100%;
> max-width: 100%
> max-height: 100%
> }
> .maxwh_noborder{
> border: 0;
> width: 100%;
> height: 100%;
> max-width: 100%
> max-height: 100%
> }
> .maxw_noborder{
> border: 0;
> width: 100%;
> max-width: 100%
> }
> .maxh_noborder{
> border: 0;
> height: 100%;
> max-width: 100%
> max-height: 100%
> }
> .banner_bg {
> background-color: #575529;
> }
> .menu_top {
> height: 17;
> margin-left: 15;
> color: #575529;
> background-color: #B6AA5A;
> font-family: Century Gothic, Copperplate Gothic Light, Arial, Helvetica, sans-serif;
> font-size: 8pt;
> text-decoration: none;
> }
> .menu_left {
> color: #575529;
> background-color: #CDD0B9;
> font-family: Century Gothic, Copperplate Gothic Light, Arial, Helvetica, sans-serif;
> font-size: 9pt;
> text-decoration: none;
> }
> .pg_title {
> font-size: 12pt;
> font-weight: bold;
> }
> .footer_separator {
> width: 100%;
> height: 17px;
> background-color: #B6AA5A;
> }
> .footer_text {
> color: #575529;
> font-family: Century Gothic, Copperplate Gothic Light, Arial, Helvetica, sans-serif;
> font-size: 7.5pt;
> text-decoration: none;
> margin-top: 2;
> margin-bottom: 0;
> text-align: center;
> }
> </STYLE>
> </HEAD>
>
> <BODY topmargin="0" leftmargin="0" class="maxwh">
> <TABLE cellpadding="0" cellspacing="0" class="maxwh_noborder">
> <TBODY>
> <TR>
> <TD class="banner_bg" class="maxw">
> <TABLE cellpadding="0" cellspacing="0" class="maxw_noborder">
> <TR BGCOLOR="#464420"><TD class=maxw> </TD></TR>
> </TABLE>
> </TD>
> </TR>
> <TR>
> <TD class="menu_top" width="100%">
> <TABLE cellpadding="0" cellspacing="0" class="maxw_noborder">
> <TR class="menu_top">
> <TD width="170" nowrap>
> <A href="http://localhost:8080/tc/TcInit.do" class="menu_top">
> <B>Teacher Info Center</B>
> </A>
> </TD>
> <TD class="maxw">
> <TABLE cellpadding="0" cellspacing="0" class="maxw_noborder">
> <TR class="menu_top">
> <TD nowrap class="menu_top">Teacher Best</TD>
> <TD class="maxw"> </TD>
> <TD nowrap align="right" style="font-weight: bold;">
> <A href="http://localhost:8080/tc/" class="menu_top">Portal</A>
>
> <A href="http://localhost:8080/tc/TcLogoffInit.do" class="menu_top">Logoff</A>
> </TD>
> </TR>
> </TABLE>
> </TD>
> </TR>
> </TABLE>
> </TD>
> </TR>
> <!-- *************** BOTTOM 2 PANELS START HERE ************** -->
> <TR>
> <TD class="maxwh">
> <TABLE cellpadding="0" cellspacing="0" class="maxwh_noborder">
> <TR>
> <!-- Left panel starts here (irrelevant) -->
> <TD width="170" class="maxh">
> <TABLE cellpadding="0" cellspacing="0" class="maxh_noborder" width="170">
> <TR><TD height="10" class="menu_left"> </TD></TR>
> <TR>
> <TD valign="top" class="menu_left" style="height: 100%; max-height: 100%;" width="170">
> Menu here
> </TD>
> </TR>
> </TABLE>
> </TD>
> <!-- *********** BOTTOM-RIGHT PANEL STARTS HERE ************* -->
> <TD valign="top" class="maxwh">
> <TABLE cellpadding="0" cellspacing="0" class="maxwh_noborder" >
> <TR>
> <TD width="15"> </TD> <!-- left spacing -->
> <TD class="maxwh"> <!-- MAIN BODY -->
> <TABLE cellpadding="0" cellspacing="0" class="maxwh_noborder">
> <TR><TD> </TD></TR>
> <TR>
> <TD>
> <TABLE cellpadding="0" cellspacing="0" class="maxw_noborder">
> <TR><TD class="pg_title">Title Here</TD></TR>
> </TABLE>
> </TD>
> </TR>
> <TR>
> <TD height="10"></TD>
> </TR>
> <form name="teacherViewForm" method="POST" action="/tc/TeacherViewPost.do">
> <TR>
> <TD class="maxwh">
> <DIV>
> <TABLE cellpadding="0" cellspacing="4" class="pgmaxwh">
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> <TR><TD>x</TD></TR>
> </TABLE>
> </DIV>
> </TD>
> </TR>
> </FORM>
> </TABLE>
> </TD>
> <TD width="15"> </TD>
> </TR>
> </TABLE>
> </TD>
> </TR>
> </TABLE>
> </TD>
> </TR>
> <TR>
> <TD valign="top" class="footer_separator"> </TD>
> </TR>
> <TR>
> <TD class="footer_text">© 2003-2005
> <A href="http://www.akuratus.com" class="footer_text">Akuratus</A>
> |
> <A href="#" class="footer_text">Privacy</A>
> </TD>
> </TR>
> </TBODY>
> </TABLE>
> </BODY>
> </html>
>
>
> Bruno Melloni
> Director of Software Architecture
> Akuratus Corporation
> 1333 N. Stemmons Fwy, Suite 110
> Dallas, Texas 75207
> Phone: 469.227.0920
> Fax: 469.227.0967
> bruno.melloni@akuratus.com
> www.akuratus.com
>
Received on Friday, 9 September 2005 16:43:17 UTC