- From: Bruno Melloni <Bruno.Melloni@akuratus.com>
- Date: Fri, 09 Sep 2005 13:08:19 -0500
- To: <kris@meridian-ds.com>
- Cc: <www-style@w3.org>
Yes, this is exactly it.
As to the "NEVER" you are somewhat right, there are some occasions
where it might exceed the size. We design our pages to be fully
user-friendly at 800x600 monitor resolution. We also allow for
flexibility so that the page retains their "basic look and feel" if the
user shrinks the broswer below that size. The internal scrollbars on
the DIV will normally handle the shrinking.
But of course... as you approach zero size something will eventually
fail, since the header, footer and menu do have a minimum size. But
typically you would not loose the footer until you shrunk so far that
the space between header and footer went to zero (or close to it).
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
>>> Kris Vanderwater <kris@meridian-ds.com> 09/09 11:52 AM >>>
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 18:09:00 UTC