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.
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:
This appears to happen in all v6 Opera browsers up to 6.05. Opera 5 renders it ok.
> 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?
|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.
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. :(
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.
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 ;)
|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. |
Glad it was worked out one way or another...