percentage height divs in Mozilla

[Vic]

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.)

[kchayka]

Re: percentage height divs in Mozilla

Vic wrote:[color=blue]
>
> 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
>
> http://www.fogcat.co.uk/example/example.html[/color]

FWIW, as a user, I find these scrolling divs to be a big pain in the
arse, especially with keyboard navigation. I hear mousewheels don't play
nice with them, either.

What do you find so terrible about normal scrolling that would make you
want to use one of these ishy things? Just curious.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Jeff Nibler]

Re: percentage height divs in Mozilla

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

Jeff

[Gus Richter]

Re: percentage height divs in Mozilla

Vic wrote:[color=blue]
> 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.)[/color]

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

[Vic]

Re: percentage height divs in Mozilla

Gus Richter <gusrichter@net scape.net> wrote
[color=blue]
> 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.[/color]

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.

[Vic]

Re: percentage height divs in Mozilla

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%.

[Gus Richter]

Re: percentage height divs in Mozilla

Vic wrote:[color=blue]
> I had a bit of a re-think and tried something slightly different[/color]

I played around with your problem and came up with this.
I hope that it will help.

--
Gus


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {background-color: white; margin: 0; padding: 0; height: 100%; }
#menuBar { position: absolute; top: 100px; background-color: Black;
color:white; width: 100%; height: 50px; }
#logo {position: relative; top:0; left: 10%; width: 80%; border: 1px
solid red; height: 160px; }
#bit2Wrapper { position: absolute; top: 0; left: 10%; width: 80%;
height: 100%; }
#bit2 {position: relative; top:0; left: 10%; width: 80%;
background-color: silver; overflow: auto; height: 200px; top:50%;
margin-top: -20px; }
</style>
</head>
<body>
<div id="logo">
LOGO<br>
This is the latest - trying to center the scrollable box in the
available space and then also when resized.
</div>
<div id="menuBar">
The Menu Bar
</div>

<div id="bit2Wrapper ">
<div id="bit2">
<p>Exercise: to center the scrollable box within the available space
below Logo and Menu Bar and maintain this centering on page resizing (as
I understand the problem).<br>
One thing I don't understand is why you wish the Menu Bar to overlap the
Logo (dimension error? Red border applied).</p>
<p>Although it may be possible, to center a percentage valued box, I'm
unable to achieve it,
so I'm presenting a method where the scrollable box is of a fixed height
value and hopefully it will be either useful as is, or help to achieve
it by using a percentage height value.</p>
<p>All items are clear by looking at the code. The only item which may
require explanation is the method I used to achieve the vertical
centering.</p>
<p>The way I did it, is to position the top edge of the scrollable DIV
down with top:50% and then applied the following formula to get the
value for margin-top:</p>
<pre>
(Logo Height/2) - (Scrollable DIV Height/2)
</pre>
<p>A caveat to this is that overlapping will occur if screen size is
sufficiently decreased.<br>
--<br>
Gus</p>
</div>
</div>

</body>
</html>

[Vic]

Re: percentage height divs in Mozilla

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

[Gus Richter]

Re: percentage height divs in Mozilla

Vic wrote:[color=blue]
> 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[/color]

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