Jump to content
Sign in to follow this  
amypreston

Excerpt Margin/Padding Shifts After First Post

Recommended Posts

amypreston    0
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

Share this post


Link to post
Share on other sites
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
amypreston    0
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

Share this post


Link to post
Share on other sites
amypreston    0
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 ! 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×