10 replies [Last post]
bmelloni
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2005-09-20
Posts: 13
Points: 0

I'd like to move away from tables and IE quirks mode. I have researched CSS layouts and all I can find are simplistic solutions that cannot be expanded to replicate my application's current behavior.

I am hoping that someone here can help.

Problem description:

1) Laying out components to use exactly 100% of the parent space (not more, not less). Think of the usual header/sidebar/body/footer layout, but it may take any shape, in any combination.

2) A given component may use (a) The space actually used by the compent, (b) a specified size, or (c) x% of the parent space (often 100%).

3) If a component is smaller than the specified size or % of parent space specified, it must expand to it and fill with whitespace (as can happen when using a DIV and a 100% width/height inside it).

4) If a component is bigger than the specified size (or % of parent space) then it should get an internal scrollbar for the component so that it does not exceed the size.

5) The component is ignorant of parent space (being dynamically generated) and may be as complex as a full layout of components with further components inside... etc.

6) The top-level parent space component is the page, at height=100% and width=100%. This means that a page will always use all of the space in the browser window, and never require a browser scrollbar (but may have one or more internal scrollbars).

7) Simplified example page (not pretty nor elegant, but functional):

https://bugzilla.mozilla.org/attachment.cgi?id=185299 .

Just run it in IE 6.0 and you will see the desired behavior. Run in Firefox and you see the actual behavior. For a more complex layout, imagine the whole page being inserted in the main body (where the column of X are).

sperks
Offline
Enthusiast
New York
Last seen: 12 years 44 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

100% layout - tables to CSS layouts - need help

In order to give myself a better chance of help in the future, I've given this one a stab for you. There are probably other ways to do this, but I think you'll realize that this is a lot cleaner than your tables. You'll have to play around with it from here to get it the way you want it (it's the only way to learn...)

Cheers
Steve

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmls="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<style type="text/css">
body {
	margin: 0;
	color: #575529;
	background-color: #cdcd9c;
	font-family: Century Gothic, Copperplate Gothic Light, Arial, Helvetica, sans-serif;
	font-size: 9pt;
}
a {
	color: #8C4600;
	text-decoration: none;
}
a:hover {
	color:  #562429;
}
#menutop {
	border-top:#575529 20px solid;
	line-height: 20px;
	padding-left: 15px;
	color: #575529;
	background-color: #b6aa5a;
	font-family: Century Gothic, Copperplate Gothic Light, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	text-decoration: none;
}
#menutop span {
	float: right;
}
#menutop span a {
	font-weight: bold;
	padding: 0 5px;
}
#menuleft {
	width: 180px;
	padding: 10px;
	background-color: #cdcd9c;
	float: left;
}
#content {
	position:absolute;
	top: 40px;
	left: 200px;
	right: 0;
	height:85%;
	background: #fff;
	overflow:auto;
	z-index:2;
}
#content div {
	overflow:auto;
}
#footer {
	position: absolute;
	bottom: 20px;
	left: 45%;
	display: block;
	clear: right;
	color: #fff;
	line-height: 20px;
	text-align: center;
	line-height:5%;
}
</style>
</head>

<body>
<div id="menutop" class="maxw">
	<span><a href="http://localhost:8080/tc/">Portal</a>
	<a href="http://localhost:8080/tc/TcLogoffInit.do" class="menu_top">Logoff</A></span>
	<a href="http://localhost:8080/tc/TcInit.do">Teacher Info Center</a>
</div>
<div id="menuleft">
                   Menu here
</div>
<div id="content">
	<h1>Title Here</h1>
	<div>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	<p>x</p>
	</div>
</div>
<div id="footer">&#xA9; 2003-2005 <a href="http://www.akuratus.com">Akuratus</a>
        |
        <a href="#">Privacy</a>
</div>
</body>
</html>

bmelloni
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2005-09-20
Posts: 13
Points: 0

100% layout - tables to CSS layouts - need help

Extremely nice. It looks quite likely that I can adapt this to all the necessary complexity.

As you can probably tell from the layout, once you insert similarly complex layouts in the content window (ie. tabs panels, forms, etc) this layout behaves very similarly to a native Windows or Java Swing application, with intuitive navigation and behavior. It is a very powerful format and it was frustrating having it work only in IE before.

You will probably not believe it, but several dozen people (half a dozen in my company and many more in various forums) have tried to do precisely this over the last year, and failed.

THANK YOU!!!!

bmelloni
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2005-09-20
Posts: 13
Points: 0

100% layout - tables to CSS layouts - need help

I noticed that the fully CSS2 compliant approach you suggested does not work in IE 6.

Is it safe to assume that if I detect the browser (and code accordingly) I can still use CSS layouts for IE, or should I keep the tables for IE?

sperks
Offline
Enthusiast
New York
Last seen: 12 years 44 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

100% layout - tables to CSS layouts - need help

You shouldn't do browser detection! I'm not sure what I changed, but it worked fine on IE6 prior to posting, so I'm sure there's a solution with a little change. I'm learning the complexities of standards too, and while I can get pretty much most of my desired layout, it's sometimes difficult, and by the nature of standards not advisable, to set a layout in stone. However, now that you have the basic idea, my suggestion is to do some in depth searching for 100% page height solutions with overflow: auto;

Don't give up!

bmelloni
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2005-09-20
Posts: 13
Points: 0

