[headbirth]

Hi,

What are some of the techniques for achieving dropcaps or oversize quotes? I'm trying to achieve something like this:

http://home.earthlink.net/~headbirth...ard/Quotes.jpg

I used a table to get this but, the table seems to do some weird shifting in IE.

A CSS solution would be ideal.

Any brilliant ideas?

Thanks!

[Phil Sherry]

Originally posted by headbirth:
What are some of the techniques for achieving dropcaps or oversize quotes?

A CSS solution would be ideal.

there's a section in Dan's book (the one i suggested in your other thread), about that exact thing.

[Millennium]

The cleanest way to do oversize quotes, unfortunately, is to use :before and :after selectors, which don't work in IE/Windows (unless you use the IE7 JavaScript routines). IE doesn't break if you use them, but it won't display the quotes either.

As for drop caps, the most popular technique is to use :first-letter with the paragraph where you want to make the drop cap ( such as p#article:first-letter), set its display to block, float it to the left, and crank up the font-size. Something like this:

Code:
p#article:first-letter {
  display: block;
  float: left;
  font-size: 500%;
}

Once again, IE isn't as good here as it could be (unless you use IE7), but the basics at least should work.

[headbirth]

Thanks once again guys ... I'll defineetly check out the book when I get a chance.

I think I'll have to rethink this again and try out Milleniumns suggestion.

I had never heaardd of the :before & :after selectors...

Hmmm ... IE seems to perpetually be the problem.

[headbirth]

I just ran across this site and thought I would share it:

http://www.mikepick.com/news/archive...s-and-the-web/

[Millennium]

Originally posted by headbirth:
I had never heaardd of the :before & :after selectors...

Hmmm ... IE seems to perpetually be the problem.

They're not very well-known, precisely because IE doesn't work with them. That's really a shame, too, because you can actually achieve some very powerful effects. Dean Edwards (maker of the godlike IE7 JavaScript routines) has a technique for using them to put rounded corners on any ordinary without changing the HTML at all.