<p> being overridden

Yari this is because you have two rule sets with effectively the same selectors:

#div-text p {
color: #663366;
line-height: 18px;
padding-right: 150px;
}

and

.feature p {
line-height: 12px;
margin: 0px 0px 0px 71px;
}

the second says select any P that is nested within an ancestor with the class name .feature which is fine but the first says select any P that is nested in an ancestor with the ID name of #div-text and there is your problem the P is both descendent of .feature and of #div-text so which one should take precedence ? the ID always will as it has a higher specificity than a class name and is applying the rules in the first ruleset to all instances of element P that is found nested in #div-text including any with an ancestor called .feature..

It's important to remember with descendent selectors that the rules effect all instances of a element no matter how deeply nested they may be, and to always think through the specificity or weight of your rules and how they cascade through the sheet you need to be more specifin when using descendent selectors to avoid these conflicts.

You should be able to gain control of the selector if you increase the weight by adding selectors, such as

#div-text # text-features .feature p {}

That will now carry more specific weight than the other rule set you may not need all of those you could probably drop the first #div-text.

Hugo.

Do you use Firefox? And its WebDeveloper Extension?

If not, do - you'll save yourself a lot of time.

Using WebDevelopers, CSS, View Style Information Tool and click on the paragraph concerned. You will see all the style rules that affect that element. (Alternatively you can get to the same information through Firefox DOM Inspector).

Those <p>s are also affected by the #div-text p rule - which has a higher specificity than .feature p. Its picking up its line-height and right padding from that rule.

I think you need to increase the specificity of your .feature rule by either using !important or prefixing it with #div-features. An you will need to override the padding right setting.

[edit, X-posted, beaten to the punch by Hugo :)]

Wow. The Firefox plugin is incredible!

Thanks for the tip, I am sure I can fix this and work out a nice hierachy for my CSS with this... excellent.

Well Chris and I have mentioned the fix for this above, as useful as the webdev extension is it's not hard to keep tabs on your elements and their nesting if in doubt just ensure that your rules carry enough weight i.e be highly specific about the selectors used in your rules.

Hugo.