Style Blockquote Marks without Images?

Hi, I’m trying to see if I can style a simple blockquote with CSS, but no images. Images are not out of the question, just thought they shouldn’t be necessary and are harder to change.

So I have actually got it working the way I want in FF (Mac & PC), Safari & Chrome. But, of course, IE struggles. I’m not familiar enough with all the IE hacks to know how to approach this, though. So any help would be greatly appreciated!

Here’s an example on a test site:
Blockquote Sample

The ultimate goal is to simply have large quote marks at the beginning and ending of the quote. There will be only one paragraph for each quote. And we would PREFER the closing quote mark to not hang at the bottom-right of the text box, but rather to be next to the text as you see in the examples (if FF). It can just look funny if you have a wider box and only one or two words in the last line if the closing quote mark is way off to the side.

So in IE, the biggest problem is that the line-height (leading) on the last line is getting messed up. I had fixed that in other browsers with the vertical-align. And of course, the alignment of the marks is pretty messed up.

  • Any help or tutorials for this???

Thanks. All tutorials I find use images or pseudo-classes. Need cross-browser support.

As far as the last closing quote, when using vertical-align:middle without top:-2px it seems to give (close to) the same results in all browsers.

Ahhh. Sometimes it’s such a simple thing. Just a slightly different approach to a problem. Too many ways to skin a cat with CSS…

Thanks a lot! I wonder why I couldn’t find any tutorials showing something like this. Seems simpler and more elegant than using images, and the closing quote is actually near the text.

So in IE, the biggest problem is that the line-height (leading) on the last line is getting messed up. I had fixed that in other browsers with the vertical-align. And of course, the alignment of the marks is pretty messed up.
Hi,
As far as the last closing quote, when using vertical-align:middle without top:-2px it seems to give (close to) the same results in all browsers.


blockquote span.closingQuote {
font-size:34px;
[COLOR=Blue]padding-left:2px;
vertical-align:middle;[/COLOR]
}