Jump to content


Photo
- - - - -

Excerpt Margin/Padding Shifts After First Post


Best Answer amypreston , 30 January 2013 - 11:16 PM

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 ! 

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 amypreston

amypreston

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 30 January 2013 - 07:47 PM

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


#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 30 January 2013 - 08:53 PM

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.



#3 amypreston

amypreston

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 30 January 2013 - 08:59 PM

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



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15047 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 30 January 2013 - 10:29 PM

Hi Amy, This article may assist you -

Please Login or Register to see this Hidden Content



#5 amypreston

amypreston

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 30 January 2013 - 11:16 PM   Best Answer

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 !