CSS margin overriding problem

[xen]

Hey there,

In my html file I use a <div class="quote">.
In my css file I define .quote
I need to specify the margins for <pinside the <div>
Today I learned that I can do this using

..quote p {
margin-top: 5px;
margin-bottom: 5px;
}

All is well. Now inside this <div class="quote"I want to be able to
have a couple of <pblocks use different, bigger margins. So I define
a new class

..quote-walsch {
margin-top: 15px;
margin-bottom: 15px;
color: red;
}

and hope to use it using <p class="quote-walsch">

However, this doesn't work.
The <pas redefined for class "quote" overrides the margins for class
"quote-walsch", effectively disabling those margin settings. The color
"red" does apply so the class is in effect, but he margins get
overridden. If I apply the new margins using an inline style attribute

<p style="margin-top: 15px; margin-bottom: 15px;">

then it does work.

So as far as I can see, I can do one of two things.

1) do not use classes for the bigger-margin <pblocks but use inline
style attributes
2) do not define ".quote p" but instead define ".quote-p" and apply
this class to every regular p block using <p class="quote-p">.

I would like to use ".quote p" AND apply bigger margins to several <p>
blocks using classes. Is this possible? All browsers I use (IE4,
Opera7, FF2) behave the same.

[dorayme]

In article
<11**********************@s48g2000cws.googlegroups .com>,
"xen" <xe*@rotmail.nlwrote:

Hey there,

In my html file I use a <div class="quote">.
In my css file I define .quote
I need to specify the margins for <pinside the <div>
Today I learned that I can do this using

.quote p {
margin-top: 5px;
margin-bottom: 5px;
}

All is well. Now inside this <div class="quote"I want to be able to
have a couple of <pblocks use different, bigger margins. So I define
a new class

.quote-walsch {
margin-top: 15px;
margin-bottom: 15px;
color: red;
}

and hope to use it using <p class="quote-walsch">

However, this doesn't work.
The <pas redefined for class "quote" overrides the margins for class
"quote-walsch", effectively disabling those margin settings. The color
"red" does apply so the class is in effect, but he margins get
overridden. If I apply the new margins using an inline style attribute

<p style="margin-top: 15px; margin-bottom: 15px;">

then it does work.

So as far as I can see, I can do one of two things.

1) do not use classes for the bigger-margin <pblocks but use inline
style attributes
2) do not define ".quote p" but instead define ".quote-p" and apply
this class to every regular p block using <p class="quote-p">.

I would like to use ".quote p" AND apply bigger margins to several <p>
blocks using classes. Is this possible? All browsers I use (IE4,
Opera7, FF2) behave the same.

It is unclear if you have also used .quote-walsch p {...} to
mirror your "successful" use of .quote p {...}.

By the way, look up "blockquote". it might be more appropriate
for your use. You can style these too... If you are going to need
different margins and colors etc, probably safest to set all
explicitly for each class in your case.

Why don't you post a url so we can see what you are doing. Vot
you are really doing!

--
dorayme

[Ben C]

On 2007-02-26, xen <xe*@rotmail.nlwrote:

Hey there,

In my html file I use a <div class="quote">.
In my css file I define .quote
I need to specify the margins for <pinside the <div>
Today I learned that I can do this using

.quote p {
margin-top: 5px;
margin-bottom: 5px;
}

All is well. Now inside this <div class="quote"I want to be able to
have a couple of <pblocks use different, bigger margins. So I define
a new class

.quote-walsch {
margin-top: 15px;
margin-bottom: 15px;
color: red;
}

and hope to use it using <p class="quote-walsch">

However, this doesn't work.
The <pas redefined for class "quote" overrides the margins for class
"quote-walsch", effectively disabling those margin settings. The color
"red" does apply so the class is in effect, but he margins get
overridden. If I apply the new margins using an inline style attribute

This sounds like a "specificity" problem. Try ".quote .quote-walsch" for
the second selector, or ".quote p.quote-walsch" to be sure and see

http://www.w3.org/TR/CSS21/cascade.html#specificity

><p style="margin-top: 15px; margin-bottom: 15px;">

then it does work.

So as far as I can see, I can do one of two things.

1) do not use classes for the bigger-margin <pblocks but use inline
style attributes
2) do not define ".quote p" but instead define ".quote-p" and apply
this class to every regular p block using <p class="quote-p">.

Those solutions would work too.

I would like to use ".quote p" AND apply bigger margins to several <p>
blocks using classes. Is this possible? All browsers I use (IE4,
Opera7, FF2) behave the same.

Should be fine, just provide specific-enough selectors to get the
margins all the way to where you want them to go.

If .quote .quote-walsch doesn't match quote-walsches outside .quotes,
elsewhere in the document, and that's what you want, you can just write
it a bit tautologically like this:

..quote-walsch, .quote .quote-walsch { ... };

which means "anything with class quote-walsch or that has class
quote-walsch and is a descendent of a .quote". I suppose you could read
it as "anything that's .quote-walsch even if it's inside a .quote".

[xen]

Thanks for the replies.

I changed my <div class="quote"to <blockquoteand styled the
blockquote element instead.

This sounds like a "specificity" problem. Try ".quote .quote-walsch" for
the second selector, or ".quote p.quote-walsch" to be sure and see

It worked! :). I now use "blockquote p.quote-walsch" and so on.

You can see the page at:
http://www.xen.dds.nl/geefhandel/geefhandel.html

It's a Dutch page, but do read the English quotes ;).