CSS: question I’ve been meaning to ask for a while
My blockquotes have that nice little right left[1] side border, which is good, but with a few things I have been, oddly, unable to fix: when I’ve tried, everything else has come tumbling ugly.
- There’s too much space between the border and the text.
- The border goes on beyond where my text goes, into the empty space below. This is the problem that really bugs me.
So, any ideas what went wrong with my css?
June 29th, 2005 at 1:58 am
1. Tweak the padding-left of your blockquote style.
2. Do you use the default WordPress post markup filters? Sometimes weird things happen if you put the “wrong” line breaks with your blockquote tags when writing a post. I’ve taken to writing HTML-y posts with the “no formatting” option enabled in Text Control, as my points of irritation with wpautop are legion…
June 29th, 2005 at 5:36 am
When you say the rest goes ugly, what sort of thing is happening?
My blockquote style (which sounds similar to what you want) does this: margin-left: 20px; padding-right:20px; padding-left: 5px;
So no bottom (or top) margin spacing at all, which is probably what’s making the difference. If you want to keep a space above and below the blockquote but without the problem with the border, would it work to replace the top and bottom *margin* with *padding*? Apologies if that’s what you’ve already tried anyway.
June 30th, 2005 at 1:00 am
find your blockquote declarations, and replace them with this:
blockquote {
margin: 15px 30px 15px 10px;
padding-left: 15px;
border-left: 3px solid #C63;
}
.post blockquote p {
margin: 0;
padding: 0;
}
I think the 15px padding looks a little more comfortable, and the additional rule for the paragraph inside the blockquote over-rides the default paragraph rules.
if you want to know *why*, I’d be happy to go into a dissertation about box models and such, but I’ll spare you unless you’re really interested.