Question

The URL is http://crispylogs.com/writing-high-quality-posts-to-increase-traffic-top-20-tips/

I am trying to add an effect, like a magazine's "drop-cap," but it's not working for me, and I don't know why.

The following is the CSS code I have used:

.single .entry p:first-child:first-letter {  
    float: left;  
    color: #903;  
    font-size: 47px;  
    line-height: 40px;  
    padding-top: 0px;  
    padding-right: 8px;  
    padding-left: 3px;  
    font-family: Georgia;  
}
Was it helpful?

Solution

your p tag is not first child. That is the problem

try first-of-type

OTHER TIPS

that is not CSS

remove the <pre> </pre>

that should help

I was able to use your styles to create the effect you want: http://jsfiddle.net/uEkqU/

Perhaps you're running into a specificity issue? Try the following:

.post .entry p:first-child:first-letter {  
    float: left;  
    color: #903;  
    font-size: 47px;  
    line-height: 40px;  
    padding-top: 0px;  
    padding-right: 8px;  
    padding-left: 3px;  
    font-family: Georgia;  
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top