2

I'm trying to style a blockquote to look like this:

how the blockquoute should look

At the moment it looks like this:

with whitespaces (it is supposed to be without the white spaces at the beginning of the blockquote

My HTML/CSS

<blockquote><p>Lore ipsum...</p></blockquote>
blockquote {
margin: 1em 2em;
border-left: 1px solid #999;    
padding-left: 1em; }

blockquote:before {
content: open-quote;
font-size: 6em;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
position: relative; left: -15px;
}

blockquote p:first-letter {
margin: .2em .3em .1em 0;
font-size: 220%;
 }
/* without unnecessary font type/color attributes*/

I'm looking for something like position: relative; left: -15px;, but it should work much more reliable than this (more reliable means with different window sizes... oh and it should be pure css... ;-))

Do you know a solution problem that does not leave any unnecessary spaces behind?

4
  • You could try with padding-left?
    – Schoof
    Commented Nov 21, 2011 at 22:01
  • Could you give me a hint? How can I use padding-left to not have white-spaces at the beginning of the blockquote?
    – Nyoman
    Commented Nov 21, 2011 at 22:06
  • I don't think I understand your question. If you just want the 2 divs next to eachother you should use float:left.
    – Schoof
    Commented Nov 21, 2011 at 22:10
  • If you're going to style a blockquote like this, please use a proper set of curly quotes:
    – ghoppe
    Commented Nov 21, 2011 at 22:42

2 Answers 2

3

I added a float left and changed the top/left positioning declarations.

blockquote:before{
 content: open-quote;
 font-size: 6em;
 line-height: 0px;
 margin: 0px 5px 0px -40px;
 vertical-align: bottom;
 position: relative;
 float: left;
 top: .4em;
 left: -.15 em;
}

Here is the output. I didn't attempt to match your fonts and colors. sample output

1
  • Thanks that fixed it! -But now (?) the second (and third...) time the blockquote is used the quotation mark is wrong (single instead of double) -> See: i.imgur.com/muMr8.png Do you know why?
    – Nyoman
    Commented Nov 21, 2011 at 23:02
1

With a position: relative on the blockquote you can easily position the pseudo element with position: absolute. See this jsfiddle demo http://jsfiddle.net/VZxhH/1/

blockquote {
    border-left: 1px solid #999;
    position: relative;
    padding-left: 1em;
    margin: 1em 2em;
}

blockquote:before {
    content: open-quote;
    position: absolute;
    font-size: 6em;
    left: -38px;
    top: -23px;
}
1
  • To remain consistant with question top and left should be in em not pixels. Commented Nov 21, 2011 at 22:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.