I wanted my pages to have a distinctive look with good legibility, a liquid
layout, and excellent browser compatibility, especially with MSIE, the main
browser on the web, without requiring too much work or artistic talent on my
The design I chose is, in essence, a multi-column layout, with the left
column being the rounded green bar, and the right column the content, with
green separator bars at the headers. Many people find the color initially
jarring, but it's the best (web-safe) green color I've found.
I test my pages in MacIE 4.5, as well as MacIE 5.1.7, MSIE 6, Opera 7, and
FireFox 1, and validate them with the W3C
validator and the W3C CSS
After investigating the
specification, CSS and the CSS 1
specification, and multi-column layouts on various sites, including the
useful CodeBitch columns on the
dead MacEdition site, I decided to
make my layout with the old standby of Tables rather than CSS.
Tables are not trendy. However, using CSS for a multi-column layout is
tricky and has extensive browser compatibility issues. Many sites, such as
MacEdition site, do manage
multi-column liquid layouts in CSS, but it's hard, as demonstrated by the
hideous layouts in CSS Zen Garden,
of which only the initial layout is liquid.
Tables work (somewhat) even in very old browsers, and display efficiently
in modern browsers as long as the column widths are known in advance.
Although the layout uses a Table, the content isn't marked up with table
cells, but is a single cell of a two column, one row table. I use CSS for
decoration and to control some of the variation between browsers, but my pages
should display well enough in old browsers that don't implement CSS.
The left column (on the other pages -- middle column here) is just a green
bar, with a small .gif file at the top to give it a rounded corner. The image
is a transparent arc of a circle, with a white upper-left corner, which makes
it easy to experiment with different colors. Its width of 32px imposes a
minimum width on the left column. If I wanted a more complex left column, say
as a 3-column layout, I could do it the same way, as long as I stick with
percentage-based column widths. Most browsers can't handle the 1* notation at
all, so one can't mix fixed pixel widths with proportional widths.
Liquid layouts are fine, as long as the text doesn't get too wide to read
easily. CSS allows a max-width specification, which will keep the text from
becoming too wide on conforming Web Browsers, that is, all Web Browsers except
doesn't work on MacIE 5 or below.
I include a link to my main page on each other page, as an anti-hijacking
measure (not that anyone would bother with this page). As I understand
and recall, Frames allow one web page to contain another in such a way that there
is no visible way to tell that the contained page isn't part of the apparent
Web site as shown in the address, and a BASE element would catch any simple
back links to the index page. Or maybe I'm just making this up.
I edit the HTML files on my old MacOS 8.6 machine, using BBEdit 5.1.
BBEdit has some HTML editing features, such as syntax hiliting, syntax
checking, and tag building, that were initially essential and are still