Frames without Frames

Hello Group,

I am experiencing a problem that I am hoping someone on the list can help me
with. I am attempting to build a page using CSS elements to simulate the
effect of frames without using real frames -- this is so that the scripting
that will be applied to a site I am updating will not have to be heavily
modified to cause a change in two separate frames, instead having the script
update a single page. This particular version of the site is being built
EXCLUSIVELY for the use of modern browsers, specifically, Internet Explorer
5.x/6 and Netscape 6, with a slight alteration in the works for Opera 5.
Older, less advanced browsers will get a completely different version of the
site, so they are not included in the testing parameters.

The idea is simple. There is a header section that displays a logo, a bar
indicating the location the visitor is at on the site, and the menubars. The
location bar (and sometimes part of the logo), changes depending upon the
visitor's current placement. At the bottom is a static copyright bar, which
never changes. In the middle is the data region which can be as short as a
few lines, or a couple screens worth of information, which would require a
scrollbar. The data region, if long enough, should allow scrolling without
making the header or footer move off the page at any time. The older and
simpler method would be to use frames, with three page templates building
the necessary data, but this model would require updating at least two of
the frames for each navigation change. Using CSS and multiple DIVs,
including the data region DIV which uses CSS2 coding (positioning, overflow,
etc), the effect of framed navigation WITHOUT the use of frames is acheived.
The header is a fixed height of 100px, the footer is a fixed height of 32px,
and the data region is a variable height based on how much interior space is
actually available within the browser when the page is drawn (it currently
does not dynamically update after a browser resize).

In Netscape 6, this works as described. The header stays put, the footer
stays put, and the middle section scrolls without moving the header or
footer off-screen, or over- or under-writing them. For all intents and
purposes, the page appears to be built from frames.

In IE5.5 (which I tested via a friend's machine), the values for the
available window space are generated properly, but the DIV they are used in
is not locked off properly. This implies that IE5.5 cannot properly use the
overflow and height properties correctly in a DIV, even though in other,
simpler tests, this has worked without problems.

In IE6 (which I have installed on my machine), the values are not acquired
at all, instead resulting in a "0" value. I put a default initial setting
for the height variable of 750 into the code, which should be replaced with
the value of the IE-specific javascript code, but in IE6, this value is not
replaced or even recalculated (it should at least calculate to 618 --
750-132).

In both versions of IE tested, instead of ONE scrollbar for the data region,
there is a scrollbar for the data region (which typically extends below the
usable window space, at least at 1280x1024 resolution), as well as a SECOND
scrollbar for the page as a whole. Scrolling the full page slides
EVERYTHING, header and footer included, and makes for a bizarre occurance
where the footer becomes a band that the data region slides behind.

A basic version of the page which shows the desired template and a
fully-functional result of the above description can be found at
http://www.zydhek.net/cssframingtest.html. I would appreciate people looking
at that page and letting me know 1) if the numbers returned are correct or
as described above in both IE5/6 and NS6, and 2) if there are any obvious
errors in the code that I am missing that is causing the problems in IE, or
if there are any other solutions or workarounds to solve this.

Thanks in advance,
Kehvan M. Zydhek

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA