peg the height of a table to 90% of the screen

[Phlip]

HTMLers:

Start with this simple HTML:

<table border='1' width='100%' height='90%'>
<tr><td>
<div style='overflow: auto'>
</div>
</td></tr>
</table>

What does it look like it will do? If the table sets the rules and its
inside things follow, then the table should peg to 100% by 90%, right?

The goal is the <divgets a scroll bar so its internals are always in
a viewport inside the screen.

So now put your cursor inside the <div>, and paste all this in:

http://etext.virginia.edu/stc/Coleri...t_Mariner.html

Not good. The table now sets its size based on the div, which detects
no overflow. Putting height tags in other places doesn't work (in
Firefox). No scroll bar appears, and the poetry overflows the
browser's page.

What's the fix? I don't want to peg the table to height: 45ex, for
example, because I target any resolution.

--
Phlip

[Ben C]

On 2007-02-23, Phlip <ph*******@gmail.comwrote:

HTMLers:

Start with this simple HTML:

<table border='1' width='100%' height='90%'>
<tr><td>
<div style='overflow: auto'>
</div>
</td></tr>
</table>

What does it look like it will do? If the table sets the rules and its
inside things follow, then the table should peg to 100% by 90%, right?

The goal is the <divgets a scroll bar so its internals are always in
a viewport inside the screen.

So now put your cursor inside the <div>, and paste all this in:

http://etext.virginia.edu/stc/Coleri...t_Mariner.html

Not good. The table now sets its size based on the div, which detects
no overflow. Putting height tags in other places doesn't work (in
Firefox).

If there's such a thing as <heighttag don't use it!

No scroll bar appears, and the poetry overflows the
browser's page.

What's the fix? I don't want to peg the table to height: 45ex, for
example, because I target any resolution.

Set the height (and overflow: scroll) on the div, not on the table. Or
experiment with table-layout: fixed.

Table cells (with table-layout: auto) don't allow their contents to
overflow, they always grow to at least big enough.

[Ben C]

On 2007-02-23, Ben C <sp******@spam.eggswrote:

On 2007-02-23, Phlip <ph*******@gmail.comwrote:

>HTMLers:

Start with this simple HTML:

<table border='1' width='100%' height='90%'>
<tr><td>
<div style='overflow: auto'>
</div>
</td></tr>
</table>

What does it look like it will do? If the table sets the rules and its
inside things follow, then the table should peg to 100% by 90%, right?

[...]

>What's the fix? I don't want to peg the table to height: 45ex, for
example, because I target any resolution.

Set the height (and overflow: scroll) on the div, not on the table. Or
experiment with table-layout: fixed.

Table cells (with table-layout: auto) don't allow their contents to
overflow, they always grow to at least big enough.

I should have added: remember that percentage heights of auto-height
containers are meaningless and if not ignored by the browser should
be.

So a percentage height on the div in an auto-height table won't work.

With html, body { height: 100%; }, 90% on the table, 100% on the td and
100% and overflow: scroll, on the div you'd think it should work because
the percentages go all the way to the top. This does work in Opera, but
not in FF.

Can you avoid using a table?

[=?windows-1256?B?2tHIINLmx8w=?=]

ÈÓã Çááå ÇáÑÍãä ÇáÑÍíã
ÇÝÖá ãæÞÚ ááÊÚÇÑÝ Èíä ÇáÌäÓ íä ÇáÔÈÇÈ æÇáÈäÇÊ ãä ßá Ïæá ÇáÚÇáã
www.arabzwaj.com

ÈäÇÊ æÔÈÇÈ ÚÇíÒííä íÊÚÑÝæÇ Úáíßã
ÕæÑ ÚÇÑíÉ ÍÞíÞíÉ
ÊÚÇÑÝ ãÌÇäí ãä ßá Ïæá ÇáÚÇáã www.arabzwaj.com
for marrige and friend shipÇÝÖá ÊÚÇÑÝ Èíä ÇáÔÈÇÈ æÇáÈäÇÊ ãæÞÚ ÒæÇÌ
ãÌÇäí www.arabzwaj.com

www.arabzwaj.com ÇÝÖá ãæÞÚ ãÌÇäí ááÊÚÇÑÝ æ ááÒæÇÌ ÇáÔÑÚí

www.arabzwaj.com ÈäÇÊ æÔÈÇÈ ÚÇíÒå ÊÊÚÑÝ Úáíßã

