Percentage height with <DIV> 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

[Rincewind]

On Mon, 05 Sep 2005 18:45:34 GMT, Les Juby wrote:

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.

No it doesn't, if I resize my window the body text overlays the menu making
it unreadable.

It also might be an idea to validate it
http://validator.w3.org/check?verbos...worklaw.co.za/ it
fails at the moment.

And the code is a mess.

[Gérard Talbot]

Les Juby a écrit :

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;
3 pixels? 3 mm ? If I don't know, then how is a inorganic browser
software going to guess that unit value?
Always specify unit in CSS.

CSS1 and CSS 2.x specifications require that non-zero values must be
specified with a length unit; otherwise, the css declaration will be
ignored.
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

}

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

Your code is full of markup errors, CSS errors and most possibly
accessibility problems making it illegal in certain countries. Fix the
markup errors and CSS errors first.

http://validator.w3.org/check?uri=ht...00=1&verbose=1

http://jigsaw.w3.org/css-validator/v...usermedium=all

Use table for tabular data, not for layout and positioning your elements
on a page. That is also a major problem with your webpage, I'd say.

Avoid <FONT> everywhere in your page: it's widely acknowledged as
deprecated, obsolete, causing problems too.

W3C Quality Assurance tip for webmasters:
Recommended Practices
Forget <font>, use CSS
http://www.w3.org/QA/Tips/font-size#goodpractice

Gérard
--
remove blah to email me

[kchayka]

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,

The best way to do this is to get rid of the scrolling div and let the
content automatically adjust itself.

Scrolling divs have known accessibility problems, particularly with
keyboard navigation. They don't do so well in the usability area, either.

BTW, the code is indeed ishy. Get rid of deprecated markup like <font>
and validate both the HTML and CSS. That will eliminate syntax errors as
a possible cause of rendering problems.

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