We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.


Posted By

iTony on 01/26/08


Tagged

css text browsers perfect paragraphs


Versions (?)


Who likes this?

3 people have marked this snippet as a favorite

brent-man
basicmagic
jonhenshaw


Drop Cap


Published in: CSS 


This would work well in any browser if we leave in a perfect world :P I am pretty sure it doesn't work on IE6, but it might work on any other web browser following the CSS2.1 standards.

  1. p:first-child:first-letter{float:left;font-size:1.6em;padding:5px;background:#000;color:#fff;margin-right:4px;font-weight:bold;}
  2. p:first-child:first-line{font-variant:small-caps;}

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: jonhenshaw on January 26, 2008

Does anyone know if this works in IE 6 or IE 7?

Posted By: brent-man on January 27, 2008

I tested it in IE7, and the first letter is centered vertically with the first line; so it doesn't work exactly. You can change it with line-height though (line-height:25px;), it corrects the positioning (in Opera 9 as well) and doesn't effect FF.

[Here is another example of Drop Caps that I use.] (http://www.mandarindesign.com/dropcaps.html)

Posted By: LadynRed on March 3, 2008

Won't work in IE6 since it doesn't support those pseudo-classes. Should work in IE7.

You need to login to post a comment.