14 replies [Last post]
marcnyc
Offline
Regular
Last seen: 17 years 41 weeks ago
Joined: 2004-10-28
Posts: 12
Points: 0

Hello, I just found this forum and registered because I am starting to make heavy use of CSS (as I guess we should all)... For now I have one question which is been bugging me for a few days.
How does the hierarchy in CSS work?
I explain.
I have a site with its CSS file that contains this class:

.column {
	margin-left: 5px;
	margin-right: 5px;
	font-size: x-small;
	line-height: 1.2em;
	font-weight: normal;
	font-style: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif, serif;
}

In my site when I have a column with tables I use:
<div class="column">
   <table>
       <tr>
           <td>
               content here
          </td>
      </tr>
   </table>
</div>

This will make the font of "content here" extra small, as I wish.

Now I have installed a forum in my site so the forum pages have two CSS files loaded for every page (and every page still has my header/footer/colums). The forum's CSS file contains this classes:

body, td
{
	color: #000000;
	font-size: small;
	font-family: Tahoma, arial, helvetica, serif;
}

My problem is that now in these forum pages the font in my columns becomes small, as opposed to x-small, because the columns are made with tables (please don't ask me to trash tables and convert to div layers, I am not ready for that yet).

So the question is again, what's the hierarchy? Why does this td class take precedence over the div class assignment which comes BEFORE the TD tag?

How can I fix it so that the content of all the tables that are wrapped inside a <div class="column"> tag are x-small instead of small?

Thanks a lot in advance.

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 17 years 49 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

confused about hierarchy

The more specific a declaration, the more precedence it takes. You've specified "anything inside an element with class of .column" and they've actually specified each TD, so they have been more specific than you. Specificity needs depend on how complex a page is.

Try ".column td {font-size: x-small;}"
If that doesn't work you may need to actually put a class on your TABLE or maybe even the TD. It depends on your situation and the other CSS code that exists in all the style sheets, and how specific each has been.

marcnyc
Offline
Regular
Last seen: 17 years 41 weeks ago
Joined: 2004-10-28
Posts: 12
Points: 0

confused about hierarchy

Thanks for your reply.
Your suggestion almost works.
It does have the desired result on the text but it makes the 5px margin I had specified disappear... How can I prevent that from happening? Why does it disappear?
For a moment there I thought it had disappeared because it was now applying the 5x margin to the TD and not the layer the entire table is inside, so I thought I was smart and tried:
.column table {
but that brought me back to the initial situation where the margins where right but the font in the tables too big

Also, if I may ask (just so I understand and bug you less in the future), if the more specific a declaration the more precedence it takes, isn't my class more specific and the tf more generic? It would seem logical to me that way

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 17 years 49 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

confused about hierarchy

you're on the right track. you may need to break your declarations up to get it all to work:

.column {margin: 5px;}
.column td {font-size:x-small;}

Their statement is more "general" in a way, in that they're saying "any TD please apply this" but it is more "specific" to the browser because of hierarchy, the TD is INSIDE your .column DIV, so it is further down the hierarchy chain. I don't think I'm explainign this very well.. Smile

marcnyc
Offline
Regular
Last seen: 17 years 41 weeks ago
Joined: 2004-10-28
Posts: 12
Points: 0

confused about hierarchy

At least you are trying and I appreciate that.
Since you say I am on the right track I will experiment and if you don't hear from me I got experienced (or lucky) Wink
thanks again
PS where can I learn more about all of this and div layers and positioning without spending hours on it? I am not a lazy person who doesn't wanna do the homework, it's more like I have not time for homework Wink

marcnyc
Offline
Regular
Last seen: 17 years 41 weeks ago
Joined: 2004-10-28
Posts: 12
Points: 0

confused about hierarchy

.chaindlk_column {
	margin-left: 5px;
	margin-right: 5px;
}

.chaindlk_column td {
	font-size: x-small;
	line-height: 1.2em;
	font-weight: normal;
	font-style: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif, serif;
}

This code fixed the problem. Thanks a lot for your useful suggestions. Tomorrow while kitesurfing I can think about jumping instead of CSS (believe it or not yesterday I was surfing and thinking about coding)... weird...
Thanks again for your help. I really appreciate the time you took to answer my question.

marcnyc
Offline
Regular
Last seen: 17 years 41 weeks ago
Joined: 2004-10-28
Posts: 12
Points: 0

confused about hierarchy

May I ask one more question?

I'd like to have a space of about 5px on the right side of the INSIDE of my class "chaindlk_column" table cells. I tried experimenting with margin, padding, margin-right but can't get it together...

Can somebody please recommend a way to insert a margin of 5px on the right side of the table cell's inside area (where the content goes)?

I also have another question which has been bugging me for days but I'll keep researching it to learn it myself before posting here...

Thanks

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 17 years 49 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

confused about hierarchy

i don't believe there is a quick answer to learning CSS. You have to gain experience by doing it. You run into issues, you solve them, then they're not so tough the next time you run across them.

Sounds like you want "padding-right:5px" on your TDs

marcnyc
Offline
Regular
Last seen: 17 years 41 weeks ago
Joined: 2004-10-28
Posts: 12
Points: 0

confused about hierarchy

I had tried this but it messed up my entire design (which is a table with images which make borders and a heavy use of transparent 1x1 spacer.gif images to keep everything aligned)... After a few tests I realized that I had been applying it to all those little TD's containing spacers only, so I created a new class, specifically for the last most inside TD and applied the class tag to the last TD in my template and it worked like a charm.
Thansk again for the suggestion.
So since there seems to be no easy way to learn it except for trying (which I am doing, and is working... I am indeed learning), would you care to explain a few things to me about positioning? I could make a post about it because there are a few lines in my CSS that I don't understand fully...

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 17 years 49 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

confused about hierarchy

Positioning is a tricky monkey. Maybe a new post since it's a new topic.

marcnyc
Offline
Regular
Last seen: 17 years 41 weeks ago
Joined: 2004-10-28
Posts: 12
Points: 0

confused about hierarchy

hello TimeBandit,
since you have been so kind with me and suggested that I should post my doubts and concerns I have just done so and wanted to let you know here (in case you get email notifications).
This time I'll be the Time Bandit and will steal a few minutes from your precious time, if you'll be so kind to let me steal them Wink

Thanks in advance...
Here are my doubts:

http://www.csscreator.com/css-forum/sutra25105.html#25105

obsidian
Offline
Enthusiast
South Carolina
Last seen: 15 years 43 weeks ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

confused about hierarchy

as to the table padding question... you can do all sorts of spacing with tables in firefox, but when you switch over to IE, you lose them all. if you're going to use tables, and you need specific table padding, spacing, whatever, you're better off using a table nested within another like this:

<table class="outside" border="0" cellpadding="0" cellspacing="0">
    <tr><td>
        <table class="inside" border="0" cellpadding="0" cellspacing="0">
            <tr><td>Some info</td></tr>
            <tr><td>More info</td></tr>
        </table>
    </td></tr>
</table>

Then, you can declare any padding you want in your "outside" table like this:

table.outside {
    margin: 0;
    padding: 0;
    border: 2px solid #556677;
}

table.outside td {
    margin: 0;
    padding: 0 5px 0 0;
}

table.inside {
    margin: 0;
    padding: 0;
}

table.inside td {
    margin: 0;
    padding: 3px;
}

You can't win, you can't lose, you can't break even. You can't even get out of the game!

marcnyc
Offline
Regular
Last seen: 17 years 41 weeks ago
Joined: 2004-10-28
Posts: 12
Points: 0

confused about hierarchy

I didn't know i'll loose them all in IE... I am scared now... I still haven't got the chance to test it on a Windows box...

Thanks for your suggestions, I'll look into it as soon as I can test on a Windows IE machine because on my Mac IE it seems ok, but I know Mac's IE suck and aren't reliable...

Anyway I've been using lots of spacing 1x1 gifs so I should be fairly ok... hopefully...

obsidian
Offline
Enthusiast
South Carolina
Last seen: 15 years 43 weeks ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

confused about hierarchy

sorry... i didn't mean to scare you. you don't lose the tables, just the extra padding that firefox recognizes. all your layout is still there in IE, it just doesn't like to put padding around a table.

You can't win, you can't lose, you can't break even. You can't even get out of the game!

marcnyc
Offline
Regular
Last seen: 17 years 41 weeks ago
Joined: 2004-10-28
Posts: 12
Points: 0

confused about hierarchy

That's quite allright. I didn't mean it like that... I am still sleeping at night, you know? Wink
I'll just have to look at the PC again in my life (I was hoping not to have to anymore now Wink)
I knew I was going to have to...