Stylesheets - New to css, trouble understanding cascading

Author

New to css, trouble understanding cascading

CheGueVerra

2005-01-15, 4:19 am

First of all Hello all you css freak. geeks and gurus. I just started using
css for some web pages I had to do at work and I'im testing some stuff at
home to understand more. Now, I wanted to understand better of how
cascading works.

in my .css file I created this

tr#noLine{
border-top-width:0;
border-left-width:0;
border-bottom-width:0;
border-right-width:0;
border-style:none;}

tr#topLine{
border-color:black;
border-top-width:3px;
border-bottom-width:0;
border-left-width:0;
border-right-width:0;
border-top-style:solid;}

#noLine td#titles{
font-weight:bold;
text-align:left;}

#topLine td#totalTitles{
font-weight:bold;
text-align:left;}

Now, in my html file, yes the link worked no trouble, but when I put this in
my test html code

<table align=center>
<tr id=noLine>
<td id=totalTitles>Total Titles with noLine id in tr</td>
</tr>
</table>
<table align=center>
<tr id=topLine>
<td id=totalTitles>Total Titles with topLine id in tr</td>
</tr>
</table>

I don't get a topLine for the second table, so what am I doing wrong, or
better yet what I didn't understand

TIA,
Glad to be a new member of this NG

CheGueVerra

---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.833 / Virus Database: 567 - Release Date: 13/01/2005

Barbara de Zoete

2005-01-15, 7:17 am

On Sat, 15 Jan 2005 00:05:25 -0500, CheGueVerra <chegueverra@hotmail.com> wrote:

> First of all Hello all you css freak. geeks and gurus. I just started using
> css for some web pages I had to do at work and I'im testing some stuff at
> home to understand more. Now, I wanted to understand better of how
> cascading works.
>
> in my .css file I created this
>
> tr#noLine{
> border-top-width:0;
> border-left-width:0;
> border-bottom-width:0;
> border-right-width:0;
> border-style:none;}
>

First, don't style table rows. Style the elements that are actually visible, the
table itself, the data or header cells for the header and footer part of the
table, the datacells in the table body.

Second, I do hope you use table for presenting tabular data. If you intend to
use tables for lay-out: don't do that. Google for tableless design.

Third, you use an id selector. An id is like a social security number. In every
page you can have only one of them. What you want to use are classes. A selector
might than look like element.semanticClassName.

Fourth, there are easier ways to write the code you wanted: { border:0; } will
do the trick in this case. Besides, you don't have to describe styles for what
is already the standard way things get presented. A table doesn't have any
borders, unless you styled them elsewhere, so there is no need to describe that
in your stylesheet.

> #noLine td#titles{
> font-weight:bold;
> text-align:left;}
>
> #topLine td#totalTitles{
> font-weight:bold;
> text-align:left;}
>

If styles are shared among various selectors, it is usually safe to list the
selectors and describe the styles only once:
selector1,
selector2,
selector3 {
styles }

> Now, in my html file, yes the link worked no trouble, but when I put this in
> my test html code
>
> <table align=center>

Don't use old fashioned attributes for visual rendering if you are already using
stylesheets. Put all of your styles in that stylesheet for ease of maintenance
and avoiding conflicting situations between the inline styling with attributes
on the elements themselve and the stylesheet, which you might run in to later
and then do not understand.

> <td id=totalTitles>Total Titles with noLine id in tr</td>
> <td id=totalTitles>Total Titles with topLine id in tr</td>
>

This is where you go wrong with the use of id's. Don't use a unique id more than
once in a page.

