4 replies to this topic

[amypreston]

Ok, I give. I have been weighed, I  have been measured, and I have been found wanting. (Sorry, A Knight's Tale reference, it was on like all weekend last weekend.) Anyways,  I just can't figure out my problem here. I'm trying to add a Quotation mark using css before each excerpt on a blog summary page. Works as expected on the first post, but on all the following ones, it seems to shift left over just enough such that the Quotation mark is becomes an apostrophe. The css I'm using is:

 

 

.post-excerpt {

    color: #777777;

    font-family: serif;

    font-size: 40px;

    font-style: italic;

    line-height: 1.35em;

    margin:  .5em 20px;

    min-height: 32px;

    padding: 0 0 0 55px;

}

 

.post-excerpt:before {

    display: block;

    float: left;

    margin: 30px 15px 0 0;

    font-size: 100px;

    content: open-quote;

    color: #bababa;

    text-shadow: 0 1px 1px #909090;

}

 

.post-excerpt:after {

    content: none;

}

 

You can see what I'm talking about at www.gavelpit.com .

 

Any guidance, direction, shots of cheap whiskey, would be greatly appreciated ! Thanks !!! 

 

Amy

[catrina]

You should try adding #page at the beginning of your selector in the CSS so that it looks like this:

Please Login or Register to see this Hidden Content

The same applies to the other selectors you have.

[amypreston]

Thanks Catrina !

 

I added #page for each selector, but that didn't seem to do the trick.

 

I have figured out it seems to be browser specific: works in IE9 and Opera, has the same problem after the first post in Chrome, Firefox and Safari. I'm thinking there's something "em" related going on, I'll keep at it. 

 

Amy

[Danny]

Hi Amy, This article may assist you -

Please Login or Register to see this Hidden Content

[amypreston]

Thanks Danny. That was my original reference source for my code, too. Great resource.

 

I did figure out the solution, not sure why it works, but it does. 

 

If I use:

 

content: open-quote;

 

I have the rendering problem in Chrome, Firefox, and Safari. Renders fine in IE9 and Opera.

 

If I use a unicode to specify the quotation mark style I want, such as:

 

content: "\201C";

 

Everything is shiny !!! 

 

Thanks for your help Catrina and Danny !