100% layout - tables to CSS layouts - need help

I am still pulling my hair out. Sad

Assigning the exactly right height to the DIV with the overflow:auto is an absolute nightmare. The problem seem to be that:

a) Setting position:absolute is essential for proper layouts, but absolutely positioned DIVs are not subtracted when you do height (or width): 100%, and there is no such thing as height: (100%-50px) or height="whatever space is free".

b) Using something like height: 95% is a close approximation to leave space for the footer, but does not look professional when you resize the browser window.

c) I found a promising (even if processor-intensive) Javascript approach to measure the browser window size and assign the size of the scrolling div "on the fly". But it might not be suitable for heavy nesting of layouts... I will try it tomorrow.

d) I found many approaches mentioned in the forum, but except for (c) they all seem to be simplistic compromises that don't fix a DIV to *exactly* 100% of free space.

I am not giving up, but I am ready to scream in frustration. I thought CSS layouts were supposed to be an improvement over table-based layouts, but my impression is that CSS isn't really suited to handle anything as complex as a professional business application. Checking out for the day... and getting a drink to forget this stuff for the day. :roll:

If I find a viable solution I am going to have to write it down and post it. Web developers desperately need a solution that works *all the time*.

sperks
Offline
Enthusiast
New York
Last seen: 12 years 44 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

100% layout - tables to CSS layouts - need help

bmelloni wrote:

If I find a viable solution I am going to have to write it down and post it. Web developers desperately need a solution that works *all the time*.


Thus the push to standards...

One of the facts that is often forgot is that we're designing for web applications, not for a piece of A4.

I don't have the time myself to see if you can make it work, but I saw a piece on percent +/- pixel just the other day over at http://www.cssplay.co.uk/boxes/outside.html
You should get yourself over there and see if you can get it going...

bmelloni
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2005-09-20
Posts: 13
Points: 0

100% layout - tables to CSS layouts - need help

Neat trick, it might be the silver bullet I'm missing. But I would have never guessed it. I hope future versions of the CSS standard are more developer-friendly.

I'll try it today. I have been granted an almost "open window" to make our app work on Firefox (in addition to IE)... so even if it is frustrating, I can dedicate myself 100% to this.

I'll report the results.

bmelloni
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2005-09-20
Posts: 13
Points: 0

100% layout - tables to CSS layouts - need help

=================
SOLUTION
=================

Thanks to Sperk's link to Stuart Nicholls site (which I used as a starting point), here is the solution to this layout problem. Any mistakes are all mine.

http://12.96.167.147/tc/tests/frames.html

It stills "feels" very unnatural and is quite fragile (a little change here messes up a whole section over there), but this proves that CSS Layouts are a valid alternative to tables and 100% width/height for complex layouts, plus it is not limited to IE.

As I test a couple of more complex "content" I will continue to post them here, in the hope that it will reduce the pain for the "next person" trying to do this.

sperks
Offline
Enthusiast
New York
Last seen: 12 years 44 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

100% layout - tables to CSS layouts - need help

from:

 
    <TR> 
      <TD class="banner_bg" class="maxw"> 
        <TABLE cellpadding="0" cellspacing="0" class="maxw_noborder"> 
          <TR BGCOLOR="#464420"><TD class=maxw>&nbsp;</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">&nbsp;</TD> 
 
                  <TD nowrap align="right" style="font-weight: bold;"> 
                    <A href="http://localhost:8080/tc/" class="menu_top">Portal</A> 
                    &nbsp;&nbsp; 
                    <A href="http://localhost:8080/tc/TcLogoffInit.do" class="menu_top">Logoff</A>&nbsp;&nbsp;&nbsp;&nbsp; 
                  </TD> 
                </TR> 
              </TABLE> 
            </TD> 
 
          </TR> 
        </TABLE> 
      </TD> 
    </TR> 

to:
 
<div id="menu"> 
  <div id="menuTitle"><a href="http://12.96.167.147/tc/TcInit.do">Teacher Info Center</a></div> 
  <div id="menuUser">Cool Teacher</div> 
  <div id="menuLinks"> 
    <select name="langValue" onchange="submitForm( window.document.topMenuForm, 'refresh' );"> 
      <option value="en">English</option> 
      <option value="es">Spanish</option> 
 
    </select>&nbsp;&nbsp;&nbsp; 
    <a href="http://12.96.167.147/tc/">ISD Home</a>&nbsp;&nbsp;&nbsp; 
    <a href="http://12.96.167.147/tc/">Portal</a>&nbsp;&nbsp;&nbsp; 
    <a href="http://12.96.167.147/tc/TcLogoffInit.do">Logoff</a> 
  </div> 
</div>


and that was just the top nav! Laughing out loud

You should lose the &nbsp;'s too though

Keep the original html handy for prosperity...

bmelloni
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2005-09-20
Posts: 13
Points: 0

100% layout - tables to CSS layouts - need help

Yup, it is shorter, which is quite good.

The fire test will be when the code goes back to being generated "on-the-fly", with no awareness of "whatever is around it". But I am not ready to tackle that one quite yet - I have several progressively harder tests to do before jumping in with the lions and converting the code from HTML back to JSP/Struts/Tiles/Hibernate.

But I now look forward to it istead of dreading it. Smile Lion barbecue is on the horizon. \:D/