Issue with CSS first-of-type first-letter

ZennedStainna

New Member
I've set my page to create a large drop-cap letter on the first paragraph of content. This works as expected, but when I have another div with a specified class before my affected elements, it makes the drop cap disappear. See examples...
Correct display: http://jsfiddle.net/KPqgQ/
Incorrect display: http://jsfiddle.net/d73u9/I have the following code in my page:\[code\]<section id="review"> <div class="content_right"></div> <div class="content_left"> <p>text</p> <p>text</p> </div> <div class="content_left"> <p>text</p> <p>text</p> </div></section>\[/code\]With the following CSS:\[code\] #review .content_left:first-of-type p:first-of-type{ padding-top:10px; } #review .content_left:first-of-type p:first-of-type:first-letter{ float: left; line-height:90%; padding-right: 15px; padding-bottom: 10px; font-family: "Georgia",_serif; font-weight: bold; font-size: 60px; color:black; }\[/code\]to create a drop-cap large first letter.This code works when I remove the "content_right" div, but with it there, the CSS isn't working. I thought I had the correct order regarding declarations, but I must be missing something. Does anyone know why this isn't working as intended?
 
Back
Top