WPDFD Issue #50 - May 01, 2002

Last month, I showed how you could add general styles to a page by providing specifications for the body, headings, lists, tables and links within the <head> section of the page. I also pointed out that, where all this is fine in theory, it doesn't always work in the way expected because there are so many browsers out there that have different ideas of how to interpret style sheets. When browsers don't behave as expected, you have several options.

Browser Statistics

Depending on which statistics you look at, less than 10% of Web surfers still use 4.x or less browsers. That leaves versions 5.x and 6.x of Explorer on PC (and 5.x versions on Mac) with the lion's share. Other new browsers like Netscape/Mozilla, Opera and iCab still have relatively little support. In percentage terms, about 3% in total. http://www.upsdell.com/BrowserNews/stat.htm http://www.TheCounter.com/stats/2002/March/browser.php Putting all this into some kind of perspective, considerably less than one in ten people are still using older browsers.

Communicate

Standing back and looking at the broader picture for a moment, the purpose behind any Web page is to communicate. The communications are mainly through words and images but a few other possibilities are gradually becoming viable as bandwidth increases. There is another factor however which is sometimes expressed as, "It's not what you say but the way that you say it." How you put a message across is very important and can color the meaning of the words quite significantly.

The 'No Tears' approach

Since I started using style sheets on WPDFD three years ago, I have used a 'safe' method which uses tables for positioning and CSS for specifying the text within the table cells. Note the emphasis on 'the text'. I do not use CSS 'element' declarations for body, headings, paragraphs, tables etc. because they can, and do, go horribly wrong in certain browsers. As the site has evolved over a period of nearly five and half years and now has several hundred pages archived, the idea of going back and doing them all again using pure CSS2 has little appeal and would mean virtually starting from scratch.

Classes and Elements

The main spec for the text on this page is the .bodytext class:- .bodytext {color: silver; font-style:normal; font-size:11px; line-height:19px; font-family: Verdana, Geneva, Arial, sans-serif } Note that a 'class' declaration always begins with a period whereas an 'element' declaration is just the name of an existing HTML tag. body is an element .body is a class So as not to confuse the two, I call the class .bodytext If you view the source of the page, you won't see this declaration anywhere.

Spanning Classes

Notice that I have only changed one attribute of the type spec in each new class - the boldness and the color. So, now I can do this:- <div class="bodytext"> This is <span class="green">green </span> bodytext and this is <span class="bold"> bold </span> </div> Which displays as green bodytext and bold .

Better safe than sorry

Now, I have to point out that taking this 'table and style' approach is frowned upon by purists who are only too keen to highlight its disadvantages. 1. It mixes and confuses structure and style. 2. It doesn't work for non-desktop computer-based browsers such as those in cell phones, PDAs and other such devices that are increasingly being connected to the Net. 3. It is more difficult to maintain and bloats page sizes unnecessarily.

Adobe Photoshop 7

The long awaited Photoshop 7 has arrived! The people who have been chomping at the bit for it most are those who find it key to their migration from MacOS 9.x to OSX. The lack of an OSX compatible version of Photoshop is the main excuse I have heard for not upgrading. However, this site is about Web design not OSes and I will look at Photoshop 7 from a Web design perspective. Version 7 now shares the new 'soft look' interface introduced in Illustrator 10.

At first glance, Flash MX looks very much like its predecessor, Flash 5, but as you dig down it becomes rapidly apparent that a great deal has altered. This is not just an overhaul but a major rebuild including functionality, programming and work method changes. The user interface has been rationalised to improve usage of screen real estate with the ability to dock property panels and libraries into customisable, collapsible groups while a contextual Property Inspector has been added à la Dreamweaver/Director to integrate property controls into one window.

One of the easiest ways to get errors in your CSS-based pages is to copy and paste text, especially in WYSIWYG editors. Does the Copy and Paste facility in your Web page editor only take the text across or does it bring the style with it? If it pastes the styles into your new section too, you can get ambiguities and conflicts.