css

from silverorange labs

CSS Drop Shadows: A List Apart

Best dropdown menu I’ve seen yet … gazingus.org

Is there really such a thing as a tableless, CSS-based, liquid, three-column layout?!

Cascading Style Sheets, Promise vs. Reality, and a Look to the Future
By Mark Newhouse

Cascading Style Sheets (CSS) are a technology with a lot of promise, but their often-hyped potential leaves some designers feeling blindsided by the 2×4 known as reality. This article sorts out the differences, and makes a case for educating yourself now in preparation for the future.

You’ve heard it in web design forums and on email lists. You’ve read about tossing tables in favor of standards-based CSS layout on sites such as A List Apart and Web Reference. Maybe you’ve visited some sites that offer ready-made, table-free templates. So you dig a little deeper and start discovering little discrepancies in browser implementation. And then you realize that some of the discrepancies aren’t so little.

Have you ever wanted to format the first letter of a paragraph so that it was larger than the rest of the text in the paragraph? This effect - commonly seen in print - is called the “dropcap”. The easiest way to do this is with a little bit ‘o CSS. It works in most browsers and adds a smidge of flair to your site. You only need to utilize three style attributes to get it to work.
[click to continue...]

I finally sat down and worked on The Weblog Dictionary. I added a few new words and updated some links and terms. It’s also now using the same CSS file as most of the rest of the site, and - because I’m that much of a square - it’s now valid XHTML1.0 Transitional, whatever that means. If you know of any items that should be in there, please send them to me.

More good stuff from A List Apart: The Trouble With EM ‘n EN. My reading list ( and things to fix on my site) runneth over.

“I’d love a proportional-width relative-positioning design for my weblog, but I’m too afraid of cross-browser compatability issues. I don’t want to spend more than a weekend figuring out how to get two columns to work in three browsers.” - Dan Sanderson

I have to agree with Dan’s sentiment here. It’s a bear to get relative positioning to work. I’ve got a two-column layout on my main site and a three-column layout here. I know that things look great at 1024×768 on IE6/PC, but I’m not so sure about other browser/OS configurations. My pages should be CSS and (x)HTML compliant, but does that really mean they render nicely? I doubt it. I’d love to please everyone, but I just don’t know if it’s possible without spending hours (days?) making hacks for every browser/OS combination out there. My stats tell me that almost all my visitors are using IE5 or better on a PC. Is it really worth the effort to try to be Netscape / Mac-friendly? I’d like to know. Are any of my visitors using Macs or Netscape? How do my pages look to you?

Finally! The latest issue of A List Apart includes a lesson on Fixing Your Site With the Right DOCTYPE. This is terrific and I’m going to fix my pages as soon as I can. ALA saves the day (again!).

Two Tricks from the MT Support Forum:

• How to Randomly Generate Entries
• How to Create a Printer-Friendly Template

Of course if you are using CSS to its fullest, you can create printer-friendly pages by simply changing stylesheets. There is a tutorial at Evolt that explains how.

Write better web pages, free design from content, and resolve CSS browser-compatibility issues with Tantek’s High Pass Filter!

Brian Costner has compiled the best guide to designing menus using CSS Rollovers that exists to date. Check there for everything you need to know about creating a cross-browser-compliant css rollover menu.

Hey! I didn’t know you could mix and match classes in css!