the best web site formarrige and frindship www.arabzwaj.comÇÝÖá ãæÞÚ
ãÌÇäí ááÊÚÇÑÝ æ ááÒæÇÌ

[Phlip]

Ben C wrote:

Can you avoid using a table?

Firstly, the body couldn't be 100% because I need an arbitrary-length
region under the table.

And not using a table worked perfectly. (For future reference: Stop
relying on tables for simple geometry, and use them _only_ for
arbitrarily sized data panels, in the style of spreadsheets!)

I started with a table because I need two independently scrolling
areas, side-by-side. So here's what works:

<div style='overflow: auto;height: 90%; width: 50%; float:left'>
An ancient Mariner meeteth three Gallants...
</div>
<div style='width:50%; border:1px; float: right'>
yo
</div>

Thanks for the tips!

--
Phlip

[Roy A.]

On 23 Feb, 05:24, "Phlip" <[e-mail]:

Start with this simple HTML:

<table border='1' width='100%' height='90%'>
<tr><td>
<div style='overflow: auto'>
</div>
</td></tr>
</table>

The table element don't have a height attrubute, and the width
attribute is deprecated. Use
style="width: 100%; height: 90%" insted.

What does it look like it will do?

You are setting the table height to 90% of something, and that
something has a default height of 'auto', then it look like the
browser will let the table grow to accommodate the height of the
content (without some browser magic). The value of 'auto' is initial
comupted to 0.

If the table sets the rules and its
inside things follow, then the table should peg to 100% by 90%, right?

No. 100 % of 90 % of 'auto' is 100% of the content, i think.

The goal is the <divgets a scroll bar so its internals are always in
a viewport inside the screen.

html, body { height: 100%; margin: 0 auto; padding: 0 auto }
....
<div style="height: 90%">...</div>

So now put your cursor inside the <div>, and paste all this in:

http://etext.virginia.edu/stc/Coleri...t_Mariner.html

Not good. The table now sets its size based on the div, which detects
no overflow. Putting height tags in other places doesn't work (in
Firefox). No scroll bar appears, and the poetry overflows the
browser's page.

Yes indeed, not good. To me it seems like Firefox treat fixed height
and calculated height diffrently. With fixed height; the height is
determined by the 'height' property. With an height in %, the height
is determined by content height. I hope I'm wrong.

What's the fix? I don't want to peg the table to height: 45ex, for
example, because I target any resolution.

The browser is schizophrenic. You can't fix that. Do it right, and let
the browser deside how to render it.
If you want, you couldt try a cocktail with relative and absolute
position values.

[Roy A.]

On 24 Feb, 03:31, "Phlip" <[e-mail]:

Ben C wrote:

Can you avoid using a table?

Firstly, the body couldn't be 100% because I need an arbitrary-length
region under the table.

That's no problem. The overflow property for body is 'visible'.

"This value indicates that content is not clipped, i.e., it may be
rendered outside the block box."

http://www.w3.org/TR/REC-CSS2/visufx...opdef-overflow

And not using a table worked perfectly.

That's because the browsers are correction you attempts to make tings
work. The 'height' property for all elements should is by default
'auto'. Try:
html, body { height: auto }

(For future reference: Stop
relying on tables for simple geometry, and use them _only_ for
arbitrarily sized data panels, in the style of spreadsheets!)

("Do not use tables for layout unless the table makes sense when
linearized. Otherwise, if the table does not make sense, provide an
alternative equivalent (which may be a linearized version).")

http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-alignment

I started with a table because I need two independently scrolling
areas, side-by-side. So here's what works:

<div style='overflow: auto;height: 90%; width: 50%; float:left'>
An ancient Mariner meeteth three Gallants...
</div>
<div style='width:50%; border:1px; float: right'>
yo
</div>

How is that suppose to work? By some browser magic? And it don't
provide two independently scrolling areas, side-by-side.

For future reading:
http://www.w3.org/TR/html401/
http://www.w3.org/TR/REC-CSS2/
http://www.w3.org/TR/WCAG10-TECHS/

[Phlip]

Roy A. wrote:

<div style='overflow: auto;height: 90%; width: 50%; float:left'>
An ancient Mariner meeteth three Gallants...
</div>
<div style='width:50%; border:1px; float: right'>
yo
</div>

How is that suppose to work? By some browser magic?

It works perfectly on Firefox, IE, and Konqueror. (I forgot to mention
the right div contains an IFrame and _that_ scrolls.)

Thanks again for the tips.

--
Phlip