Archived

This topic is now archived and is closed to further replies.

  • 0

Excerpt Margin/Padding Shifts After First Post

Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

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 ! 

Share this post


Link to post
Share on other sites

Posted · Report post

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

#page .post-excerpt:before

The same applies to the other selectors you have.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites