Percentage Height not working

[Les Juby]

I am trying to adjust the window/table size of a website
(www.worklaw.co.za) which has made use of DIV tags with its settings
embedded in an CSS file.

The client wants its width and height to adjust according to dynamic
screen size, and I have been able to adjust the width to a percentage
value which works fine. But if I try do the same with the height it
shows some very strange results squashing the field to display about 3
lines.

The following is copied out of the css file:

.Content {position:relat ive;
left:70px;
height:388px;
width:90%;
top:15px;
overflow:auto;
scrollbar-arrow-color:navy
border-style:solid;
border-width:2px;
border-color:
black #E9E9E9 #E9E9E9 black;
padding:3;
}

I've changed the width to 90% as you can see, but that hasn't helped.
Any ideas why a percentage wouldn't work for height?

Brendon

[Spartanicus]

le*****@anti-spam.iafrica.co m (Les Juby) wrote:

(www.worklaw.co.za) which has made use of DIV tags

A phrase like "I've used div tags" is usually a sign that the poster
completely misunderstood both HTML and CSS, I'm afraid that you are no
different. What you've created is known as "div soup", you have no
structural or semantic markup.

People usually do this in an misguided attempt to get rid of
presentational markup. On that front you buck the trend in that your
code still unashamedly contains deprecated rubbish like <font> and
<center> tags, the usual lavish use of &nbp;s, align attributes and to
top it off tables used for layout.

Currently CSS should be the last of your worries, you really need to
learn how to markup properly first.

--
Spartanicus

[chris]

Hi,

Spartanicus is right. But this doesn't help you anyway at the moment...
height:100%; means 100% of the surrounding Element. If you don't set a
height for the sourrounding Element, it is as heigh as it's content
(plus it's padding). If you set
html, body {height:100%;}
it will work.

Chris

[Barbara de Zoete]

On Fri, 30 Sep 2005 06:48:28 +0200, Les Juby
<le*****@anti-spam.iafrica.co m> wrote:

I am trying to adjust the window/table size of a website
(www.worklaw.co.za) which has made use of DIV tags with its settings
embedded in an CSS file.

The following is copied out of the css file:

.Content {position:relat ive;
left:70px;
height:388px;
width:90%;
top:15px;
overflow:auto;
scrollbar-arrow-color:navy
border-style:solid;
border-width:2px;
border-color:
black #E9E9E9 #E9E9E9 black;
padding:3;
}

This is not verry well writen. First of all take out what ever is in your
styles that attempt to mess with the chrome of the browser (like that
scrollbar thingy). The chrome is not yours to play with. It's mine.

Then try to get some structure in writing your stylesheet. For example, I
use a fixed order for the various properties for selectors. For a selector
that is meant to be used with a block level element, I do:

position, top, left, width, height, padding, border,
margin, background, color, font

Not said that this is the order properties should be dealt with, but just
meaning to tell you that working with a fixed order, helps in the writing
proces (you can't forget much) and helps afterwards to tweak you sheet
(you know where things are).

Thirdly, learn what can be left out. Usually 'overflow:auto; ' shouldn't be
necessary, since it is the default value for a block level element, so,
unless you've set a parent (or higher up the cascade) with an other value
for overflow (hope not), here it is not necessary to set it.
Further more, learn how the shorthand works as a notation for properties
and values. The border properties can often be put together (like
'border:black 2px solid;', although in this case that is a bit hard with
the different colouring of various borders).

A big issue is the sizing in px. If you set sizes of elements for layout
in px and I need to change the size of text for comfortable reading
(larger; hardly ever smaller), it is very likely your precious design
falls apart. To prevent that from happening, use em instead, or any other
relative unit. In any case, use a unit. In your example you've left out
the unit with the value for padding. 'padding:3;' Three what? px? em? Cows?

Than finally: if you use percentages, always make sure that you know what
it takes the percentage off. So 'width:90%;' --> 90% of what? What is the
containing box, the parent block level element?

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Barbara de Zoete]

On Fri, 30 Sep 2005 08:53:33 +0200, ch***@leipold.w s <ch***@leipold. ws>
wrote:

Hi,

Spartanicus is right.
<http://www.safalra.com/special/googlegroupsrep ly/>
But this doesn't help you anyway at the moment...

<http://www.amatecon.co m/fish.html>

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[chris]

Hi,

<http://www.safalra.com/special/googlegroupsrep ly/>

Thanks. Hint taken.

But this doesn't help you anyway at the moment...

<http://www.amatecon.co m/fish.html>

Yeah, you're right, too. But if he starves to death before learning to
fish, it doesn't help either.

Cheers Chris

[Barbara de Zoete]

On Fri, 30 Sep 2005 17:31:53 +0200, ch***@leipold.w s <ch***@leipold. ws> wrote:

<http://www.safalra.com/special/googlegroupsrep ly/>

Thanks. Hint taken.

Thank you for adapting that fast. Really appreciate it. Can you please also
attribute the quotes? That would be perfect. Tia

> But this doesn't help you anyway at the moment...

<http://www.amatecon.co m/fish.html>

Yeah, you're right, too. But if he starves to death before learning to
fish, it doesn't help either.

See, that's why a metaphore almost always gets killed in the following
discussion. :-) Because it is just a metaphore and therefore no better than any
other model, simplifying life.
As I see it, the OP wasn't yet 'starved'. Either way, there was just enough fish
in the dishes to keep him going for a while. Maybe just long enough to actually
learn something too.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Gérard Talbot]

Barbara de Zoete a écrit :

On Fri, 30 Sep 2005 06:48:28 +0200, Les Juby
<le*****@anti-spam.iafrica.co m> wrote:

I am trying to adjust the window/table size of a website
(www.worklaw.co.za) which has made use of DIV tags with its settings
embedded in an CSS file.

The following is copied out of the css file:

.Content {position:relat ive;
left:70px;
height:388px;
width:90%;
top:15px;
overflow:auto;
scrollbar-arrow-color:navy
border-style:solid;
border-width:2px;
border-color:
black #E9E9E9 #E9E9E9 black;
padding:3;
}

This is not verry well writen.

I agree.

First of all take out what ever is in your styles that attempt to mess with the chrome of the browser (like
that scrollbar thingy). The chrome is not yours to play with. It's mine.

Fully agree on this.
Then try to get some structure in writing your stylesheet. For example,
I use a fixed order for the various properties for selectors. For a
selector that is meant to be used with a block level element, I do:

position, top, left, width, height, padding, border,
margin, background, color, font
color and font are inheritable properties so there is no need to declare
these unless the values must differ from its container block's color and
font. Also, top, left, width and height are auto. Depending on the
author's intent, it may not be necessary to define each of these
property values.

Not said that this is the order properties should be dealt with, but
just meaning to tell you that working with a fixed order, helps in the
writing proces (you can't forget much) and helps afterwards to tweak
you sheet (you know where things are).

Thirdly, learn what can be left out. Usually 'overflow:auto; ' shouldn't
be necessary, since it is the default value for a block level element,
No. It is overflow: visible
http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
Initial: visible

so, unless you've set a parent (or higher up the cascade) with an other
value for overflow (hope not), here it is not necessary to set it.
Further more, learn how the shorthand works as a notation for
properties and values. The border properties can often be put together
(like 'border:black 2px solid;', although in this case that is a bit
hard with the different colouring of various borders).

A big issue is the sizing in px. If you set sizes of elements for
layout in px and I need to change the size of text for comfortable
reading (larger; hardly ever smaller), it is very likely your precious
design falls apart. To prevent that from happening, use em instead, or
any other relative unit.
W3C Quality Assurance tip for webmasters:
Care With Font Size
Recommended Practices: Good usage of CSS's font properties
"Do not specify the font-size in pt, or other absolute length units.
They render inconsistently across platforms and can't be resized by the
User Agent (e.g browser).
Use relative length units such as percent or (better) em"
http://www.w3.org/QA/Tips/font-size#goodpractice
In any case, use a unit. In your example you've left out the unit with the value for padding. 'padding:3;' Three
what? px? em? Cows?

This parsing error on the declaration will make CSS compliant browsers
to ignore the declaration.

CSS1 Forward-compatible parsing
http://www.w3.org/TR/REC-CSS1#forwar...atible-parsing
CSS2.1 Rules for handling parsing errors
http://www.w3.org/TR/CSS21/syndata.html#parsing-errors

So writing:

padding:3
is equivalent to writing
padding:0
Than finally: if you use percentages, always make sure that you know
what it takes the percentage off. So 'width:90%;' --> 90% of what? What
is the containing box, the parent block level element?

Gérard
--
remove blah to email me

[Gérard Talbot]

Les Juby wrote :

I am trying to adjust the window/table size of a website
(www.worklaw.co.za) which has made use of DIV tags with its settings
embedded in an CSS file.

The client wants its width and height to adjust according to dynamic
screen size, and I have been able to adjust the width to a percentage
value which works fine. But if I try do the same with the height it
shows some very strange results squashing the field to display about 3
lines.

The following is copied out of the css file:

.Content {position:relat ive;
left:70px;
height:388px;
width:90%;
top:15px;
overflow:auto;
scrollbar-arrow-color:navy
border-style:solid;
border-width:2px;
border-color:
black #E9E9E9 #E9E9E9 black;
padding:3;
}

I've changed the width to 90% as you can see, but that hasn't helped.
Any ideas why a percentage wouldn't work for height?

Brendon

Brendon, I checked quickly your page. It would take a lot of time
figuring out if there is something wrong with percentage height in that
page. Right now, browsers do not do well with absolutely and relatively
positioned div with percentage values.

Bug 260348: Relative positioning with percentages inside auto-height
containing block does not work
https://bugzilla.mozilla.org/show_bug.cgi?id=260348
2 of the 4 testcases in bug 308946 failed in current Mozilla builds
https://bugzilla.mozilla.org/show_bug.cgi?id=308946

I've filed bugs for Opera 8.5 and MSIE 7 on this.

Your page has no doctype declaration, no <html> element, uses deprecated
elements like <font>, <center>, nested tables, pt unit for font-size,
lots of deprecated and invalid attributes (topmargin, leftmargin, alink,
link, vlink, scroll,) etc..etc

In your CSS code
http://www.worklaw.co.za/wkstyle.css
, you spend a lot of energy on removing the underlining of links but
that's not recommendable: one of the most reliable visual way to spot
quickly the links in a page is the underlining of links; by default, all
browsers underline links.

You give abstract names, non-meaningful, non-descriptive names to your
classes. a, b, c and d mean nothing in the absolute and in the
relativity. On the other hand,
..ExternalLink { ... }
..DataFormEntry { ... }
..ImportantNoti ce { ... }
..Suggestion { ... }
etc..
are good examples of meaningful, intuitive, self-explanatory names for
classes. This helps website maintenance in the long run, helps reviewing
by others who may not know your code, etc.

Your code is awful regarding other aspect.
Line 114:
<td>
<div id="ID" class="content" > <center>
<table border="0" width="100%" height="100%" align="right">

<tr><br>

You overconstrain your tables, nest tables which have nothing to do with
tabular data. You over-code, over-declare, over-constrain and
over-position most of your elements.
Just look at the above code: you have a table cell, and inside of it, a
relatively positioned element that has content centered inside a
right-aligned dimension-constrained table. It's a nightmare!
You should try to simplify and not embed elements inside other elements
unless this is really called for... otherwise, your code quickly becomes
a complex intricated macaroni of elements which have all kinds of CSS
declarations, HTML attributes, etc..

You should start with tutorials, learning resources and webpage
templates for your website.
I recommend all the resources at this page:

http://www.gtalbot.org/NvuSection/Nv...Resources.html

When you feel ready for more advanced stuff, then try these resources:

* Web Quality Assurance tips for webmasters:
http://www.w3.org/QA/Tips/
* Web Standards Group: CSS tips and resources
http://www.456bereastreet.com/lab/de...dards/css/#css
* Web Page Development: Best Practices
http://developer.apple.com/internet/...estwebdev.html
* Complete CSS Guide
http://www.westciv.com/style_master/.../css_tutorial/
* CSS lessons and tutorials
http://tutorials.alsacreations.com/
* HTML and CSS lessons and tutorials
http://www.htmldog.com/
* Preparing for standard-compliant browsers, Part 1
http://www.digital-web.com/articles/...rowsers_part1/
* Preparing for standard-compliant browsers, Part 2
http://www.digital-web.com/articles/...rowsers_part2/

Gérard
--
remove blah to email me

[Barbara de Zoete]

On Sat, 01 Oct 2005 05:09:27 +0200, Gérard Talbot <ne***********@ gtalbot.org>
wrote:

Barbara de Zoete a écrit :

On Fri, 30 Sep 2005 06:48:28 +0200, Les Juby <le*****@anti-spam.iafrica.co m>
wrote:

I am trying to adjust the window/table size of a website
(www.worklaw.co.za) which has made use of DIV tags with its settings
embedded in an CSS file.

The following is copied out of the css file:

[ snip css ]
position, top, left, width, height, padding, border,
margin, background, color, font
Depending on the author's intent, it may not be necessary to define each of
these property values.

Good completion.

Thirdly, learn what can be left out. Usually 'overflow:auto; ' shouldn't be
necessary, since it is the default value for a block level element,

No. It is overflow: visible
http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
Initial: visible

You're right.
--
remove blah to email me

Your sig separator is broken :-)

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |