Resize inner DIV to fill up outer DIVs height in IE 6

[ckirchho]

Hallo,

please take a look at http://www.digitale-bibliothek.de/Maschinentechniker/METS2a/index.htm.

When the window is resized, the JavaScript does two things:
- adjust the height of the DIV that contains the treeview
- adjust the size of the image on the right side

In IE 6, neither of that is done correct. My initial problem was to
tell IE 6 in CSS that the left column DIV (#left) should span over the
whole height of the window. I did that with "position: absolute; top:
0; bottom: 0;"

But I learned that that's not possible in IE 6, and that I instead
should use
* html body {
height: 100%;
}

* html body #left {
height: 100% !important;
}

The height of the treeview, in order to fill up the remaining space,
is the height of the outer DIV minus the height of the "toolbar", and
optional the height of a search form that is toggled on and off with
the magnifying glass on the toolbar.

The resizing code:
function resizeTree() {
leftEl = getElById('left');
if (leftEl == null) return;
toolbarEl = getElById('toolbar');
if (toolbarEl == null) return;
searchEl = getElById('search');
if (searchEl == null) return;
treeEl = getElById('tree');
if (treeEl == null) return;
newHeight = leftEl.offsetHeight - toolbarEl.offsetHeight -
searchEl.offsetHeight;
treeEl.style.height = newHeight + 'px';
}

This works in Firefox and IE 7. In IE 6 the following happens:
- After initially loading the page, the size of the tree is correctly
adjusted.
- When increasing the height of the window, the size is adjusted as
well
- When decreasing the window height, the tree is not adjusted. The
leftEl.offsetHeight always contains the maximum height it has ever
reached. It won't be decreased if you decrease the windows height
again, it only gets bigger as soon as you increase the height over the
last maximum value.
- When I toggle on the searchform, the height of the #left div
increases as well, and the tree is pushed down in order to give space
for the search form, but the tree's height is not adjusted. Or better:
It seems to be adjusted, but the #left div's height is just too big.

Please forgive me if this is a CSS issue and I am wrong here, but
maybe somebody has an idea how to correct this in JavaScript.

Best regards,

Christian Kirchhoff

 

[rf]

Hallo,

please take a look at
http://www.digitale-bibliothek.de/Maschinentechniker/METS2a/index.htm.

Seven hundred and fourty eight kilobytes for that tiny simple page? Crikey!

createtree.js: 249KB? Way too much time on your hands Oh, I see, the
stuff on the left. Is that supposed to be "navigation"?

S01--whatever.png: 391KB? Compress it. Now. It should be at most 30K. And is
this the intro page to your site? Plus, I did not actually see this image
until the second time I viewed the page. Or refreshed it. And why resize it
anyway? The browser canvas area should not be one of your concerns.

Self styled "frames". Nasty IMHO. Worse than the real ones.

And all of this is done in that huge javascript file I suppose? View source
reveals not a lot of stuff.

Bin the lot. Learn some HTML, CSS and use javascript for the simple eye
candy stuff.