This Web Page

I'm new to HTML, but I've tried to make a web page that will display properly in a wide range of Web Browsers, without a lot of compatibility issues. Here's how I do it.

As an experiment, here is a third, fixed-width column of 160px, implemented with nested tables. Setting a width on the left column and leaving no width on the right column, with a table width of 100%, works in FireFox 1 and MacIE 5.1, is almost right in WinIE 6 (but no longer liquid), but doesn't work in Opera 7.5 or MacIE 4.5. Setting a "1*" remaining width on the right column works only in FireFox. It seems strange that MSIE and Opera don't make proper use of the "1*" type of width specification. Note that MSIE should be in "standards compliant" mode, as this page has a proper DOCTYPE header. I'm not sure whether MSIE and FireFox are doing incremental layout or not with this setup (darn fast connection!).

Note that the column color goes all the way down to the bottom of the page, matching the height of the rest of the page, without any fuss. It seems to be challanging to accomplish this with CSS.

Design

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 part.

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 validator.

Implementation

After investigating the HTML 4.01 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 MSIE. For MSIE I needed another trick, using a bit of Javascript. Even that 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 helpful.

Back to Tony Nelson's Home Page