João Pedro João Pedro - 11 days ago 6
CSS Question

blockquote quotes style

I'm trying to make a blockquote style where the opening and closing quotes are bigger than the text but still fit on its line, something like this example

this is the code I have http://jsfiddle.net/EnL3R/2/

the open quote shows above the text, and both the open and closing quotes put some margins on it, I realize that it's because the character in the font itself has this white space, is there anyway I can compensate this?

Answer

Modified padding, margin, display and position attributes and now it seem to be displayed ok:

blockquote span {
    font-size:100px;
    color:black;
    position: relative;
    display:inline-block;
    padding:0px;
}

blockquote span.primo {
    margin: -40px 0 -100px 0;
    bottom: -40px;
}

blockquote span.ultimo {
    margin:-130px 0 0 0;
    bottom:0px;
}

/* IE7 only styles */
blockquote span {
    *display: inline; zoom: 1; /* IE7 fix for inline-block */
}
blockquote span.primo {
    *margin: -20px; *bottom: -20px; /* IE7 position adjustment */
}
blockquote span.ultimo {
    *margin: -50px; /* IE7 position adjustment */
}

http://jsfiddle.net/EnL3R/26/ (that yellow border around the span tag is only for testing)

Comments