forrest-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Gav...." <>
Subject Re: [jira] Created: (FOR-652) CSS Style Sheets need cleanup and optimization
Date Mon, 29 Aug 2005 12:58:50 GMT
----- Original Message ----- 
From: "Diwaker Gupta" <>

Diwaker said in an attatchment :-

>Lets not rush into %ages. %ages are *not* a good way to create a fluid 
>The biggest problem with %ages is that they cascade across elements, which
>makes the math slighly difficult. ems and px are both immune to cascading.

I disagree I'm afraid in part anyway. Percentages are an excellent way to 
a fluid design if used sensibly and properly. Yes, %ages cascade, though I
wouldn't neccessarily use them that way, but is not a bad thing.

ems are not immune to cascading and work in a similar fashion to %ages.
px is immune I agree, and is also rigid, which is why it is bad to use it in
a fluid design in places.

Your first  link mentions ems with percent base, that is how I would go 
things and propose that this same way of doing things is how we should
implement it here.

We should use percent in the body , declaration of initial font-sizes, and 
declaration of all divs - that is use % for divs that are used to define the 
of the document. This way, all divs will resize properly and the correct 
to each other in relation to how the user has their screen resolution set 
and how
big their browser window is.

Currently there is a lot of px being used for div element sizes, and where 
abouts on
the document the div is placed, this is rigid design and does not resize 
well. I really
don't like the idea of 180px as a padding value, but that may just be me :)

We should use mainly ems for the content side of things, specifically 

As a general rule of thumb :

1em is 100% of the parent element, if the parent is body then unless 
over-riden, takes its size from
the default browser setting. Default in IE on Windows for example is Medium 
which is 16px.
0.8em is 80% of the parent element.
1.2em is 120% of the parent element.

It is important IMHO to use ems and % to give the user the user the right to 
alter sizes.
A user might set their browser text size to 'larger' for instance, ems and % 
ensure this
is adhered to. We should also use % for padding and ems for margins. Padding 
is for
design layout and margins is for content layout.

Where px can be used, is in those places that must or should have those 
sizes, such as in form
fields and borders.

>For more details, check out:

The second link didn't offer me much there, I am a regular of alistapart in 
general however.
The first link actually backs up my previous arguments.

See also

I through up a quick page here also, it is a very basic example :-

>That said, there _are_ some very good uses for %ages -- for instance, if 
>want to restrict a box's width relative to its parent.

Yep, I agree, that should be the emphasis for the overall layout for divs as 
as boxes.

>I've looked at the diff in this issue -- it'll be good if you can describe
>exactly what problem they fix (like a browser screenshot or something).

Sure thing, those changes mainly adjusted some properties for a more fluid
design, they resize better in the browser window and resolution of the user,
however it isn't implemented for all divs on the site and so you don't yet
see the full benefit. One benefit you can see is if MOTD is enabled, the 
has been moved further right, its container and parent container and a 
container have been made more fluid and so makes better the current Issue of
MOTD squashing the navigational headlines of the page. I have put up an
example of this at . 
page resizes better already than for example

>Also, since we will be moving to the views-based Pelt rewrite, we are 
>better off focusing our CSS efforts into that CSS rather than the old 
>CSS :-)

I agree, I was just having a test using a seed site and pelt to make sure 
wasn't any problems. If we can agree on a way of doing things then I'll
certainly jump in to CSS on views. Should I be looking at
/webapp/skins/leather-dev/css for this or somewhere else.?


No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.10.16/83 - Release Date: 26/08/2005

View raw message