Your Ad Here

advanced code snippet search

Posted By

iTony on 01/26/08


Tagged

css text browsers perfect paragraphs


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

brent-man
basicmagic
jonhenshaw
monapdx


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.

Expand | Embed | Plain Text 
  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.