percentage height divs in Mozilla

I've managed to achieve the effect I wanted in IE6 - although I had to
use an experession to set the vertical height of a div (I want it to
have an overflow and scroll) but I can't work out a way to duplicate
the effect in Mozilla/Firefox

the code is here:
http://www.fogcat.co.uk/example/example.html

Can anyone point me in the right direction - or at least tell me if it
is or isn't possible to get the same functionality in Firefox

(I don't have access to Opera, Konquerer and Safari at the moment so
I'm not even starting to worry about them.)

If ALL else fails and you simply must have a segment that scrolls like that,
you can always use frames (ick).

Jeff

Vic wrote:

I've managed to achieve the effect I wanted in IE6 - although I had to
use an experession to set the vertical height of a div (I want it to
have an overflow and scroll) but I can't work out a way to duplicate
the effect in Mozilla/Firefox

the code is here:
http://www.fogcat.co.uk/example/example.html

Can anyone point me in the right direction - or at least tell me if it
is or isn't possible to get the same functionality in Firefox

(I don't have access to Opera, Konquerer and Safari at the moment so
I'm not even starting to worry about them.)

Imteresting that you use the Strict DTD and yet use MS Proprietory code
for height which only IE recognizes (do you see the conflict there?).
Use the proper height declaration as per:
http://www.w3.org/TR/CSS21/visudet.html#propdef-height
which every browser, including IE, recognizes. Then you will have a
vertical scrollbar for all.

--
Gus

Gus Richter <gusrichter (AT) netscape (DOT) net> wrote

Imteresting that you use the Strict DTD and yet use MS Proprietory code
for height which only IE recognizes (do you see the conflict there?).
Use the proper height declaration as per:
http://www.w3.org/TR/CSS21/visudet.html#propdef-height
which every browser, including IE, recognizes. Then you will have a
vertical scrollbar for all.

Yes I know I'm using proprietory MS stuff - I started off trying to be
strict about the standards but the only way I could get the result I
wanted was to use the MS expression. I was hoping someone could point
me to a proper standard way of doing it.

The problem is, I believe, that I need a fixed (pixel) space above my
scrolling div for the logo, menu etc, but then I want the scrolling
area to expand to fill the rest of the window: therefore the height of
my scrolling div needs to be something like 100% - 170px.

If I use a fixed height like 400px things "work" but the vertical
height of the scrolling div doesn't change when the window is resized.
http://www.fogcat.co.uk/example/example2.html

If I use a percentage height (say 50%) it's closer - but again the
size of the scrolling div doesn't match the window size properly.
http://www.fogcat.co.uk/example/example3.html

I could do this if my scrolling div was related to the window by
percentage values all round but because i want a fixed size logo at
the top I'm getting difficulties.

I had a bit of a re-think and tried something slightly different, all
standard I think:
http://www.fogcat.co.uk/example/example5.html

With some interesting results, when you display the page in IE6 it's
not correct on initial display, but if you resize the IE window even
slightly it corrects its self and displays how I was hoping it would.
Very odd... but it is IE.

In Firefox it degrades fairly safely - but it still doesn't display a
scroll bar for the content div. It seems as though in Firefox it's
allowing the containing div (bottomHalf) for be auto expanded even
though I set its height to 100%.

Thank's for all your help there, much appreciated. I have now got
something that seems to work - it involves using some very thick top
and bottom borders to position the scrolling area.

I "borrowed" the idea from:
http://www.stunicholls.myby.co.uk/layouts/bodyfix.html

My implementation is at
http://www.fogcat.co.uk/example/ex10.html

Vic wrote:

Thank's for all your help there, much appreciated. I have now got
something that seems to work - it involves using some very thick top
and bottom borders to position the scrolling area.

I "borrowed" the idea from:
http://www.stunicholls.myby.co.uk/layouts/bodyfix.html

My implementation is at
http://www.fogcat.co.uk/example/ex10.html

I'm glad you have found another method, but you do realize that sadly
this one won't work with IE 5.5, whereas the method I presented does?

--
Gus