Alternative for framed site

[Nico Schuyt]

Long long time ago I built a framed site: http://www.vleeskens.nl/
The layout was designed in Corel Draw by someone else and I was not allowed
to change it. At that time I couldn't think of an an alternative for frames.
New atempt:
A (stable) layout with only div boxes seems to be impossible to make with
this layout.
On http://www.vleeskens.nl/p_basis2.htm an iframe is applied and some more
CSS. Could be an improvement but I don't like iframes.
On http://www.vleeskens.nl/p_div.htm a design using a table in combination
with a scrollable div. A snippet of javascript is used to make it scrollable
in Mozilla based browsers. Result looks good in IE but in FireFox it
collapses and in Opera it's bad: The content div has no height.

The problem could be solved if I knew how to assign a height: 90% to a div
in a table with height: 100%.
Anyone an idea how to realize that?

 

[Spartanicus]

The problem could be solved if I knew how to assign a height: 90% to a div
in a table with height: 100%.

body{margin:0;padding:0}
html,body,table,td{height:100%}
div{height:90%}

 

[Nico Schuyt]

"Nico Schuyt" wrote:

body{margin:0;padding:0}
html,body,table,td{height:100%}
div{height:90%}

Well, that's in principal the same as I did.
I added an overflow:auto to the div in your code and end up in
http://www.vleeskens.nl/p_height.htm
IE: OK
FF: Table is too high
Opera: The div has a height of zero :-(

 

[Spartanicus]

Well, that's in principal the same as I did.
I added an overflow:auto to the div in your code and end up in
http://www.vleeskens.nl/p_height.htm
IE: OK
FF: Table is too high
Opera: The div has a height of zero :-(

http://homepage.ntlworld.com/spartanicus/nico.htm

 

[Nico Schuyt]

http://homepage.ntlworld.com/spartanicus/nico.htm

OK, that works fine. The problem occurs when there's more text. IE handles
it correctly with overflow:auto but FF en Opera fail :-(

 

[Spartanicus]

OK, that works fine. The problem occurs when there's more text. IE handles
it correctly with overflow:auto but FF en Opera fail :-(

I can't be bothered to look up the why, but I can guarantee you that IE
get's it wrong, and FF & Opera get it right.

Ditching the table would probably solve it, but you should dump the
whole idea, scrolling divs are a usability nightmare.

 

[Nico Schuyt]

I can't be bothered to look up the why, but I can guarantee you that
IE get's it wrong,

I'm not so sure. The browser is instructed (suggested to render a table
as 100% height
of window size and a div with 90% of the height of the cel. IE does so.

and FF & Opera get it right.

FF and Opera render the page completely different

Ditching the table would probably solve it, but you should dump the
whole idea, scrolling divs are a usability nightmare.

The alternatives (frame and iframe) are not ideal too. I don't think it's
possible to create this specific design with div's only.

Thanks anyway!

 

[Lauri Raittila]

OK, that works fine. The problem occurs when there's more text. IE handles
it correctly with overflow:auto but FF en Opera fail :-(

Opera 7.5 IIRC handle isssue better than older/newer. Try applying width,
it fixes issue on all Opera 7, IIRC.

 

[Nico Schuyt]

Opera 7.5 IIRC handle isssue better than older/newer.

"Best viewed with Opera 7.5000000"

Try applying
width, it fixes issue on all Opera 7, IIRC.

A width property on the div has no effect in Opera 7.54
(http://www.vleeskens.nl/p_height.htm) :-(

 

[Lauri Raittila]

"Best viewed with Opera 7.5000000"

Actually, it is not exactly same problem...
I didn't notice your undefined use of CSS:

http://www.w3.org/TR/CSS21/tables.html#height-layout
http://www.w3.org/TR/CSS2/tables.html#height-layout
| CSS 2[.1] does not define what percentage values of 'height' refer to
| when specified for table cells.

A width property on the div has no effect in Opera 7.54
(http://www.vleeskens.nl/p_height.htm) :-(

Add:
td {position:relative;}
div {position:absolute;}

And it magically starts working on Opera 8b2...

You can see the bug I was talking about here:
http://www.student.oulu.fi/~laurirai/_bugs/position_bug_incorrect.html

 

[Nico Schuyt]

"Best viewed with Opera 7.5000000"

Actually, it is not exactly same problem...
I didn't notice your undefined use of CSS:

http://www.w3.org/TR/CSS21/tables.html#height-layout
http://www.w3.org/TR/CSS2/tables.html#height-layout

CSS 2[.1] does not define what percentage values of 'height' refer to
when specified for table cells.

A width property on the div has no effect in Opera 7.54
(http://www.vleeskens.nl/p_height.htm) :-(

Add:
td {position:relative;}
div {position:absolute;}
And it magically starts working on Opera 8b2...
You can see the bug I was talking about here:
http://www.student.oulu.fi/~laurirai/_bugs/position_bug_incorrect.html

What on earth made you think of that solution? Was it trial and error or is
it genius? A compliment anyway.
Works great in Opera! In IE however the border of the table cell disappears
and in FF the width of the div is not related to the width of the cell.
http://www.vleeskens.nl/p_height.htm

 

[Lauri Raittila]

Lauri Raittila wrote:
in alt.html, Nico Schuyt wrote:
Spartanicus wrote:

http://homepage.ntlworld.com/spartanicus/nico.htm

OK, that works fine. The problem occurs when there's more text. IE
handles it correctly with overflow:auto but FF en Opera fail :-(

Opera 7.5 IIRC handle isssue better than older/newer.

"Best viewed with Opera 7.5000000"

Actually, it is not exactly same problem...
I didn't notice your undefined use of CSS:

http://www.w3.org/TR/CSS21/tables.html#height-layout
http://www.w3.org/TR/CSS2/tables.html#height-layout

CSS 2[.1] does not define what percentage values of 'height' refer to
when specified for table cells.

A width property on the div has no effect in Opera 7.54
(http://www.vleeskens.nl/p_height.htm) :-(

Add:
td {position:relative;}
div {position:absolute;}
And it magically starts working on Opera 8b2...
You can see the bug I was talking about here:
http://www.student.oulu.fi/~laurirai/_bugs/position_bug_incorrect.html

What on earth made you think of that solution?

Accident. I tried on what happens when I remove top:0...

Was it trial and error or is it genius?

Actually, it just uses bug in Opera, which I didn't first see. It seems
to be that Opera ignores td with position:relative, and thus uses
viewport height. Easy to see by adding
table {margin-top:1em;}
div {top:0;}

So, this is actually yet another bug in Opera... X-posting to
opera.page-display...

Correct way would be

div {position:absolute;top:0;bottom:10%;}

Works great in Opera! In IE however the border of the table cell disappears
and in FF the width of the div is not related to the width of the cell.
http://www.vleeskens.nl/p_height.htm

Tables and overflow have been problem since beginning.
It's ironic as most natural and only good use I can think for overflow
property is:
table {max-height:100%;}
tbody {overflow:auto;}

(limiting table to be maximum of viewport height, and keep headers and
footer on place while scrolling table content...)

Of course, it is hardly surprising as tables are least and worst
supported HTML thing, and overflow is same for CSS. AFAIK there is no
browser that would do either correctly, let alone both...

 

[the idiot]

Long long time ago I built a framed site: http://www.vleeskens.nl/
The layout was designed in Corel Draw by someone else and I was not allowed
to change it. At that time I couldn't think of an an alternative for frames.
New atempt:
A (stable) layout with only div boxes seems to be impossible to make with
this layout.
On http://www.vleeskens.nl/p_basis2.htm an iframe is applied and some more
CSS. Could be an improvement but I don't like iframes.
On http://www.vleeskens.nl/p_div.htm a design using a table in combination
with a scrollable div. A snippet of javascript is used to make it scrollable
in Mozilla based browsers. Result looks good in IE but in FireFox it
collapses and in Opera it's bad: The content div has no height.

The problem could be solved if I knew how to assign a height: 90% to a div
in a table with height: 100%.
Anyone an idea how to realize that?

erm i hope i havent misread but.... you say you used a bit of javascript to
make the scrolling div work in mozilla based browsers - i have scrolling
divs on a website i have done www.seanmcallister.com and it works in
mozilla and firefox and opera without any javascript.....

 

[the idiot]

I can't be bothered to look up the why, but I can guarantee you that IE
get's it wrong, and FF & Opera get it right.

Ditching the table would probably solve it, but you should dump the
whole idea, scrolling divs are a usability nightmare.

--

you cant say that - ive only just started using scrolling divs instead of
iframes ;-] ... what do you mean about them being a usability nightmare?

 

[Nico Schuyt]

"Nico Schuyt" wrote in message

erm i hope i havent misread but.... you say you used a bit of
javascript to make the scrolling div work in mozilla based browsers -
i have scrolling divs on a website i have done www.seanmcallister.com
and it works in mozilla and firefox and opera without any
javascript.....

I looked at the http://www.seanmcallister.com/html/enemy.html, but no
scrolling in FF. In Opera only when I first click to get the focus :-(

 

[Spartanicus]

Ditching the table would probably solve it, but you should dump the
whole idea, scrolling divs are a usability nightmare.

you cant say that - ive only just started using scrolling divs instead of
iframes ;-] ... what do you mean about them being a usability nightmare?

It requires users to drag the scrollbar with their mouse, the mouse
wheel won't work, keyboard navigation won't work, it falsely makes it
look like the amount of information on the page is less that what it is,
but only in the visual css enabled domain.

 

[the idiot]

I looked at the http://www.seanmcallister.com/html/enemy.html, but no
scrolling in FF. In Opera only when I first click to get the focus :-(

--

weird cos iver got ff and it works in mine... eek i am using version0.9 back
to the drawing board maybe arghhhh
what about this one http://www.207g.karoo.net/moller1/html/m14.html btw
dont read the words if easily offended....

 

[Nico Schuyt]

in alt.html, Nico Schuyt wrote:
Lauri Raittila wrote:
in alt.html, Nico Schuyt wrote:
Spartanicus wrote:

http://homepage.ntlworld.com/spartanicus/nico.htm

OK, that works fine. The problem occurs when there's more text.
IE handles it correctly with overflow:auto but FF en Opera fail
:-(

Opera 7.5 IIRC handle isssue better than older/newer.

"Best viewed with Opera 7.5000000"

Actually, it is not exactly same problem...
I didn't notice your undefined use of CSS:

http://www.w3.org/TR/CSS21/tables.html#height-layout
http://www.w3.org/TR/CSS2/tables.html#height-layout
CSS 2[.1] does not define what percentage values of 'height' refer
to when specified for table cells.

A width property on the div has no effect in Opera 7.54
(http://www.vleeskens.nl/p_height.htm) :-(

Add:
td {position:relative;}
div {position:absolute;}
And it magically starts working on Opera 8b2...
You can see the bug I was talking about here:
http://www.student.oulu.fi/~laurirai/_bugs/position_bug_incorrect.html

What on earth made you think of that solution?

Accident. I tried on what happens when I remove top:0...

Was it trial and error or is it genius?

Actually, it just uses bug in Opera, which I didn't first see. It
seems to be that Opera ignores td with position:relative, and thus
uses viewport height. Easy to see by adding
table {margin-top:1em;}
div {top:0;}

So, this is actually yet another bug in Opera... X-posting to
opera.page-display...

Correct way would be

div {position:absolute;top:0;bottom:10%;}

Works great in Opera! In IE however the border of the table cell
disappears and in FF the width of the div is not related to the
width of the cell. http://www.vleeskens.nl/p_height.htm

Tables and overflow have been problem since beginning.
It's ironic as most natural and only good use I can think for overflow
property is:
table {max-height:100%;}
tbody {overflow:auto;}

(limiting table to be maximum of viewport height, and keep headers and
footer on place while scrolling table content...)

Of course, it is hardly surprising as tables are least and worst
supported HTML thing, and overflow is same for CSS. AFAIK there is no
browser that would do either correctly, let alone both...

OK, thanks so far Lauri! I think the conclusion of this little excercise is
that it's not advicable to use a scrollable div to create this layout.
Unless you have a better solution I think I'll apply an iframe with a
complete alternative text.

 

[the idiot]

I looked at the http://www.seanmcallister.com/html/enemy.html, but no
scrolling in FF. In Opera only when I first click to get the focus :-(

erm opera 7.5 and 7.6 they work fine too.... (for me)
i think i may have to get out my gun...

 

[the idiot]

Ditching the table would probably solve it, but you should dump the
whole idea, scrolling divs are a usability nightmare.

you cant say that - ive only just started using scrolling divs instead of
iframes ;-] ... what do you mean about them being a usability nightmare?

It requires users to drag the scrollbar with their mouse, the mouse
wheel won't work, keyboard navigation won't work, it falsely makes it
look like the amount of information on the page is less that what it is,
but only in the visual css enabled domain.

--

eek but
whats wrong with it 'falsley making it look like the amount of info on the
page is less than what it is' i dont understand

cheers though...