homepage Welcome to WebmasterWorld Guest from 54.235.36.164
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS Drop Cap
Possible to do a cross-browser version that works?
mattur




msg:1206476
 3:46 pm on Sep 13, 2002 (gmt 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.

 

madcat




msg:1206477
 3:55 pm on Sep 13, 2002 (gmt 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.

mattur




msg:1206478
 3:25 pm on Sep 16, 2002 (gmt 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?

pageoneresults




msg:1206479
 3:29 pm on Sep 16, 2002 (gmt 0)

> 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




msg:1206480
 3:46 pm on Sep 16, 2002 (gmt 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.

mattur




msg:1206481
 4:09 pm on Sep 16, 2002 (gmt 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. :(

madcat




msg:1206482
 4:19 pm on Sep 16, 2002 (gmt 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.

mattur




msg:1206483
 11:55 am on Sep 19, 2002 (gmt 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 ;)

madcat




msg:1206484
 2:47 pm on Sep 19, 2002 (gmt 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...

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved