- From: Bruno Melloni <Bruno.Melloni@akuratus.com>
- Date: Fri, 09 Sep 2005 10:37:06 -0500
- To: <www-style@w3.org>
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 15:37:38 UTC