4 replies [Last post]
yari
Offline
Regular
Byron Bay, Australia
Last seen: 14 years 13 weeks ago
Byron Bay, Australia
Timezone: GMT+10
Joined: 2005-08-17
Posts: 32
Points: 0

Hello,

I have two instances of the <p> tag in my css code, the first to set generic padding, colours etc, the second to set a specific padding for text in a div.

<p> 1

p {
	margin: 0px 0px 10px 0px;
}

<p> 2

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

The second <p> being inside a <div> with the class="feature". So text inside the second <p> should line up differently, but the don't...

Any ideas?

Thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

&lt;p&gt; 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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

&lt;p&gt; being overridden

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 :)]

yari
Offline
Regular
Byron Bay, Australia
Last seen: 14 years 13 weeks ago
Byron Bay, Australia
Timezone: GMT+10
Joined: 2005-08-17
Posts: 32
Points: 0

&lt;p&gt; being overridden

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

&lt;p&gt; being overridden

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me