Tech Info - W3C CSS2

We use CSS Style Sheets. We've used CSS Style Sheets for years. We are Amateurs. We missed the point of CSS.

Phew! The Mea Culpa's are over. Here's the point we missed. We thought CSS was a cool way to bury all that format and color and font stuff in one place, that is, we took the word style too seriously. It is really about separation of content and layout.

So in mid 2003 we decided to throw out all our historic liquid table layouts and moved to a new CSS three column liquid layout. We document the experience below.

CSS 3 column layout	When we converted the site to a CSS three column liquid layout in mid 2003 we did a lot of experimentation and made a number of compromises. This page describes what we did, what we had to do and how we got there. The kluges and trade-offs. Includes links to our original table based liquid design for contrast.
CSS menus	With the right browser perfect pop-up, pop-down and multi-level menus without 20K of javascript - replaced with about 10 lines of CSS. This section explains with worked examples of good and bad experiments how we moved from javascript to pure CSS menus for Opera and Gecko in mid 2003. If the bottom of the right hand menu on this page shows a CSS Popup button you have a decent browser. If it doesn't - go on spoil yourself, and get tabbed browsing as well by getting a decent browser (Firefox) or our favorite Windows browser K-Meleon. Finally in mid 2006 we had had enough - we tried to build MSIE 5/6 popups and kinda, well sorta, succeeded.
CSS Guide	Part of our One Page initiative. Contains a guide to all those CSS selectors, pseudo classes, '#' and stuff. Examples of selector usage and links to individual W3C CSS sections.
Page Stuff	HTML vs XHTML: Seems we reached a dead-end and HTML is rising from the ashes. So now what do we do? DOCTYPE: We finally got so offended that the W3C Validator kept giving us warnings about character set conflicts that we thought it was about time to get some more information. It was not as simple as we thought. ACCESSIBILITY: We'd had a guilty conscience for years over accessibility and had looked for decent advice many times. Lots of motherhood but very little practical advice. We recently made some changes that we hope will help.
CSS Techniques	During our journey to a better CSS place we created a number of test pages to experiment with specific problems and techniques. This page describes and links to the various experiments, for example, centering a page, width="100%" problems in divs, conditionally generating text. We have also added a section on CSS only pop-ups/out drop-downs etc which, if you are using the right browser, you will see used on this site.
CSS Short Forms	We are two finger typists. Life is too short to type 'border-left-width', border-right-width' etc. when you don't have to but we can never find a concise reference. We are also impatient and those W3C specs are big.
Web Fonts	A demo page that displays a bunch of popular fonts in various styles and sizes to show your browser's font support and rendering characteristics - don't even ask why we did this.
Our CSS2 Use	What we are doing with CSS2. Maybe should be renamed 'How not to use CSS"!

Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.

Tech Info - W3C CSS2

Tech

HTML Stuff

CSS Stuff

DOM Stuff

Usability/Access

Jolly Useful

Our Stuff

Javascript

Pop-out Menus