Jump to content


Photo
- - - - -

:first-letter not working in Drop Cap

drop cap dropcap first-letter

Best Answer Rob , 06 June 2013 - 02:10 PM

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

 

See: http://www.w3schools...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.

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 bilmer

bilmer

    Newbie

  • Members
  • 3 posts
  • LocationPerlis
  • Framework Version:2.4.2 Pro
  • Country: Country Flag

Posted 06 June 2013 - 02:43 AM

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?
 
 
 
 

Attached Files



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 June 2013 - 04:28 AM

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.



#3 bilmer

bilmer

    Newbie

  • Members
  • 3 posts
  • LocationPerlis
  • Framework Version:2.4.2 Pro
  • Country: Country Flag

Posted 06 June 2013 - 07:19 AM

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.



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 June 2013 - 02:10 PM   Best Answer

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

 

See:

Please Login or Register to see this Hidden Content

  (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:

Please Login or Register to see this Hidden Content

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.



#5 bilmer

bilmer

    Newbie

  • Members
  • 3 posts
  • LocationPerlis
  • Framework Version:2.4.2 Pro
  • Country: Country Flag

Posted 07 June 2013 - 04:16 PM

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