What you want is not all that complicated. A table that renderes without
specific styling and one that has specific styling. You might want to rething
you scheme for creating names for the classes you need (use classes for this,
not id's, remember). A name that comminicates back to you _why_ you specified
the class, that has a meaning, will help you maintaining your styles in the
future.
For example, you as a service deliver education to the public. The page is a
general page with some overview data. Perhaps you want the first table to
contain an overview of courses, so you give the table a class [coursesOverview].
The second table contains an overview of departments in your organisation,
course related. The class for that table might then be [deptOverview].
These classes have meaning and will still be understood some time in the future,
whereas 'topLine' doesn't say anything as to _why_ you wanted a topLine, why you
wanted that table to stand out.

Now, start at your markup. Always first create good structured and fairly
semantic markup. Don't bother to think about styling yet:

<table class="coursesOverview" summary="describe the structure and contents of
this table">

</table>

<table class="deptOverview" summary="structure and contents description">

</table>

Once you created the page, validate it to see if nothing seriously went wrong.
Then start the styling.

You want the tables to be centered:

table.coursesOverview,
table.deptOverview {
width: 80%; /*or what you need them to be*/
margin:1em auto; }

You want the headers in the tables to be bold:

coursesOverview th,
deptOverview th, {
font-weight:bold;
text-align:left; } /* besides: if using correct markup
a header cell in a table will usually render bold,
so there won't be a need to write this style; same
goes for the text-align:left, which is also a
default */

Then you want the row with table headers of the table with class="deptOverview"
to have a border at its top:

deptOverview th {
border-top:3px solid black; } /* all the rest can be
skipped as no border is the default; you don't have to
describe that style */

So, it isn't as much the cascade that is your problem. It is a basic
understanding of what you are doing.
Again, start with the markup. Properly markup the pages with a good structure, a
semantic use of the available elements. Don't worry about it's looks, yet.
Then style the elements that are there. If you want all the tables in your pages
to have a border around them, use:
table {
border:2px outset red; }

If you want all the headers in your pages to have a line both underneath and
above the text, use:
h1,h2,h3,h4,h5,h6 {
text-decoration:underline overline; }

Use what is there, before you start specifying classes and id's as selecors in
your stylesheets.
Don't use id's where not necessary and don't use them more than once in an
individual page. Most importantly: Don't ever abuse tables for layout purposes.
Use proper markup.

The way things get renderred on your screen with a grafical browser are
influenced mostly by (last has least influence):
inline styles,
styles described with id's,
styles described with classes,
styles described with the elements.

The cascade is (roughly) 'top-down'. What the browser meets first as a
description for a style will be overruled by a style it reads later on, unless
the previous style has 'more rank', 'more weight'.

> ---
> Outgoing mail is certified Virus Free.

A sig separator should be [-- ] or 'dash dash space'. If you use that, someone
replying won't have to delete your sig by hand, as there news client will do
that for them. Please fix.

--
,-- --<--@ -- 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 |
`-------------------------------------------------- --<--@ ------------'

Els

2005-01-15, 7:17 am

Barbara de Zoete wrote:
[color=darkred]
> On Sat, 15 Jan 2005 00:05:25 -0500, CheGueVerra
> <chegueverra@hotmail.com> wrote:
>

[snip code]

[snip very complete answer from Barbara]

Eh.. yes, that's what I meant to say too ;-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

CheGueVerra

2005-01-17, 7:18 pm

Well, thanks for the heads up. I'm going to start to slowly convert my css
file towards classes and try at th e same time to get my expression of style
more simple. More questions will be coming today for sure or maybe tomorrow
my other projet has decided it wanted my attention as well, if you have more
tips, links or whatever fell free to give them to me.

Thanks again,

CheGueVerra

CheGueVerra

2005-01-17, 7:18 pm

I have started slowly to create a css file with classes instead of Ids, I
carefully read your response and have put it in my archives for later
references, now I want to address a different problem, How do I arrange code
that works in Mozilla or Opera and not in IE, I have read in some other post
that:

>[Mozilla rendering incorrect while IE is Correct thread]
>You've gotten very good responses, so I'll simply state this rule of thumb:
>whenever IE does something different than Mozilla or Opera regarding CSS,
>there's a very high probability - close to certainty - that IE is the one
>that's wrong.

While I agree with that principle, it does not explain what I have to do to
get the same results in the different UA.

in my tests .css file i have

table.reportHeader {
border-collapse:collapse;
width:50%;
margin:1em auto;}

td.underLinedTitles{
border-bottom:3px solid black;}

td.overLinedTitles{
border-top:3px solid black;}

in the html file this

<table class="reportHeader">
<tr>
<td class="underLinedTitles">Date</td>
<td class="underLinedTitles">Prenom</td>
<td class="underLinedTitles">Nom</td>
<td class="underLinedTitles">Phone</td>
<td class="underLinedTitles">Balance</td>
</tr>

<tr>
<td>yourBirthDay</td>
<td>yourName</td>
<td>yourLastName</td>
<td>yourNumber</td>
<td>yourBalance</td>
</tr>

<tr>
<td>yourBirthDay</td>
<td>yourName</td>
<td>yourLastName</td>
<td>yourNumber</td>
<td>yourBalance</td>
</tr>

<tr>
<td>yourBirthDay</td>
<td>yourName</td>
<td>yourLastName</td>
<td>yourNumber</td>
<td>yourBalance</td>
</tr>

<tr>
<td class="overLinedTitles">Totals</td>
<td class="overLinedTitles"></td>
<td class="overLinedTitles"></td>
<td class="overLinedTitles"></td>
<td class="overLinedTitles">1,475.36</td>
</tr>

This doesnèt produce the same result in IE and Moz, so what to do .....

TIA

CheGueVerra

Steve Pugh

2005-01-17, 7:18 pm

"CheGueVerra" <brent_remov_@notgtechna.com> wrote:

>I have started slowly to create a css file with classes instead of Ids, I
>carefully read your response and have put it in my archives for later
>references, now I want to address a different problem, How do I arrange code
>that works in Mozilla or Opera and not in IE, I have read in some other post
>that:
>
>
>While I agree with that principle, it does not explain what I have to do to
>get the same results in the different UA.

> <tr>
> <td class="underLinedTitles">Date</td>
> <td class="underLinedTitles">Prenom</td>
> <td class="underLinedTitles">Nom</td>
> <td class="underLinedTitles">Phone</td>
> <td class="underLinedTitles">Balance</td>
> </tr>

Shouldn't these be <th>? They look like column headings to me.

Please post a URL in future. It saves us time when we're trying to
help you and lets us see the whole page, including the HTTP headers -
the problem may be caused by something besides what you posted.

>This doesnèt produce the same result in IE and Moz, so what to do .....

Appears the same in IE6 and Mozilla if you trigger Standards mode. So
either you're using IE5 or you're triggering Quirks mode.

The only difference I see in IE is that the table isn't centered.
IE5.x doesn't support margin: auto;

As you have a percentage width for your table changing your CSS to
table.reportHeader {
border-collapse:collapse;
width:50%;
margin:1em 25%;}
will center it in IE5 as well.

Steve

Jan Roland Eriksson

2005-01-17, 7:18 pm

On Mon, 17 Jan 2005 13:15:49 -0500, "CheGueVerra"
<brent_remov_@notgtechna.com> wrote:

>...How do I arrange code that works in Mozilla or Opera
>and not in IE...

We had a discussion about that here in this NG just a few days back.

This msg.id should be easy to locate at Google if nowhere else.

<20050112175314.6710697c.maitre_yodan@fr.club-internet.invalid>

The (dubious) "elegance" of the described method is that it can be used
in both of elements HEAD and BODY, and it is pretty reliable since it's
based on MS own method to let IE "sniff for itself" locally, all outside
of Jscript and/or CSS.

--
Rex

Barbara de Zoete

2005-01-17, 11:18 pm

Els

2005-01-20, 12:22 pm

Barbara de Zoete

2005-01-20, 12:22 pm

CheGueVerra

2005-01-20, 11:19 pm

CheGueVerra

2005-01-20, 11:19 pm

Steve Pugh

2005-01-20, 11:19 pm