Welcome to WebmasterWorld Guest from 54.162.172.144

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Drop Cap

Possible to do a cross-browser version that works?

     
3:46 pm on Sep 13, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 29, 2002
posts:980
votes: 0


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.

3:55 pm on Sept 13, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


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.
3:25 pm on Sept 16, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 29, 2002
posts:980
votes: 0


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?

3:29 pm on Sept 16, 2002 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12169
votes: 55


> 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?

3:46 pm on Sept 16, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


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.

4:09 pm on Sept 16, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 29, 2002
posts:980
votes: 0


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. :(

4:19 pm on Sept 16, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


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.

11:55 am on Sept 19, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 29, 2002
posts:980
votes: 0


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 ;)

2:47 pm on Sept 19, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


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...