Jump to content
Sign in to follow this  
bilmer

:first-letter not working in Drop Cap

Recommended Posts

bilmer    0
bilmer

I tried to use p:first-letter (pseudo-element) for my drop cap but it doesn't work.

 

Here's my html:

 

<p class="drop">Some text here. Some text here. </p>

 

CSS:

 

.single-post p.drop:first-letter {
    display:block;
    float:left;
    font-size:300%;
    font-family: times, serif;
    font-weight:bold;
    margin-top:10px;
    margin-right:7px;
    color: #000000;
    text-shadow: #888888 3px 3px 4px;
}
 
If I use <span> it works fine. But don't want to use this because it's an old method.
Here's the <span> I used and it worked fine.
 
HTML:
<p class="drop"><span>S</span>ome text here. Some text here. </p>
 
CSS:
.single-post p.drop span {
    display:block;
    float:left;
    font-size:300%;
    font-family: times, serif;
    font-weight:bold;
    margin-top:10px;
    margin-right:7px;
    color: #000000;
    text-shadow: #888888 3px 3px 4px;
}
 
I even tried this but it still won't work:
 
HTML:
<p>Some text here. Some text here.</p> <-- This is the 1st paragraph of the article.
 
CSS:
.single-post p:first-child:first-letter {
   etc
}
 
I even add this line (border: 1px solid #f33;) in the CSS to trace the location of the drop cap but it just
gives a red line on top of the text. I also remove this line (display: block;) but still won't help.
 
Any idea, what's wrong?
 
 
 
 

post-50113-0-00431500-1370486454_thumb.j

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

If you're using Firebug for Firefox or Chrome's Inspection Tool, you'll see there's no element in a post called .single-post.  You can use .entry_content or .hentry-pad in place of .single-post.

 

I'm not sure where you found that code example, but it must be applied to an older theme, rather than our Framework or other contemporary code.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
bilmer    0
bilmer

I use Firebug and .single-post is located at the top under <body class= "single-post . . .>. I want to differentiate it from the homepage which is <body class="home ....>. Also I found that .hentry-pad is found both in the single-post and the homepage and not suitable to be used in the CSS.

 

Under whatever class (.single-post, .hentry-pad OR .entry-content)  I found that p:first-letter won't work. But if I use <span> tag there's no problem as you can see in the jpg attachment.

 

I'm at a lost. I googled and tried to figure out whether I did it wrongly for the CSS but still no solution.

 

Why don't you give it a try. Create a post and use the above CSS. I'm sure something's wrong maybe there's bug in the pagelines.

 

Whoever read this, maybe you can try whether these will work or not:

1) p:first-child:first-letter  <--- to select the first letter in the first paragraph (rest of paragraphs not selected)

2) p:first-letter  <--- to select the first letter in every paragraph

3) p.drop:first-letter  <--- assume you tag as <p class="drop">Paragraph here</p>.

 

If there's no solution I'm afraid I'll stick to using <span> tag.

Share this post


Link to post
Share on other sites
Rob    547
Rob

According to W3Schools.org, the drop effect is only achieved when float is none.

 

See: http://www.w3schools.com/cssref/sel_firstletter.asp  (please look for the Definition and Usage section).  There are strict limitations to this pseudo-element, which prohibit things like shadow, etc.  You'd have to wrap the single character in another div and class and apply the shadow effect to that instead. In fact, you'd have to do this for a number of the effects you're trying to achieve as the p:first-letter option doesn't allow them.

 

In testing in their site, I was able to make the font drop by doing this:

p:first-letter
{
font-size:200%;
color:#8A2BE2;
float: none;
vertical-align: top;
}

The vertical-align moves the remainder of the paragraph up, effectively dropping the initial letter.

 

I still think .single-post is the wrong CSS element to use.  It's too high in the hierarchy.  Try .mcolumn-pad in its place.  Since you are using a custom class, you really do not need to apply a prefix higher level at all. Just do p:first-letter without the .single-post, etc.  No other paragraph marks should be affected if they do not have the proper class associated with them.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
bilmer    0
bilmer

Thanks, Rob. I think I've got the point.

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  

×