Archived topic
Lists within block quotes don't inherit the style
7 replies · Started by Melanie Jongsma on May 1, 2020
I defined a style for block quotes on my site by adding this CSS:
/*Block quote*/
blockquote {
background: #fff;
-webkit-box-shadow: 5px 5px 5px 5px #d2d2d2;
box-shadow: 5px 5px 10px 0px #d2d2d2;
}
blockquote p {
font-family: courier, serif;
font-style: normal;
font-size: 16px;
color: #000;
}
Most of the time this looks great, but when I include an ordered or unordered list in my block quote, the style of the list is wonky—the text is in a different font, it's larger, and it's italic.
I don't know enough about CSS or HTML to know where to even try to adjust list styles, within a block quote or in regular text. And I don't know if the adjustment needs to be made to the list style or the block quote style.
I'd appreciate any help figuring this out.
Hi there,
Can you guide me to a page/post where I can see the issue?
Here's one I just published:
https://www.thelansingjournal.com/news/2020/05/01/a-may-1-message-from-lansing-mayor-patty-eidam/
You'll have to scroll down a little to see the unordered lists.
As I was looking for other samples, I also noticed that any text I put in h3 tags also turns italic and is not courier.
Sorry I'm a little bit confused.
You want the entire page content to wrap in <blockquote>?
What style would you like for the list?
I want the entire statement from the mayor to be in blockquote tags, which it is. What I don't understand is why the style of the text changes whenever it's wrapped in a tag within the block quote tag. In other words, my are my lists not in the courier font, like the rest of the blockquote? Why are they italic?
When I do a list in a regular post, not a blockquote, the font stays the same as the rest of the post.
Hi there,
try this CSS instead:
blockquote {
background: #fff;
-webkit-box-shadow: 5px 5px 5px 5px #d2d2d2;
box-shadow: 5px 5px 10px 0px #d2d2d2;
font-family: courier, serif;
font-style: normal;
font-size: 16px;
color: #000;
}Both the Paragraph and the list will inherit these styles now.
Hey, that worked! It looks great! Thank you so much!
You're welcome
