473,573 Members | 2,424 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Percentage Height not working

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

Sep 30 '05 #1
22 6934
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
Sep 30 '05 #2
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

Sep 30 '05 #3
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 |
`-------------------------------------------------- --<--@ ------------'
Sep 30 '05 #4
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 |
`-------------------------------------------------- --<--@ ------------'
Sep 30 '05 #5
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

Sep 30 '05 #6
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 |
`-------------------------------------------------- --<--@ ------------'
Sep 30 '05 #7
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
Oct 1 '05 #8
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
Oct 1 '05 #9
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 |
Oct 1 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
7409
by: Vic | last post by:
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...
3
8826
by: Les Juby | last post by:
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...
11
7943
by: sariset | last post by:
here is a sample of my problem <table style="width:100%;height:100%"> <tr style="height: 60%"> <td style="width: 968px"> <div style="height: 100%;overflow:scroll;"> <div style="height: 100px;" > content </div> ...
0
7747
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7670
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8036
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6363
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5557
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3706
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
2167
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1269
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1005
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.