Firefox and Large Quote Marks

[levibson]

Wondering if anyone could help me out with this CSS issue.

I have this block quote with large quote marks.

“I encourage ... into old age”

And here is the CSS I am using

span.quote_mark{

font: 2em MuseoSlab;

display: inline-block;

display: -moz-inline-stack; /* tried this for firefox */

height: 15px;

position: relative;

bottom: 12px;

}

Safari renders them nicely, not pushing any text around, but firefox seems to think it is still the height of the font and pushes the text up.

I have not found a good looking way to use images because the background changes color. Any image settings that will give transparent pixels will be helpful also.

Thanks

[jamygolden]

blockquote:before{

font: 2em MuseoSlab;

content: '“ ';

}

blockquote:after{

font: 2em MuseoSlab;

content: ' ”';

}

[levibson]

jamy, that is a nice solution, but what about the height of the characters? The larger quotes push the lines apart. And displaying them inline block doesn’t seem to fix it.

[jamygolden]

What about this:

blockquote:before{

content: '“';

font-weight: bold;

font-size: 1.3em; line-height: 1em;

margin: 0 5px 0 0;

}

blockquote:after{

content: '”';

font-weight: bold;

font-size: 1.3em; line-height: 1em;

margin: 0 0 0 5px;

}

[TT_Mark]

Although I cannot add anything constuctive to this conversation, that is a beautiful blockquote

[levibson]

Thanks Jamy – the margins weren’t doing anything, but I tried re-implementing absolute positioning and inline block and it looks to be working, we’ll see about other browsers though. This is what worked –

blockquote:before{

font: 40px/20px MuseoSlab;

content: '“ ';

display: inline-block;

position: relative;

top: 10px;

}

blockquote:after{

font: 40px/20px MuseoSlab;

content: ' ”';

display: inline-block;

position: relative;

top: 10px;

}

And Thanks TT mark, FYI the font is Raleway Thin from The League of Movable Type

[Author]

Posts