CSS Drop Cap

Possible to do a cross-browser version that works?

[mattur]

I'm using CSS like this:

p.abstract:first-letter {
font-size: 300%;
float: left;
}

to add a drop cap to the first letter of paragraphs of class "abstract". This works beautifully in IE6. In Mozilla 1.1 and Opera 6 the drop cap still renders but with an ugly gap at the top and bottom. The client is using Mozilla...

Is it possible to fix this so it looks reasonably professional in all modern browsers? I've tried various margin and padding settings but to no avail.

[madcat]

Maybe you could use a span tag on the letter to get the result you need. That code has sketchy results in the browsers I'm using.

[mattur]

Thanks madcat. I've tried using a span, but all this does is make the drop cap render as badly in IE as in Mozilla and Opera <sigh>

While on the subject, I've also stumbled across a fairly dire Opera css bug with small-caps. When rendering the page Opera v6 appears to put line breaks mid-word, after the proper cap. For example, if you have a title "Something Else" in small-caps, Opera may render it like this:

Something E
lse

This appears to happen in all v6 Opera browsers up to 6.05. Opera 5 renders it ok.

Any workarounds?

[pageoneresults]

> This appears to happen in all v6 Opera browsers up to 6.05. Opera 5 renders it ok. Any workarounds?

Have you tried adding the display:inline to that?

[madcat]

When rendering the page Opera v6 appears to put line breaks mid-word, after the proper cap

It renders okay for me on those browsers, but like everything else here, mileage will vary.

What is the phrase wrapped in? You could try and specify the width propery of the element.

Or as pageoneresults mentioned, use display inline if the element is marked as block.

[mattur]

It's just a h1 with font-family Georgia..., a color and font-variant: small-caps. Nothing too complex!

Likesay, appears to be problem in Opera 6. I've submitted a bug report.

Do you think this is a show stopper? Should I remove the small-caps so that Opera 6 users don't get the problem?

The site as a whole is pretty lite, graphics wise, and I wanted to use some presentation tricks to jazz it up a bit. And the design fits the theme of the site really well, so I'm fairly reluctant to remove it. :(

[madcat]

Depends on how integral the small-caps value is to the look and feel of the site...Alas, according to your denoted use, and the CSS browser compatibility chart [webreview.com], don't expect this to carry a theme throughout your site on all browsers.

On the otherhand, you could just type everything uppercase and use <span> tags for the first-letter of each word.

[mattur]

Thanks for your comments.

The site is over 100,000 pages driven from xml so I can't really use span's for individual letter formatting in title case/small caps. Plus AIUI small-caps as a style renders in a "small caps face" in fonts that support it, which is not the same as putting the text all in caps with some different sizes. Plus it's kinda messy ;)

I've turned off the drop cap, kept the small-caps - it's a great effect for an "old site", and older browsers just render it in title case or as all caps. Any Opera 6 users who complain will be told to upgrade/downgrade to a less buggy browser ;)

[madcat]

The site is over 100,000 pages driven from xml so I can't really use span's for individual letter formatting in title case/ small caps.

Why not;)

Glad it was worked out one way or another...