Cart before the horse or horse before the cart...

[rbrown]

Quick question... since I tried to avoid using CSS and now finding myself giving into the dark side because of a project I have that has tons of it ( IMHO written poorly.) in it.

 

I see this for example:

 

#nts-user-menu div { font-weight: bold; width: auto; margin: 0 0 0 0; padding: 2 4 2 4; font-size: 12px; background-color: SteelBlue; }

 

And this:

 

div #nts-user-menu { font-weight: bold; width: auto; margin: 0 0 0 0; padding: 2 4 2 4; font-size: 12px; background-color: SteelBlue; }

 

on different tutorial pages...

 

 

 

And I notice that the first one doesn't seem to work on IE or FF. so what is the deal?

Why do a lot of the sites show it the first way or am I doing something wrong?

 

Enquiring minds want to know...

 

 

[gizmola]

I would suggest just looking at this page.  http://www.w3.org/TR/CSS2/selector.html

 

The 2 examples are not the same thing at all, as you can see from the selector specification.

 

foo bar

 

selects "bars"  when they are a "descendent" of "foo".

 

bar#foo

 

Selects any "bars" that has the id of "foo".  Since ID's are only suppossed to be used once, this should typically be one element, like a containing div with a particular id.

 

 

[cssfreakie]

definitely read the stuff Gizmola linked to and if you can make chocolate out of foobar  the following should be easy.

 

another thing you should google are the words specificity and css This is extremely important. In a nutshell #id's .classes and selectors have a certain amount of points (weight to them) the declaration with the most specificity (precision) wins.  See the example below for the consequences.

<style type="text/css">
#iwin{
    color:red;
}
.iloose{
    color:green; /* this one gets overwritten despite the fact it's lower down the page'*/
    font-weight: bold; /* but this one is not being overwritten */
}
</style>
<div id="iwin" class="iloose">
    <p>ID wins</p>
</div>

 

 

Now your question above is probably triggered, by some css where people use loads of selector id's and classes

like for instance:

ul#menu li a:hover span.even{
     color:red;
}

this just targets (read backwards) a span with the class of even inside an anchor with a hover state which is part of a list item which is part of an unordered list with an id of menu

 

This is often done to get as much weight as possible. For instance the ul in front of #menu was not needed, but they added it to add another selector to add weight. If you want to get real freaky you could lead it back through the tree of inheritance all the way back to body

 

Hope this helps!

[rbrown]

Thanks for the help...

 

Now I see why I've been having a lot of problems trying to change the look of the script. The way he has this written, they are being canceled out. And he has written a ton of other ID's and Classes to fix what is being canceled out. Instead of laying it out right in the first place.

 

So from looking at the source, the script will need to be totally recoded. There are divs and classes all over the place and 4 different style sheets to control it all. And not to mention... tons of php shortcut code (don't get me started on that.) and poorly named vars throughout the script. And has html and css sprinkled throughout the code.

 

It's going to suck... big time.... there are over 1400 pages of code.

 

So it looks like I got to do some more reading, a lot of hair pulling, and speaking French...

 

Thanks again...

Bob

[cssfreakie]

if that is 1400 pages of css, you should fire him.

Get 1 stylesheet place a reset.css above it (in that same stylesheet as recommended in the sticky) Start with the positioning of the template than work your way down to add styles

[rbrown]

No it is a source code script I bought... So I can't fire him... I needed something real quick... I was trying to save some time instead of writing it myself... It's works... I never really got to look under the hood until now... and it's a total mess.

 

I have been using the older version for about 6 months.

 

The lastest version came out a couple of months ago, and it has the most of the features I really wanted to begin with. But with that version he totally changed the admin backend and wrote it for the blind.

 

I use it in doctors offices and the office mangers can't be scrolling while looking up patients. They use the admin backend (It has levels of access.) So I finally have the time to fix it the look and mod the code so it will use the patient id instead of a made up username.

 

[cssfreakie]

what ever you do Just start with a clean slate. And try to code as efficient as possible.

I find that 800 lines of css is really the maximum