mail us  |  mail this page

products  |  company  |  support  |  training  |  contact us

Tech Stuff - W3C CSS

We use CSS Style Sheets. We'd used CSS Style Sheets for years (even in 2003). We were 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.

HTML5 Conversion So the new holy grail for web folks is HTML5. Truth be told we got very ticked off in 2010'ish when the about-face from XHTML (never big fans) to HTML5 happened. Before the end of this millenium we'll probably have a stable HTML5 standard. Nevertheless, hope triumphs over experience. We started HTML5 page validation on some pages and are progressively converting. Why is this page in the CSS section - because for us almost all the changes relate to CSS - raw HTML in converted pages is less than it was. Would we use any true HTML5 features at this stage (end 2013)? Are we crazy? But, sometime before the end of the millenium - absolutely.
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 (2013 covers MSIE, Chrome, Safari and all the other guys who came late to the W3C compliant party). 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).
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 CSS Use What we are doing with CSS. 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

tech home
audio stuff
web stuff
dom stuff

css stuff
language stuff
regex stuff
rfc stuff


protocol stuff
cable stuff
lan wiring
rs232 wiring
dec > hex > bin
character sets
data rate stuff
mechanical stuff
howto stuff
survival stuff
wireless stuff
pc stuff
electronic stuff
tech links
open guides
RSS Feed Icon RSS Feed

If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as Firefox

web zytrax.com

Share Page

share page via facebook tweet this page submit page to stumbleupon submit page to reddit.com

Page Features

Page comment feature Send to a friend feature print this page Decrease font size Increase font size

HTML Stuff

W3C HTML 4.01
HTML5 (WHATWG)
HTML4 vs HTML5
HTML5 Reference
W3C Page Validator
W3C DOCTYPE

CSS Stuff

W3C CSS1
W3C CSS2.1

DOM Stuff

W3C DOM
W3C DOM Events
Gecko DOM
MSIE DOM

Usability/Access

usability.gov
W3C -WAI
Web Style Guide
WebAim.org

Jolly Useful

Peter-Paul Koch
A List Apart
Eric Meyer on CSS
glish.com
DOCTYPE definitions

Our Stuff

Our DOM Pages
DOM User Guide
DOM Explorer
DOM Navigation
CSS Techniques
CSS Short Cuts
CSS overview
Oh Really!

Javascript

ECMA-262

Display full width page Full width page

Print this page Print this page

SPF Record Conformant Domain Logo

Copyright © 1994 - 2014 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
Hosted by super.net.sg
web-master at zytrax
Page modified: December 04 2013.