Blockquote question

S

Samuël van Laere

I have the following elements defined in my stylesheet:

blockquote{
background-color: #FEFEFE;
background-image: none;
border: 1px dotted #DCDCDC;
color: #A52A2A;
font: normal 100% serif;
}

p {
background-color: transparent;
color: #333333;
font: normal 100% serif;
}

I use a HTML Strict doctype and i would like to use the colors defined in
<blockquote>
when quoting.

But why is it that when using it like this:

<blockquote>
<p>Some Quote Here</p>
</blockquote>

That it will display the border and background color as exspected, but it
will use the color defined
for the P element instead of the color defined for Blockquote (color:
#A52A2A) ??

Both IE5.5 and the latest Mozilla display the same result.
Any suggestions?
 
D

Dylan Parry

Sitting said:
<blockquote>
<p>Some Quote Here</p>
</blockquote>

That it will display the border and background color as exspected, but it
will use the color defined
for the P element instead of the color defined for Blockquote (color:
#A52A2A) ??

Because the text is contained within a <p> and therefore takes on the
style applied to the <p> and not the <blockquote>[1]. What you need to do
is create a style rule for <p> elements within <blockquote> elements, eg.

blockquote > p {
color: #A52A2A;
}

The above says "<p> elements that are children of <blockquote> elements
should be coloured #A52A2A".

[1] Well is does take on the blockquote style, but is overridden by the
style defined for the paragraph.
 
B

brucie

blockquote{
color: #A52A2A;

p {
color: #333333;

I use a HTML Strict doctype and i would like to use the colors defined in
<blockquote>
when quoting.

But why is it that when using it like this:

<blockquote>
<p>Some Quote Here</p>
</blockquote>

That it will display the border and background color as exspected, but it
will use the color defined
for the P element instead of the color defined for Blockquote (color:
#A52A2A) ??

you said to use "color:#333333;" for all <p> elements. if you want the
<p> within the <blockquote> to have a different color to the other
<p>s then use:

blockquote p{color:#A52A2A;}
 
D

Dylan Parry

child selectors are not supported by IE (win). a few other browsers
have problems as well.

Cheers for that, brucie. I saw your post straight after and thought that
there must be a problem with the way I had suggested! I didn't realise
that, but now I do - cheers again.
 
S

Samuël van Laere

brucie said:
child selectors are not supported by IE (win). a few other browsers
have problems as well.

Thanks for the help guy's,

I really need to read more about classes and child selectors, i do not use
them the correct way.
As for browsers support for child selectors or lack of it:
I'll have to try to see what works on what, if Mozilla is happy with it then
i will be to.
 
S

Samuël van Laere

brucie said:
child selectors are not supported by IE (win). a few other browsers
have problems as well.


Mozilla supports children, another reason to forget about IE for every day
browsing.
 
D

Dylan Parry

Sitting said:
Mozilla supports children, another reason to forget about IE for every day
browsing.

and so it should! If IE was made in the UK, the CSA would be on to it
before you could say _____ (insert humorous phrase I can't think of).
 
S

Samuël van Laere

Dylan Parry said:
and so it should! If IE was made in the UK, the CSA would be on to it
before you could say _____ (insert humorous phrase I can't think of).

Very true it should but IE doesn't :(
MS must be the only company in the world that writes software that is
getting worse after each update/upgrade
at least it isn't getting better to say the least.
What have they done on IE to improve it since 1998? It surely wasn't CSS
support...
and yet i still use there products, i must be mad...good thing Mozilla is
around.
 
T

Toby A Inkster

Samuël van Laere said:
As for browsers support for child selectors or lack of it:
I'll have to try to see what works on what, if Mozilla is happy with it then
i will be to.

Seriously though. Look into Brucie's suggestion of descendent selectors
rather than child selectors.

Child selectors:

#main > p {
color: green;
}
<div id="main">
<p>This text is green.</p>
<div>
<p>This text may not be green.</p>
</div>
</div>

Descendent selectors:

#main p {
color: green;
}
<div id="main">
<p>This text is green.</p>
<div>
<p>This text is also green.</p>
</div>
</div>

Child selectors don't work in IE/Win. Descendent selectors *do*.
 
B

Bart van den Burg

brucie said:
child selectors are not supported by IE (win). a few other browsers
have problems as well.

Actually, since IE doesn't support child selectors, and blockquotes quite
rarely have other tags in them than p, you could as well use

blockquote p { }

Bart
 
S

Samuël van Laere

Toby A Inkster said:
Seriously though. Look into Brucie's suggestion of descendent selectors
rather than child selectors.

Child selectors:

#main > p {
color: green;
}
<div id="main">
<p>This text is green.</p>
<div>
<p>This text may not be green.</p>
</div>
</div>

Descendent selectors:

#main p {
color: green;
}
<div id="main">
<p>This text is green.</p>
<div>
<p>This text is also green.</p>
</div>
</div>

Child selectors don't work in IE/Win. Descendent selectors *do*.

Toby,

I have looked into it and i'm using it right now.
didn't even know that IE supported descendent selectors.
It works on the most used browsers i think.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top