This is an exciting area which can only grow in importance. However, it is
presently full of pitfalls (as you seem to have discovered) as a result of
a failure to implement CSS standards properly with respect to media
designations. Have you seen the Wiki page?
There's no shortage of advice but successful implementations seem to be
thin on the ground. I too would love to know of any. I suggest you examine
Opera's own site, which not only has a handheld stylesheet but which also
exploits Opera's experimental support for CSS3 Media Queries (note: it's
only a Candidate Recommendation at present).
In addition to the handheld stylesheet, the site also customises the
display for narrower screens, using these two media queries:-
@media screen and (max-width: 760px) and
@media screen and (max-width: 480px)
You will see the effect only in Opera, of course. Having narrowed your
window, you need to reload. The increase in document fluidity is stunning.
I've been building handheld and media-query support into my own site as
proof-of-concept but it's not publically available yet.
Do let me know how you get on, off- or on-list as appropriate.
Cardiff, Wales UK
Opera e-mail client: http://www.opera.com/m2/
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/